第六章 CSS高级应用与技巧

6.1 id与class

6.1.1 什么是id

　　id是XHTML元素的一个属性，用于标识对象名称。无论是class还是id，都是XHTML所支持的公共属性，并且也是其核心属性。class的主要功能是用来对对象的样式设置，而id除了可以定义样式外，还能够成为服务网站交互行为一个特殊标识。每一个被定义了id名称的对象，其id名字在每个页面有且仅能出现一次。

6.1.2 如何使用id

　　在不考虑使用JavaScript脚本，而是XHTML代码及CSS样式应用的情况下，应当有选择地使用id属性来对元素进行标识，具体使用上应当具备下面的原则。

• 样式只使用一次：如果有一段样式代码在页面中只可能被使用一次，那么可以使用id进行标识。
• 用于对页面的区域进行标识：使用id对页面中某个区域进行标识，有助于XHTML结构的可读性。

6.1.3 什么是class

　　class直译为类、种类。class是相对于id的又一个属性。id是对单独元素的标识，而class是对一类元素的标识。与id相反，同一页面中的每个class名称都允许重复使用。

6.1.4 何地使用class

• 同一页面中出现多次
• 通用及经常能使用的元素

6.1.5 同时使用多个类

　　XHTML允许在标签的class属性设置中，同时使用一个以上的类名，使用空格来分隔多个class样式名称。

6.2 div与span

　　很多人都容易混淆div元素与span元素的真正用途，那到底该如何使用它们，先来W3C对它们两个的官方定义：

• div: generic language/style container.
• span: generic language/style container.

　　在W3C对div及span的简要描述中，可以看到同样的说明——用于定义样式的容器。虽然W3C在对div及span的描述中都说明了相同的用法，而且非常准确。实际上，div与span在使用方式上还是存在很大的差别的。

　　在相同的CSS样式情况下， div之间出现了换行，而span则是同行左右关系。这就是它们之间存在的使用差别。造成差别的原因就在于其默认显示模式的不同，可以通过display属性来修改元素的显示模式。

总结：div对象的默认显示模式是display: block;块状元素。span对象的默认显示模式是display: inline;内联元素。

6.3 CSS选择符命名

6.3.1 大小写敏感

　　XHTML对大小写并不敏感。CSS对对象选择符（如body、td、div）也是不分区大小写的，但是CSS对id及class选择符的名称则是区分大小写的。

6.3.2 合法字符及组合

　　在CSS及XHTML中，class及id必须由大写或者小写字母开始，随后可以使用任意的字母、数字、连接线或者下划线。

6.3.3 命名建议

• 使用具有语义命名
• 使用大小写组合命名
• 使用下划线及连接线命名
• 根据网站需要定制命名规则

6.4 CSS文件结构设计与优化

　　尽管CSS能够实现表现与内容的分离，但也引发了另一个新问题——CSS文件日益庞大。出现这种情况，会直接导致网站两个致命的问题：

• 初次载人网站速度慢
• 维护困难

　　当然CSS的设计者已经想到了这一点，提供了导入命令，从而可以从别的地方导入样式表，这样就便于网站的后期维护。

6.4.1 导入结构

　　@import导入命令是CSS提供的一个实用命令，主要功能是根据路径导入一个样式表文件，并且能够制定样式表所服务的设备类型。这样可以将别的样式表导入当前样式表中，使样式表文件不必写在同一个文件之中。使用方法为：@import url("xxx.css");

　　除此之外，@import命令还能够为导入的样式表制定一个设备类型，指明当前的样式表用于什么用途。比如：@import url("xxx.css") print;

6.4.2 结构优化

　　对于大型网站的样式设计而言，可以通过@import命令这样的分离技术，让不同种类的样式各自写在独立的文件之中，这样也就实现了CSS代码层面的结构优化。下面讨论几种常用的结构模式及使用方法。

• 根据样式特点进行CSS结构设计
• 根据功能进行CSS结构设计
• 根据页面需要进行CSS导入组合

6.5 使用CSS缩写

　　CSS缩写是指将多个CSS属性集合到一行中的编写方式，这种方式能够缩减大量的代码，使代码便于阅读、理解。

6.5.1 font字体缩写

　　字体缩写是针对字体样式进行的缩写形式，包含字体、字号等属性，使用方法如下：

　　font: font-style | font-variant | font-weight | font-size | line-height | font-family

　　对于字体的样式缩写，只要使用font作为属性名称，后接各个属性的值即可，各个属性值之间使用空格分开。

6.5.2 margin与padding边距缩写

　　默认情况下，margin及padding的缩写需要提供4个参数，按照顺序分别为上、右、下、左。下面来举例：（这里以margin来举例，padding的设置方法与margin完全相同）

• 单独使用一个参数：p {margin: 20px; }表示p对象四周的外边距均为20px
• 使用两个参数：p { margin: 20px 10px; }表示对上下边距为20px，左右边距为10px
• 使用三个参数：p { margin: 20px 10px 100px; }表示上边距为20px，左右边距为10px，下边距为100px
• 使用四个参数：p { margin: 20px 10px 10px 20px; }表示上边距为20px，右边距为10px，下边距为10px，左边距为20px

注：margin/padding的设置完全是按照顺时针方向进行边距设置。

6.5.3 border边框缩写

　　border对象包含四条边的不同宽度、不同颜色以及不同样式。所以，不仅可以对整个对象进行border缩写，也可以对单个边进行缩写。使用方法如下：

　　border: border-width | border-style | color

6.5.4 list列表缩写

　　list缩写是针对list-style-type、list-style-position等用于ul的list属性。使用方法如下：

　　list-style: list-style-type | list-style-position | list-style-image

6.5.5 background背景缩写

　　背景缩写用于针对对象的背景以控制其相关属性进行缩写。使用方法如下：

　　background: background-color | background-image | background-repeat | background-attachment | background-position

6.5.6 color颜色缩写

　　CSS对对象的颜色缩写主要是针对十六进制颜色。当A与B、C与D、E与F数字相同时，可以使用颜色缩写。比如#FFFFFF可以缩写为#FFF，#2255BB可以缩写为@25B。

6.6 CSS代码优化

　　代码优化是软件开发的重要原则之一，这里对于CSS样式布局设计非常重要。

6.6.1 增加代码重用率

　　有时候，尽管发现同一属性在多个区域同时出现的情况，但由于每个区域其使用目的不同，因此在对CSS进行简化的时候，不能一概而论，一定要根据当前页面的结构与对未来扩展的预期进行合理的分析与配置，最终实现CSS简化的目的。

6.6.2 使用样式覆盖进行简化

　　如果CSS对某一元素应用了多个样式代码，往往是后一段代码替代前一段代码。利用这个特性，可以采用覆盖方式，使得代码得到重用。