CSS

CSS的定义是由三个部分构成: 选择符(selector)，属性(properties)和属性的取值(value)。

语法: selector {property: value;} (选择符 {属性:值;})

A 选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开: 例子:body {color: black}，此例的效果是使页面中的文字为黑色。

B 如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合: 例子:p {font-family: "sans serif"} (定义段落字体为sans serif)

C 如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开: 例子:p {text-align: center; color: red} (段落居中排列;并且段落中的文字为红色)

选择符{

属性：属性值;}

.main{

width:400px;}

指这组样式编码所要针对的对象，可以是一个XHTML标签，如body,h1等，也可以是定义了特定id或class的标签，浏览器将对选择符进行严格的解析，每一组样式均会被浏览器应用到对应的对象上；

一种是指定范围的值，如float属性的left,right,none三种值；另一种为数值，如width的0-9999px;

selector选择符-		选择符名称s
1 id选择符-		#s {…}
2 类-（class)		.s {…}		名称与HTML标签无关，只需在所定义的HTML标签中的属性的形式写成：class="…",类选择符要在其名字前加一个句点，如：<P class="center" >
3 类型-			p {…}	网页中已有的标签类型作为名称的选择符，如body,div,span;
4 伪类-	s:伪类名称）		a:hover {…}	属css的一种扩展型类和对象，名称不能被用户自定义；其前面的限制的前置选择符的限定除了a以外，也可以是其他标签的限定，如ul:hover;
5 伪对象-	:first-letter;first\:first\line\:before\:after			P:first-letter{};
6 后代-desentant	选择符1 选择符2	s1 s2 s3 {…}	div a {…}	将覆盖类和类型选择符的样式；（子孙选择符）或称包含选择符，可以多级嵌套；
7 子-			div > strong {…}	(只是“子”，不是“子孙”；
选择父元素的第一个子元素	div#gaud1 p:first-child {color:red}
8 相邻-	selector1+selector2		li + li{};	这条规则选择的紧贴只li之后的li对象；只对相邻于1的2起作用；
9 属性-	如a[href];a[href="wwuhn"];a[href~="wwu"];			匹配有相关属性的元素；参考正则表达式，对一类的或模糊匹配一类的标签的属性值或名称去应用CSS；
10 -分组	选择符1,选择符2	#s {…}	div,p,h1 {…}	选择符可以是一组，用逗号隔开；　　你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义: 　　h1, h2, h3, h4, h5, h6 { color: green } (这个组里包括所有的标题元素，每个标题元素的文字都为绿色)
				对一组对象进行相同的样式指派：h1,h2,p,span{font-size:12px;font-family:arial;}
11 标签指定式-	限定		h1#content {}	针对所有ID为content的h1标签；
			h1.pl {}	针对所有class为p1的h1标签；
12 组合选择符			h1 pl {}	表示h1下的所有class为p1的标签；
			#content h1 {}	表示id为content的标签下的所有h1标签；
			h1#content h2 {}	id为content的h1的标签下的h2标签；
13 通配-			* {}	表示所有对象，包含所有不同id不同class的XHTML的所有标签；

1 按照名称选择元素 h2{color:red;}

2 按照ID或类选择元素

3 按照上下文选择元素

1.1 按照祖先元素选择要格式化的元素 ancestor descendant{}

1.2 按照父元素选择要格式化的元素 parent > child{}

1.3 按照父元素的第一个子元素来格式化 parent child:first-child{}

1.4 按照相邻同胞元素选择要格式化的元素 sibling + sibling{}

4 选择元素的一部分

4.1 选择元素的第一行： p:first-line {color:red;}

4.2 选择元素的第一个字母： p:first-letter {color:re;}

5 按照状态选择链接元素，a:link\visited\hover\active

6 按照属性选择元素 element[attribute[=[~=.|=]"value"]] {};div[class]{color:red;}

7 组合使用选择器 div.works p em:first-letter {color:red;}

只选择在class等于works的div元素中的p元素中，em元素的第一个字母；

ID选择符

在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。

ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代,ID只能在一个页面中出现一次,而class可以多次运用.

这个段落向右对齐

定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id="intro"的元素:

#intro

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

} (字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明)

下面这个例子，ID属性只匹配id="intro"的段落元素:

p#intro

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

注意:ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。

类选择符

一个标签可以应用两个类：<div class="cla1 cla2">

用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类:

p.right {text-align: right}

p.center {text-align: center}

然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数:

<p class="right">这个段落向右对齐的</p>

<p class="center">这个段落是居中排列的</p>

包含选择符（后代-）

可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如:

table a

{

font-size: 12px

}

在表格内的链接改变了样式，文字大小为12像素，而表格外的链接的文字仍为默认大小。

CSS的定义是由三部分构成的：选择符(selector>、属性(properties)和属性的取值(value)；

selector{property:value} 选择符可以是多种形式，可以是用户要定义样式的HTML标记。

如果属性值是由多个单词构成，必须在值上加引号，如：

p {font-family:"sans serif"}

如果需要对选择符指定多个属性时，可以使用分号将所有的属性和值分开，如：

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

为了使定义的样式表方便阅读，可以采用分行的书写形式：

text-align:center;

clor:black;

font-family:arial

}

几个标志用到同一个属性时，可以用逗号分隔标识符，如：

b,I,h1{color:red}

例如要设置HTML页面中所有H1标题字显示为蓝色，其代码如下：

<html>

<head>

<title>this is a css samples</title>

<!-- //是为了防止有些老式的浏览器不能识别样式规则，让其把该段代码不计。

h1 {color:blue>\}

-->

</style>

</head>

<body>

页面内容

</body>

</html>