5.1 CSS概述
CSS是制作网页必须用到的知识，未使用CSS的网页是非常简陋的，用户体验非常差。未使用CSS时网页的呈现情况如图5-1所示。
图5-1 未用CSS时网页的呈现情况
运用CSS进行美化后，则会为用户提供更好的观感，体验也会有大幅提升。图5-2所示是用CSS美化后的页面。
图5-2 用CSS美化后的网页
5.1.1 CSS简介
CSS于1996年由W3C组织制定，最新的版本为CSS3，主要用于美化网页。CSS是对页面内容数据和显示风格分离思想的一种体现，通过建立定义样式的CSS文件，让HTML文件调用CSS文件所定义的样式，如果需要修改HTML中的部分显示风格，只要修改对应的CSS文件即可，极大地提高了工作效率。
5.1.2 CSS语法结构
CSS由两部分组成：选择器及一条或多条声明。选择器用于选中用户需要改变样式的HTML元素，选择器的声明部分由大括号包裹，每条声明由一个属性和一个属性值组成。属性是需要对元素进行设置的样式属性，属性和属性值用冒号分开，多个属性之间用分号分隔。
基本语法如下：
代码示例如下：
代码解释如下：
1）h1：选择器，表示要选择所有的h1标签。
2）color：属性名，表示要对字体颜色属性进行设置。
3）red：属性值，表示要设置字体颜色为红色。
4）属性与属性值组成了一个声明，属性与属性值之间用冒号分隔。
使用CSS时，注意事项如下：
1）CSS是大小写不敏感的，但规范的写法是全部小写。
2）规范性要求，每一行只写一个声明。
3）规范性要求，每个声明后边需要添加分号作为结束符。
4）所有符号均为英文，切勿使用中文符号。
5）注意代码的缩进，用HBuider编写代码会有提示，避免拼写错误。
5.1.3 CSS注释
为样式表添加注释有助于标记样式的作用范围以及复杂样式的作用等，便于进行后期的维护。CSS添加注释的方式为/*……*/。注释代码示例如下：
CSS代码作为网页的独立的模块存在，要将编写好的CSS应用于HTML标签，使其产生效果，必须将其与HTML标签关联。具体关联方式有三种：行内样式表、内部样式表和外部样式表。
5.1.4 行内样式表
行内样式表，顾名思义，就是将CSS代码放置在HTML代码内部，作为HTML标签的属性存在，HTML代码与CSS代码处于同一行中。
代码示例如下：
＜a href="#"style="color：red；font-size：10px；"＞日用百货＜/a＞
＜！--产生一个红色的，字号是10px的超链接--＞
行内样式表的特点如下：
1）将CSS代码与HTML代码糅合在一起，不符合W3C关于“内容与表现分离”的基本规范，不利于后期维护。
2）可以单独定义某个元素的样式，灵活方便。
3）优先级最高，但是不推荐使用，仅在测试时可以采用。
5.1.5 内部样式表
内部样式表也称为内嵌样式表，是指CSS代码内嵌到HTML代码中，二者处于同一个文件中，通常CSS代码放置在HTML代码的＜head＞标签内部。
代码示例如下：
内部样式表的特点如下：
1）写在＜head＞标签中，一定程度地将CSS代码与HTML代码进行了分离，但是分离不够彻底，无法应用于其他HTML文件，实现样式复用。
2）优先级低于行内样式表。
5.1.6 外部样式表
外部样式表是指CSS代码完全独立出来，单独放置在扩展名为.css的文件中，在HTML文件中，将CSS文件引入进来，形成关联。
代码示例如下：
其中，＜link＞标签具有以下属性：
1）rel属性：声明被链接文档与当前文档的关系，必写。
2）type属性：被链接文档的类型，可写。
3）href属性：被链接文档的地址，必写。
外部样式表的特点如下：
1）与内部样式表一样，写在＜head＞标签中，实现了CSS代码与HTML代码的彻底分离，方便样式复用与后期维护，符合W3C规范。
2）优先级要低于内部样式表。
3）后续开发中推荐使用此种方式。
【扩展阅读】导入外部样式表的另一种方式。
导入外部样式表除了可以使用＜link＞标签链接外，还可以使用@import的方式导入。
代码示例如下：
【两种导入方式的区别】
1）＜link＞标签是标准的HTML标签，而import不是。
2）＜link＞标签可以链接各种形式的文件，import只能导入CSS。
3）＜link＞标签使用的是链接的方式，相当于在HTML与CSS文件中的桥梁；而import使用的是导入的方式，会在文档加载时将CSS文件的代码导入到HTML文档中。
4）＜link＞标签会在网页边加载的时候链接CSS文件，而import会在HTML文档完全加载完后，才导入CSS文件。
综上所述，一般使用＜link＞标签进行样式表的导入。
注意：CSS优先级是指当CSS声明发生冲突时，即将在两个不同位置，对同一HTML标签进行同样的CSS属性定义，但取值不同。优先采用的属性值通常是按就近原则来进行取值，即行级样式表＞内部样式表＞外部样式表。