基于web标准的网页设计与制作知识整理---CSS

1.CSS为层叠样式表，是用于控制网页格式并允许将样式信息与网页内容分离的一种标记性语言。

2.如CSS的一条样式规则，h1{color:red;font-size:25px;}，一条CSS样式规则由选择器(selector)和声明(declerations)组成，选择器是为了选中网页中某些元素，选择器可以是一个标记名，表示将网页中该标记的所有元素都选中，如前例就是一个标记选择器；选择器也可以是一个自定义的类名，表示将自定义的一类元素全部选中，为了对这一类元素进行标识，必须在这一类的每个元素的标记里添加一个HTML属性(class="类名")；选择器还可以是一个自定义的id名，表示选中网页中某一个唯一的元素，同样，该元素也必须在标记中添加一个HTML属性(id="id名")，让CSS来识别。

3.声明则用于定义元素的样式，如上例，介于花括号之间的所有内容都是声明，声明又可以分为属性和值，属性是CSS样式控制的核心，它提供了丰富的属性样式，如颜色、大小、盒子、定位等。值指属性的值，形式有两种，一种是指定范围的值(如float属性，只可以应用left，right，none三种值)；另一种为数值，需要带单位。

4.属性和值必须用冒号隔开，属性和值可以设置多个，从而实现对同一标记声明多条样式风格。如果要设置多个属性和值，则每条声明之间要用逗号隔开；如果属性的某个值不是一个单词，则值要用引号括起来，如：p{font-family:"sans serif";}；如果一个属性有多个值，则每个值之间要用逗号隔开，如：a{padding:6px 4px 3px}；如果要为每个属性设置多个候选值，则每个值之间用逗号隔开，如：p{font-family:"Times New Roman", Times, serif}。

5.在HTML中，引入CSS的方法有行内式、内嵌式、导入式和链接式4种。(1)行内式：所有HTML标记都有一个通用的属性style，行内式就是在该属性内为元素添加CSS规则，例如：<td style="color:#ff0000; text-decoration:underline" width="88%">；(2)嵌入式：嵌入式将页面中各种元素的CSS样式设置集中写在<style>和</style>之间，<style>标记是专用于引入嵌入式CSS的一个HTML标记，它只能放置在文档头部，如：<style type="text/css">h1{color:red;font-size:25px;}</style>。

6.链接式和导入式的目的都是将一个独立的CSS文件引入到HTML文件，二者的区别不大。链接式和导入式最大的区别在于链接式使用HTML的标记引入外部CSS文件，而导入式则是用CSS的规则引入外部CSS文件，因此它们的语法不同。如：<link href="style1.css" rel="stylesheet" type="text/css" />，而使用导入式，则需要使用如下语句：<style type="text/css">@import url("CSS/style2.css");</style>。

7.链接式和导入式的显示效果不同，使用链接式时，会在装载页面主体部分之前装载CSS文件，这样显示出来的网页从一开始就是带有样式效果的；而使用导入式时，要在整个网页装载完之后再装载CSS文件，如果页面文件比较大，则开始装载时会显示无样式的页面，这是它的一个缺陷。

8.CSS基本的选择器包括标记选择器、类选择器、ID选择器和伪类选择器4种。(1)标记选择器，每一种HTML标记的名称都可以作为相应的标记选择器的名称；(2)类选择器，类选择器以半角"."开头，且类名称的第一个字母不能为数字；也可将两种样式同时加入；(3)ID选择器，一个ID选择器只能应用于HTML文档中的一个元素，以半角“#”开头，且id名称的第一个字母不能为数字；CSS大体上是不区分大小写的语言，但是对于标记实体的类名和id名是否区分大小写取决于标记语言是否区分大小写，如果使用XHTML，那么类名和id名是区分大小写的，如果是HTML，则不区分大小写；(4)伪类选择器，伪类(pseudo-class)是用来表示动态事件、状态改变或者是在文档中以其他方法不能轻易实现的情况，例如用户鼠标的悬停或单击某元素，常用的伪类有四个，分别是link(链接)、visited(已访问的链接)、hover(鼠标悬停状态)和active(激活状态)。

9.CSS具有两个特性，层叠性和继承性。层叠性是指多个选择器的作用范围发生了叠加，如果多个选择器定义的规则未发生冲突，则元素将应用所有选择器定义的样式；如果多个选择器定义的规则发生了冲突，则CSS按选择器的优先级让元素应用优先级高的选择器定义的样式，CSS规定选择器的优先级从高到低为：行内样式>ID样式>类别样式>标记样式。总的原则是：越特殊的样式，优先级越高。

