Kimi Yang
摘要：本篇讲解CSS的基本结构，这个也是大家很熟悉的，不过有些规则还是要特别注意的。
定义样式的方法与规则：
选择符（Selectors）
任何HTML标签都可以作为CSS的一个选择符，选择符仅仅把样式应用到指定的HTML标签上。例如：
p { color: #ff0000; }
其中的选择符就是p。
页面代码如：
<p>测试文字01，它处于P标签中</p>
显示效果如：
说明该页面的所有<p>标签都应用上了相应的样式。
类选择符（Class Selectors）
一个单一选择符可以有不同的类（Class），因而可以使得同一个HTML标签元素有不同的样式。定义了类选择符，就必须使用HTML标签中的class属性来指定。例如：
p.warning { color: #ff0000; font-weight: bold; }
p.normal { color: #000000; font-size: 10pt; }
页面代码如：
<p class="warning">使用了warning类的p标签</p>
<p class="normal">使用了normal类的p标签</p>
显示效果如：
类也可以声明无相关的任何标签元素（这也是我们常用的方法）：
.note { font-size: small }
在这个例子，名为note的类可以被用于任何标签元素。
ID 选择符
ID选择符用于定义单个对象的样式。这种选择符应该尽量少用，因为他具有一定的局限。定义一个ID选择符，需要在名称前面加一个"#"号。例如：
#title { font-weight: bold; font-size: 15pt; }
这个样式关联到HTML标签元素的id属性，页面代码如下：
<div id="title">这是一个标题</div>
那么，title样式就会自动应用到id等于title的元素上。
关联选择符（Contextual Selectors）
关联选择符是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一选择符大。例如：
p em { background-color: yellow; }
关联选择符也可以用类选择符来定义，如：
p .test{ background-color: silver; }
（注意，在p与.test之间有个空格，否则它就成了类选择符了。）
假设样式表还单独定义了em的样式：
em { background-color: red; }
那么我们来看这个例子，页面代码为：
<div>
<em>测试文字1，它单独的em标签中</em>
<p><em>测试文字2，它处于p标签中的em标签中</em></p>
<p><span class="test">测试文字3，它处于p标签，并使用了test关联选择符</span></p>
<span class="test">测试文字4，没有处于p标签，使用test关联选择符</span>
</div>
效果如下：
结果发现，测试文字2显示的是"p em"这个关联选择符，说明关联选择符比单一选择符的优先权要大。测试文字3显示的是"p .test"(p和.test之间有空格) 这个关联选择符。测试文字4没用应用样式，说明test必须应用在p标签中，因为它是关联选择符，必须要上下文关联。
组合（Grouping）
为了减少样式表的重复声明，组合的选择符声明是允许的。例如，文档中所有的标题可以通过组合给出相同的声明：
h1, h2, h3, h4, h5, h6 { color: red; font-family: sans-serif; }
注释（Comments）
样式表里面的注释使用的是C语言的规范，如下：
/* 测试样式表 */
伪类和伪元素（Pseudo-classes and Pseudo-elements）
伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。它们允许将样式应用于文档中不存在的结构上，或者是通过当前元素状态甚至是文档自身的状态而推断的某些东西上。
我们最常用到的伪类是：:link , :visited , :active , :hover
link指超链接是一个未访问过的地址（有些浏览器可能将:link翻译成指向任何超链接），visited指已经访问过的网页，active指任何已经处于活跃状态（例如被点击），hover指鼠标移动到上面。用法如下：
a:link {color:blue;}
a:visited {color:red;}
a:hover {color:yellow;}
伪元素的用法与伪类的相同，如常用的两个伪元素：:first-letter , :first-line
first-letter指对象内的第一个字符，first-line指对象内的第一行。例如：
.content:first-letter { color: red; font-weight: bold; font-size: 20pt;}
div:first-line { color:blue; }
页面代码如下：
<p class="content">This is Test!</p>
<div>
测试内容，第一行！<br />
测试内容，第二行！<br />
</div>
显示效果如下：
就记到这里了，在下篇中，我将介绍有关样式的继承问题，以及样式的层叠顺序如何计算。
如果有什么问题或意见，请回复，谢谢！
Subscribe