第1章 利用CSS设计页面排版.ppt

在以上代码中，第1个p标记定义了所有段落的字体以及各个段落之间的距离（margin）为0像素，接着用不同的类别分别定义标题、内容和百度快照的字体大小、间距等样式风格，显示效果如图1-38所示。 图1-38 各段落调整 （3）在调整好段落内部的结构以及段落与段落之间的距离后，下面设置文字颜色，主要是关键字的颜色与网址链接的颜色，另外还要给“百度快照”单独设置颜色和下划线，代码如下所示。 p.link{ font-size:13px; color:#008000; /* 网址颜色 */ padding-bottom:25px; } span.search{ color:#c60a00; /* 关键字颜色 */ } span.quick{ color:#666666; /* 快照颜色 */ text-decoration:underline; /* 快照下划线 */ } 显示效果如图1-39所示，基本已跟百度搜索网页接近。 图1-39 文字颜色 （4）此时标题处关键字的下划线颜色还是蓝色，而不是红色，这主要是由于超链接a标记导致，因此需要为标题处的关键字单独设置下划线，采用CSS嵌套，代码如下所示。 p.title span.search{ text-decoration:underline; /* 标题处关键字的下划线 */ } 显