CSS样式书写之选择器详解


为了更多的朋友能够更深入的学习了解CSS的使用,我们这里再次对其基础知识进行讲解,本文详解?CSS样式书写之选择器。
CSS基本书写方法

CSS的书写由三部分组成,选择器、属性和属性值,写法:

选择器 { 属性: 属性值; }

例如前面看到过的:h1 {color:red;font-size:14px;}

其中h1就是选择器,color和font-size是属性,red和14px就是两者各自的属性值,属性和属性值之间要用冒号(“:”)连接,两个属性之间要以分号(“;”)隔开。

平时把它们写在.css文件里时为了可读性和修改方便,最好分行写:


h1 {
color:red;
font-size:14px;
}

 

CSS组合写法

CSS也可以给多个选择器附加相同的属性和属性值,只需要在选择器间用逗号(“,”)隔开就可以了。


h1,h2,h3,h4,h5,h6 {
color:red;
font-size:14px;
}


上面是将h1到h6标题的字体变成14像素的红体字。


派生选择器

派生选择器也叫后代选择器,顾名思义,它是处于一个已有的选择器之下的。它是在已定义的样式下既继承原有多数样式,再单独定制一个或多个特殊样式的选择器。例如:


strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}


页面代码:

 

<p>一段文字<strong>红色粗体字</strong>.</p>
<h2>这里也是红体字</h2>
<h2>这里是特殊定义的<strong>蓝色粗体字</strong>.</h2>

 

在上面的代码中strong标签和h2标签被定义为红色字体,所以代码中前两行内容都被定义为红色字体。
而第三行strong标签中的字体被定义为蓝色字体,因为在样式表中有h2 strong这样的定义,它的含义是将位于h2标签内的strong定义为蓝色字体,这就是派生选择器的作用。


CSS注释

为了将CSS代码书写的更清晰,方便理解,易于以后修改,可以在CSS代码中添加注释。
注释以“/*”为开头,以“*/”为结尾。

 

h1 {
color:red;/*定义为红色字体*/
font-size:14px;/*定义字体大小为14像素*/
}


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3