Css教程_CSS样式书写之选择器详解

文章类别：div+css | 发表日期:2011-4-26 9:24:55

为了更多的朋友能够更深入的学习了解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像素*/
}

上一篇：{教程}Css教程_详解CSS中的class与id及其区别 人气:2200
下一篇：{教程}DIV+CSS教程_简单十步将CSS压缩至一行 人气:2104

div+css视频教程