5.4 综合实例
当今流行的网页设计理念是把页面外观交给CSS控制，让HTML标签则负责语义部分。结合所学知识创建HTML页面，并为其添加CSS样式，网页最终效果如图5-36所示。
具体操作步骤如下：
（1）按照语义明确、结构清晰的原则，创建HTML页面，代码如下（文字部分省略）：
图5-36 页面效果
（2）新建CSS文档，保存为“global.css”。
（3）在HTML文档中链接“global.css”，代码如下：
（4）在“global.css”中按照从大范围到小范围、从上到下的顺序，分区域依次添加样式。
由于每个元素都有各自系统默认的内、外边距值，且在不同浏览器中显示效果不同，因此在设置网页样式之初使用通配符“*”将所有元素的默认内、外边距去掉是非常必要的。代码如下：
设置id为maincontent的article元素属性。宽度为700 px；页面水平居中；左、右有1 px粗颜色为＃ccc实线型的边框；内边距上方25 px，左、右20 px，下方为0；背景颜色为＃F9FBF9。代码如下：
设置class为review的section元素（文章导读）中的h3元素字体大小为14.7 px，代码如下：
设置一级标题字体为“黑体”，字号为30 px，上方间距为25 px，下方间距为15 px，水平居中，代码如下：
设置二级标题和段落字号为14.7 px，首行缩进2字符（em为文字大小），上、下方间距为1.2倍文字大小，代码如下：
设置二级标题显示为斜体，代码如下：
设置段落的行高为1.5倍文字大小，代码如下：
设置一级标题的相邻元素，即第一段的样式。由于第一段也属于段落，所以会继承前面有关p元素的所有样式（字号，首行缩进，段前、段后间距，行高）；如果第一段有和前面定义冲突的样式，就需要重新定义，如字号为12 px，没有首行缩进；还有普通段落不具有的属性也在此定义，如文字颜色为＃666，有1 px粗颜色为＃ccc的实线型边框，背景颜色为白色＃FFF，上、下、左、右4个方向的内边距为7 px。代码如下：
设置一级标题下方第一段的首个文字字号为38 px，加粗显示，左侧浮动，两边不设浮动限制，代码如下：
设置所有href属性值是以“＃”开头的a元素的link（未访问）与visited（访问后）状态，字号为12 px，颜色为＃3366FF，行高为1.5倍文字大小，没有下划线，代码如下：
设置所有href属性值是以“＃”开头的a元素的hover（鼠标悬停）状态，颜色为＃F60，代码如下：
