XHTML+CSS基础知识（四）：用CSS控制页面

1.CSS写入页面的方法有哪些？

行内式：直接在标签当中利用style属性来写样式表。

内嵌式：将所有的样式表提取出来放到网页头部的style标签当中。

链接式：将样式表单独写成一个.css文件，利用link标签在网页头部引用，W3C标准推荐。

导入式：利用@import来引入样式表，由于效率等等问题已经被淘汰

2.CSS样式表的优先级？

理论上：行内样式>内嵌样式>链接样式>导入样式

实际上：就近原则，内嵌、链接、导入在同一个文件的头部，谁距离相应的代码近，谁的优先级别就更高一些。相当于在后面加载的样式表会覆盖掉在前面写的，所以距离更近的会起作用。

3.CSS当中常用的选择器有哪些？

标签选择器（div、p……）

ID选择器（#）

类选择器（.）

通用选择器（*）

伪类选择器（:link、:visited、:hover、:active）

其中IE6不支持除了a标签以外，并不支持其他标签的伪类，如果不考虑兼容的话可以使用。

4.选择器的优先级别是什么？

ID>类>标签>通用

5.样式的层叠和特殊性

即使是在不太复杂的样式表当中，要寻找同一元素也可能由两个或者更多规则。CSS通过一个称作层叠的过程处理这种冲突。

层叠给每个规则分配一个重要度，层叠采用以下重要度次序。

标有!important的用户样式>标有!important的作者样式>作者样式>用户样式>浏览器/用户代理应用的样式

然后，根据选择器的特殊性决定规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后来定义的规则优先。

为了计算规则的特殊性，给每种选择器都分配一个数字值，并分为a,b,c,d四个等级，将对应等级上的数值分别放置在千位,百位,十位,个位，数值越大越特殊，也就表示其优先级越高。

如果样式是行内样式，那么a=1；b等于ID选择器的总数；c等于类、伪类和属性选择器的数量；d等于类型选择器和为元素选择器的数量。

例如:#content .datePosted{}，它的特殊性为0,1,1,0，换算为110

　　 #wraper #content{}，它的特殊性为0,2,0,0，换算为200

那么上面的例子当中，后者的特殊性就高于前者，因而其样式表当中的规定就会起作用。

6.CSS中常见的命名方法

骆驼命名法：第一个字母小写，后面的词的第一个字母大写，比如：headerBlock

帕斯卡命名法：第一个字母大写，后面的词的第一个字母大写，比如：HeaderBlock

匈牙利命名法：在名称的前面加上一个或多个小写字母作为前缀，比如：header_Block

CSS中的命名规则

CSS中需要尽可能的进行语义化命名

头：head/header

内容：content/container

尾：foot/footer

导航：nav/navigation

侧栏：sidebar

7.CSS中样式的缩写

十六进制颜色格式"#RRGGBB"，在CSS代码中可以缩写为"#RGB"

正确缩写#aabbcc=#abc，另外#abcabc!=#abc

内外边距的格式一样，现在以内边距为例，一般情况下，若要定义某盒子模型的四个内边距数值，代码如下：padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px;

这种写法如果大量使用，会使得代码变得冗余，现在才去下面写法以缩写代码，四个方向的内边距数值，以“上右下左”为顺序书写：padding:10px 20px 30px 40px;

如果四个方向的内边距数值相同，就可以缩写为一个数值：padding:10px 10px 10px 10px;=padding:10px;

如果四个方向的内边距，方向相对的内边距数值一样，那么就可以只写上面和右面的数值：padding:10px 20px 10px 20px;=padding:10px 20px;

如果左侧的内边距数值和右侧的内边距数值相同，那么只写上、右、下三个数值即可：padding:10px 20px 30px 20px;=padding 10px 20px 30px;

内外边距如果缺省某一项，会自动补充为其对应的那一边的距离，即如果写了上边距而缺失了下边距，则下边距与上边距数值相同，如果写了右边距而缺失了左边距，则左边距与右边距数值相同，通常要根据这个规则来缩写代码。

边框的缩写格式为：border:宽度 颜色 类型;冒号后面的三个属性位置可以变换，对于最终效果没有影响，但是建议大家还是按照这种书写顺序，以提高代码的可读性。

如果需要定义盒子不同宽度的边框，可以采用border-width，属性值同样也是四个并且以“上右下左”的顺序排列。

背景的缩写格式为：background:背景图片 背景颜色 平铺类型 水平定位 垂直定位;

举例：background:url(......) #ccc no-repeat 10px 5px;

定义盒子的背景图片为该地址中的图片，背景颜色为#ccc 不平铺且举例盒子左侧的距离为10px、距离上侧为5px。

另外后面的定位也可以用left，center，right，top，middle，bottom来代替。

文本的缩写格式为：font:样式 粗细 字体大小/行距 字体;

举例：font:italic bold 12px/1.5 Verdana,Geneva,sans-serif;

定义盒子内的字体为斜体、加粗、文字大小为12px、1.5倍行高，字体从左到右依次备选。

font后面的所有属性位置是不可调换的，这与边框和北京并不相同。