第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; /* 标题处关键字的下划线 */ } 显示效果如图1-40所示。 图1-40 百度有哪些信誉好的足球投注网站界面效果 习题 填空题 1．CSS中文译为______________，它用于控制网页式并允许将样式信息与网页内容分离的一种_________语言。 2．CSS代码可以放在HTML文件的_________标签内，也可以放在网页标签的_________属性中。 3．每一个CSS样式都必须由________和________两部分组成。 4．一个完整的HTML页面是有很多不同的________组成，而标签选择器，则是决定哪些标签。 5． CSS使用________属性来定义文本的水平对齐方式，CSS使用________属性来定义文本垂直对齐问题。 选择题 1． CSS是（ ）年由W3C审核通过，并且推荐使用的。 A．1996 B． 1997 C．1998 D． 1999 2．在每个声明之后要用（ ）表示一个声明的结束。 A．逗号 B． 分号 C．句号 D． 顿号 3．CSS使用（ ）属性定义行高。 A．face B． height C．align-height D． line-height 4．CSS使用font-style属性来定义字体倾斜效果 A．height B． align-height C．line-height D．font-style 5． CSS使用属性来定义字体下划线、删除线和顶划线效果 A．text-decoration B． align-height C．font-style D．line-height 问答题 1． 简述CSS的基本概念？ 2． 简述CSS有哪些基本语法？ 3． 简述什么是继承？ 4． 简述设置字体有哪些属性？ [title *= this] {margin: 10px} //选择属性title 的值包含 this 的所有元素 [attr~=val] [title ~= this] {margin-top: 10px} //选择属性 title 的值包含一个以空格分隔的词为 this 的所有元素，即 title 的值里必须要有 this 这个单词并且this要与其他单词之间有空格分隔 [attr|=val] [title |= this] {margin-bottom: 10px} //选择属性 title 的值等于this，或值以 this- 开头的所有元素 在CSS语言中中的继续并没有像C++和Java等语言中的那么复杂，简单地说就是将各个HTML标记看作一个个容器，其中被包含的小容器会继承所包含它的大容器的风格样式。 1）父子关系 所有的CSS语句都是基于各个标讯之间的父子关系的，为了更好地理解父子关系，首先从HTML文件的组织结构入手。 4. 继承 2）CSS继续的运用 通过上面讲解，已经对各个标记之间的父子关系有所了解。下面进一步了解CSS继承的运用。CSS继承指的是子标民会继