1.6.2 CSS
HTML代码保存在后缀名为.html的文件中，而CSS样式保存在后缀名为.css的文件中，然后在HTML代码中调用CSS样式文件。由于HTML代码中存在多个不同的元素，并且每个元素的网页布局各不相同，因此需要使用CSS选择器定位每个HTML元素，然后编写相应的CSS样式。
CSS选择器划分了多种类型，同一个HTML元素可以使用不同的CSS选择器进行定位，在实际开发中常用的CSS选择器有类别选择器、标签选择器、ID选择器、通用选择器和群组选择器，我们将简单讲述如何使用这些CSS选择器实现HTML元素的网页布局。
为了更好地理解CSS样式的编写规则，我们将重新定义HTML代码，首先在D盘中创建文件夹qd，然后在qd文件夹中分别创建index.html和index.css文件，如图1-3所示。
图1-3 目录结构
打开index.html文件，在该文件中定义网页元素，详细代码如下：
上述代码使用link标签引入了同一路径的index.css文件，link标签是在HTML代码中引入CSS文件，使CSS文件的样式代码能在HTML代码中生效。然后设置了5个不同类型的HTML标签，分别为<h3>、<div>、<p>、<input>和<button>，其中<div>设置了class属性，<input>和<button>设置了id属性。在设置样式之前，我们使用浏览器查看没有样式效果的index.html文件，如图1-4所示。
图1-4 网页效果
下一步将使用类别选择器、标签选择器、ID选择器、通用选择器和群组选择器分别对这些HTML标签的样式进行设置。打开qd文件夹的index.css文件，然后在此文件中分别编写<h3>、<div>、<p>、<input>和<button>的样式代码，代码如下：
上述代码中，我们依次使用通用选择器、标签选择器、类别选择器、ID选择器和群组选择器设置了index.html的网页布局，从代码中可以归纳总结CSS选择器的语法格式，如下所示：
XXX {
attribute:value;
attribute:value;
}
CSS选择器的语法说明如下：
（1）XXX代表CSS选择器的类型。
（2）在CSS选择器后面使用空格并添加大括号{}，在大括号{}里面编写具体的样式设置。
（3）样式设置以attribute:value表示，attribute代表样式名称，value代表该样式设置的数值。多个样式之间使用分号“;”隔开。
（4）如果要对样式添加注释，那么可以使用“/**/”添加说明。
我们回看index.css文件，该文件的样式代码说明如下。
（1）通用选择器：它以符号“*”表示，这是设置整个网页所有元素的样式，用于网页的整体布局。上述代码是将整个网页的字体大小设为30px。
（2）标签选择器：它以标签名表示，如果网页中有多个相同的标签，那么标签选择器的样式设置都会作用在这些标签上。上述代码是将所有h3标签的字体颜色设为蓝色。
（3）类别选择器：它以.xxx表示，其中xxx代表标签属性class的属性值，这是开发中常用的样式设置。使用类别选择器，在HTML的标签中设置class属性，在class属性的属性值前面加上实心点“.”，即可作为类别选择器。上述代码是将class="content"的标签放置在网页居中位置。
（4）ID选择器：它以#xxx表示，其中xxx代表标签属性id的属性值，这也是开发中常用的样式设置。使用ID选择器，在HTML的标签中设置id属性，在id属性的属性值前面加上“#”，即可作为ID选择器。上述代码是将id="message"的标签宽度设置为500px。
（5）群组选择器：它是将多个CSS选择器组合成一个群组，并由这个群组对这些标签进行统一的样式设置，每个CSS选择器之间使用逗号隔开。上述代码是分别将id="submit"的标签和p标签的字体颜色设为红色。
最后保存index.css文件的样式代码，在浏览器再次查看index.html文件的网页效果，如图1-5所示。
图1-5 网页效果
CSS样式也可以直接在HTML文件中编写，但在企业开发中，一般采用HTML和CSS代码分离，这样便于维护和管理，而且利于开发者阅读。