15632335515

当前位置: 主页 > 建站教程 >

CSS选择器举例使用讲解

  CSS选择器最基本的有四种:标签选择器、ID选择器、类选择器、通用选择器。CSS是以后学习DIV+CSS架构WEB标准的基础,也是CSS的精典内容。以下是青锋建站带给大家的CSS选择器的使用举例

CSS标签选择器

一个完整的HTML页面是有很多不同的标签组成,而css标签选择器,则是决定哪些标签采用相应的CSS样式,比如,在style.css文件中对p标签样式的声明如下:
  1. p{
  2. font-size:0.8em;
  3. background:#ddd;
  4. color:#636363;
  5. }
  这么做,会使页面中所有p标签的背景都是#ddd,文字大小均是:0.8em,颜色为#636363,这在后期维护中,如果想改变整个网站中p标签背景的颜色,只需要修改background属性就可以了,就这么容易!当然你也可以设置整个页面中所有的div的属性、a链接的属性、span的属性,这么做方便是方便,但是不够灵活,如果页面中除了某个p标签背景不是红色外,其他的都是红色,就不能用这种方法定义了。

CSS ID选择器

ID选择器在某一个HTML页面中只能使用一次,就像只有一个身份证 (ID)一样,不重复!在页面中使用ID选择器更具有针对性,如:

先给某个HTML页面中的某个p标签起个ID,代码如下:
<p id="one">www.sjzphp.com:石家庄专业的网站建设专家</p>
在CSS中定义ID为one的p标签的属性,就需要用到“#”,代码如下:
  1. #one{
  2. font-size:0.8em;
  3. background:#ddd;
  4. color:#ff5555;
  5. }
  这个类选择器定义了ID为"one"的P标签的颜色为#ff5555,而其他的P标签的文字颜色依然是#636363。

CSS类选择器

  这种css选择器更容易理解了,就是使页面中的某些标签(可以是不同的标签)具有相同的样式。大家可以和PHP语言中的类联系起来,类表达具有相同特点的一部分人或物,当我们把几个P标签设置为相同的类名,然后再应用CSS样式,这一类P标签就具有这个样式,而且应用类属性的元素可以是不同元素。和ID选择器的用法类似,只不过把id换做class,如下:
  1. <p class="one">此处为p标签内的文字</p>
如果我还想让div标签也有相同的样式,怎么办呢?加上同样的class就可以了,如下:
  1. <div class="one">此处为DIV标签内的文字</div>
这样页面中凡是加上class="one"的标签的样式都采用下面的样式
  1. .one{
  2. font-size:0.8em;
  3. background:#ddd;
  4. color:#334455;
  5. }
补充:
  一个标签可以有多个类选择器的值,不同的值用空格分开,如:<div class="one yellow left">一个标签可以有多个类选择器的值</div>
  这样我们可以将多个样式用到同一个标签中,当然也可以,ID和class一块用<div id="my" class="one yellow left">ID和class可同时应用到同一个标签</div>


CSS选择器的集体声明

  在我们使用选择器的时候,有些标签样式是一样的,或者某些标签都有共同的样式属性,我们可以将这些标签集体声明,不同的标签用“,”分开,比如:
  1. h1,h2,h3,h4,h5,h6{color:#900;}
  2.再举个例子,无论什么样的选择器,“标签选择器”,“ID选择器”,“类选择器”,只要是选择器,只要有公共的CSS代码,就可以用“选择器的集体声明”,起到精简代码的作用,有一段代码如下:
  1. #header{font-size:14px; background:#ccc;}
  2. div{font-size:14px; width:960px;}
  3. .blue{font-size:14px; color:#009;}
  4. .h1{font-size:14px; font-weight:normal;}
  我们就可以将上面的代码进行精简,把公共的CSS代码用选择器的集体声明提取出来,有点类似小学的“提取公因式”似的,如下:
  1. #header,div,.blue,h1{font-size:14px;}
  2. #header{background:#ccc;}
  3. div{width:960px;}
  4. .blue{color:#009;}
  5. .h1{font-weight:normal;}
    这是选择器的集体声明的经典应用,把共同的部分提取出来,这么做的好处,相同的部分共同定义,不同的部分单独定义,保证风格统一,样式修改灵活,这也是优化CSS代码的一块,要记住!

CSS选择器的嵌套

选择器也是可以嵌套的,如:
  1. #div1 p a{color:#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/
  这样的好处就是不需要在单独的为ID为div1的标签内的p标签内的a标签单独定义class选择器或者ID选择器,CSS代码不就少了嘛~同样也是CSS代码优化的一块。

分享到:

最新发布MORE

  • 如何实现只有会员登录才能提交dede织梦自定义表单
  • dede织梦列表页第一页与默认页标题重复
  • 使用@import和link导入CSS样式文件有什么区别
  • CSS设计网站布局样式常用技巧
  • CSS块级元素与行内元素的对比
  • DIV+CSS使用技巧与错误调试方法
  • CSS选择器举例使用讲解
  • CSS滤镜属性的使用与讲解
  • XML显示数据验证文档的使用方法
  • css使块元素隐藏的方法
  • 网站案例   关于我们
  • 联系电话:15632335515   QQ:943703539
  • 联系地址:河北石家庄桥西区
  • Copyright © 2016-2026 青锋工作室 版权所有
  • 15632335515