10.可以通过!important关键字，提升某个选择器的重要性，例如在不同选择器中定义的规则发生冲突，可以通过!important强制改变选择器的优先级，则优先级规则为“!important>行内样式>ID样式>类别样式>标记样式”。对于上例，如果给.green选择器中的规则后添加一条!important，则第三行和第五行文本都会变成绿色，在任何浏览器中都是这种效果。如：.green{color:green!important;}。

11.在同一选择器中定义的多条样式发生了冲突，则IE6会忽略样式后的!important关键字，总是以最后定义的样式为准；但如果是不同选择器中定义的样式发生冲突，那么所有浏览器都以!important样式的优先级为最高。

12.CSS的继承性是指如果子元素定义的样式没有和父元素定义的样式发生冲突，那么子元素将继承父元素的样式风格，并可以在父元素样式的基础上再加以修改，自己定义新的样式，而子元素的样式风格不会影响父元素。

13.网页中大部分文字的字体大小都是12px，可以对body或td标记定义样式为12px，有些特殊的地方如果字体大小要求是14px，可以再利用类选择器或ID选择器单独定义。

14.并不是所有的CSS属性都具有继承性，一般是CSS的文本属性具有继承性，而其他属性(如背景属性、布局属性等)则不具有继承性。具有继承性的属性大致有：color，font-类，text-align，text-decoration，line-height，letter-spacing，border-collapse等。无继承性的属性有：text-decoration：none，所有背景属性，所有盒子属性，布局属性等。

15.交集选择器，有两个选择器直接构成，结果是选中两者各自作用范围的交集，其中第一个必须是标记选择器，第二个必须是类选择器或ID选择器。如：h1.class{color:green;
font-size:20px;}。

16.并集选择器，对多个选择器进行集体声明，多个选择器之间用“，”隔开，其中每个选择器可以是任何类型的选择器。如：h1,h2,h3,p{
font-size:12px;
color:purple;
}
h2.special,.special,#one{
text-decoration:underline;
}

17.后代选择器，把外层的标记写在前面，内层的标记写在后面，之间用空格隔开；后代选择器定义的具有继承关系的样式同样也能被其子元素继承。如：a{
font-size:16px;
color:red;
}
a b{
color:mediumpurple;
}
</style>

18.包含选择器的使用非常广泛，实际上不仅标记选择器可以使用这种方式组合，类选择器和ID选择器也都可以进行嵌套，而且包含选择器还能够进行多层嵌套；

19.子选择器，用于选中元素的直接后代，它的定义符号是大于号；如：body>p{color:green;}

20.相邻选择器，它的定义符号是+，相邻选择器将选中紧随在它后面的一个兄弟元素，如果希望紧跟在后面的任何元素都变成红色，可使用通用选择符，如：h2+p{
color:red;}，或h2+*{color:red;}。

21.CSS中控制文本样式的属性主要有font-属性类和text-属性类，再加上修改文本颜色的color属性和行高line-height属性。其中text-indent表示首行缩进，在每段开头空两格通常是用text-indent：2em;来实现，text-decoration：none;表示去掉下划线，line-height：150%;表示调整为1.5倍行间距。letter-spacing用于设置字符间的水平间距。

22.css动态超链接。在默认的浏览器浏览方式下，超链接为统一的蓝色并且有下划线，被单击过的超链接则为紫色并且也有下划线。在HTML语言中，只能用<a>标记来表示链接元素，没有设置超链接不同状态的功能，动态超链接是通过css伪类选择器实现的，a标记有四种伪类，用来描述链接的4种状态。

(1)a:link：超链接的普通样式风格，即正常浏览状态时的样式；(2)a:visited：被单击过的超链接的样式风格；(3)a:hover：鼠标指针悬停在超链接上时的样式风格；(3)a:active：当前激活(在鼠标单击与释放之间发生)的样式风格。

23.css代码中四个选择器出现的顺序应为：a:link->a:visited->a:hover->a:active，若违反这种顺序鼠标停留和激活样式就不起作用了。各种a的伪类选择器将继承a标记选择器定义的样式。a:link选择器只能选中具有href属性的a标记，而a选择器能选中所有a标记，包括用a标记记为锚点。