4.1 CSS简介
CSS的表现与HTML的结构相分离，CSS通过控制页面结构的风格，进而控制整个页面的风格。也就是说，将要在页面中显示的内容放在结构里，而将起修饰、美化作用的样式放在表现里，做到结构（内容）与表现分开。这样，当页面使用不同的表现时，呈现的样式是不一样的，就像人穿了不同的衣服，表现就是结构的外衣，W3C推荐使用CSS来完成表现。
4.1.1 什么是CSS
CSS是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，像文字的大小、颜色以及图片位置等，都是显示内容的样式。层叠是指当在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。如果不考虑样式的优先级，一般会遵循“最近优选原则”。
众所周知，用HTML编写网页并不难，但对于一个由几百个网页组成的网站来说，要统一采用相同的格式就困难了。CSS能将样式的定义与HTML文件内容分离，只要创建定义样式的CSS文件，并且让所有的HTML文件都调用这个CSS文件所定义的样式即可。如果要改变HTML文件中任意部分的显示风格，只要打开CSS文件并更改样式就可以了。
CSS的编辑方法同HTML一样，可以用任何文本编辑器或网页编辑软件，还可用专门的CSS编辑软件。
4.1.2 CSS的开发环境
CSS的开发环境需要浏览器的支持，否则即使编写出再漂亮的样式代码，如果浏览器不支持CSS，那么它也只是一段字符串而已。
1.CSS的显示环境
浏览器是CSS的显示环境。目前，浏览器的种类多种多样，虽然IE、Opera、Chrome、Firefox等主流浏览器都支持CSS，但它们之间仍存在着符合标准的差异。也就是说，相同的CSS样式代码在不同的浏览器中的显示效果可能有所不同。在这种情况下，设计人员只有不断地测试，了解各主流浏览器的特性才能让页面在各种浏览器中正确地显示。
2.CSS的编辑环境
能够编辑CSS的软件很多，例如HBuilder、Dreamweaver、Edit Plus和TopStyle等。这些软件有些还具有“可视化”功能，但本书不建议读者太依赖“可视化”。本书中所有的CSS样式均采用在HBuilder中手工输入的方法，不仅能够使设计人员对CSS代码有更深入的了解，还可以节省很多不必要的属性声明，效率反而比具有“可视化”功能的软件还要快。
4.1.3 CSS编写规则
虽然CSS的样式设计功能很强大，但是如果设计人员管理不当，将导致样式混乱、维护困难。本节学习CSS编写中的一些技巧和规则，使读者在今后设计页面时胸有成竹，编写的代码可读性高、结构良好。
1.目录结构命名规则
存放CSS样式文件的目录一般被命名为style或css。
2.样式文件的命名规则
在项目初期，会把不同类别的样式放于不同的CSS文件中，这是为了CSS编写和调试的方便；在项目后期，从网站性能考虑会把不同的CSS文件整合到一个CSS文件中，这个文件一般命名为style.css或css.css。
3.样式的命名规则
所有样式名由小写英文字母或“_”下画线组成，必须以字母开头，不能为纯数字。设计者要用有意义的单词或缩写组合来命名选择符，做到“见其名，知其意”，这样就节省了查找样式的时间。样式名必须能够表示样式的大概含义（禁止出现如Div1、Div2、Style1等命名），读者可以参考表4-1中的样式名。
表4-1 样式名参考
当定义的样式名比较复杂时用下画线把层次分开，例如以下定义导航标志的样式名的CSS代码如下。
4.CSS代码注释
为代码添加注释是一种良好的编程习惯。注释可以增强CSS文件的可读性，后期维护也将更加便利。
在CSS中添加注释非常简单，它是以“/*”开始，以“*/”结尾。注释可以是单行，也可以是多行，并且可以出现在CSS代码的任何地方，但注释内容不会被显示或引用在网页上。
（1）结构性注释
结构性注释仅仅是用风格统一的大注释块从视觉上区分被分隔的部分，如以下代码所示。
（2）提示性注释
在编写CSS代码时，可能需要某种技巧解决某个问题。在这种情况下，最好将这个解决方案简要地注释在代码后面，如以下代码所示。
