002_CSS基础语法

1. CSS语法

1.1. CSS规则集(rule-set)由选择器和声明块组成。

1.2. 选择器通常是您需要改变样式的html元素。

1.3. 声明块包含一条或多条声明, 多条声明使用分号分割。

selector {
    declaration1; 
    declaration2; 
    ... 
    declarationN;
}

1.4. 声明块使用花括号括起来。

1.5. 每条声明由一个属性和一个或一列值组成。

1.6. 属性(property)是您希望设置的样式属性(style attribute)。属性和值被冒号分开。

selector {
    property: value;
}

2. 记得写引号

2.1. 如果值为若干单词, 则要给值加引号:

p {
    font-family: "sans serif";
}

3. 多条声明

3.1. 如果要定义不止一个声明, 则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的, 因为分号在英语中是一个分隔符号，不是结束符号。然而, 大多数有经验的设计师会在每条声明的末尾都加上分号, 这么做的好处是, 当你从现有的规则中增减声明时, 会尽可能地减少出错的可能性。就像这样:

p {
    text-align:center; 
    color:red;
}

4. 换行和空格的使用

4.1. 大多数样式表包含不止一条规则, 而大多数规则包含不止一个声明。多条声明中换行和空格的使用使得样式表更容易被编辑:

body {
	color: #000000;
	background: #FFFFFF;
	margin: 10px;
	padding: 0;
	font-family: Georgia, Palatino, serif;
}

4.2. 不要在属性值与单位之间留有空格。假如你使用"margin: 10 px;"而不是"margin: 10px;", 它仅在IE6中有效, 但是在Mozilla/Firefox或Netscape中却无法正常工作。

4.3. 是否包含换行和空格并不会影响CSS在浏览器中的工作效果。

5. 大小写

5.1. 与xhtml不同, CSS对大小写不敏感。不过存在一个例外: 如果涉及到与html文档一起工作的话, class和id名称对大小写是敏感的。

6. 继承

6.1. 根据CSS规则子元素从父元素继承属性。

body {
    font-family: Verdana, sans-serif;
}

6.2. 根据上面这条规则, 站点的body元素将使用Verdana字体。通过CSS继承, 子元素(这些子元素诸如: p, td, ul, ol, ul, li, dl, dt和dd等)将继承最高级元素(在本例中是: body)所拥有的属性。不需要另外的规则, 所有body 的子元素都应该显示Verdana字体, 子元素的子元素也一样。并且在大部分的现代浏览器中, 也确实是这样的。