5.3 CSS进阶（课件）-高二《网页设计与制作》同步教学（北京出版社）

5.3 CSS进阶 任务导入 学习目标 任务实施 思考与练习 任务导入 我们在设计网页时，经常需要在页面里频繁地修改字体的颜色、大小等，在第2章中我们介绍了使用样式表CSS来简化操作的方法。那么，有没有一种方法，可以使网站内的网页页面风格一致呢？这时，我们可以使用外部样式表来实现。 本任务将在前面学习的基础上，学习设置CSS的更高级的操作。 学习目标 （1）掌握设置CSS属性的方法。 （2）会设置超链接的CSS属性。 （3）会使用外部样式表使网站中页面风格一致。 任务实施 1. CSS的作用 CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 任务实施 2. 外部样式表的优点 CSS是通过对页面结构的风格控制的思想，控制整个页面的风格的。CSS按其位置可以分成3种：内嵌样式（Inline Style）、内部样式表（Internal Style Sheet）、外部样式表（External Style Sheet）。 使用外部样式表，相对于内嵌样式和内部样式表而言，有以下优点： （1）样式代码可以重复使用。一个外部CSS文件，可以被很多网页共用。 （2）便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。 （3）提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件基本上已经在缓存区（其他网页早已经引用过它），网页显示的速度就比较快。 任务实施 3. 设置CSS属性 属性是CSS的重要组成部分。在CSS中，样式的具体格式实际是由其属性设定的。只有熟练掌握CSS的各种属性设置方法，才能在设计网页时更加得心应手。 在“CSS规则定义”对话框中，选择“类型”，然后设置样式属性。 1）设置文本类型属性 “CSS规则定义”对话框中的“类型”选项 任务实施 2）设置背景属性 “CSS规则定义”对话框中的“背景”选项 任务实施 3）设置段落区块属性 段落属性用于设置文本的排版方式，包括单词之间的间距、字符之间的间距、文字的修饰样式、文本的排列方式和文本的转换方式等。在“CSS规则定义”对话框中，在“分类”下选择“区块”，然后设置样式属性。 4）设置方框边距与填充属性 “方框”类别可以控制元素在页面上的放置方式。可以在应用填充和边距设置时，将设置应用于元素的各个边，也可以使用“全部相同”设置将相同的设置应用于元素的所有边。在“CSS规则定义”对话框中，选择“方框”，然后设置其样式属性。 5）设置边框属性 边框属性用于设置有关元素的边框格式，包括边框的宽度、颜色与样式等，在“CSS规则定义”对话框中，选择“边框”，可以设置其样式属性 任务实施 6）设置列表属性 “列表”类别为列表标签定义列表设置（如项目符号大小和类型）。在“CSS规则定义”对话框中，选择“列表”，可以设置其样式属性。 7）设置定位属性 定位属性用于对有关元素进行定位并控制其显示，包括定位方式、空间大小、显示控制等。在“CSS规则定义”对话框中，选择“定位”，可以设置所需的样式属性。 8）设置扩展属性 “扩展”样式属性包括滤镜、分页和指针选项。在“CSS规则定义”对话框中，选择“扩展”，可以设置样式属性。 任务实施 4. 设置超链接的CSS属性 我们可以创建一个CSS规则来自动完成HTML标签的超链接格式设置。 单击“窗口”菜单→“CSS样式”命令，在“CSS样式”面板中，单击面板右下侧中的“新建CSS规则”按钮，将弹出“新建CSS规则”对话框，如图所示。 “新建CSS规则”对话框 任务实施 链接的初始状态 鼠标放上去时的状况 鼠标点击时的状态 访问过后的状态 任务实施 5. 使用外部样式表 如果希望网站内的网页，页面风格一致，可以使用外部样式表。我们可以创建新的CSS外部样式表，然后附加或链接到外部样式表以应用所包含的样式。而编辑外部CSS样式表时，链接到该CSS样式表的所有文档全部更新以反映所做的更改。 任务实施 （1）创建外部样式表 打开网站中的一个网页文档，在“CSS样式”面板中，单击面板右下侧中的“新建CSS规则”按钮，将弹出“新建CSS规则”对话框，如图所示。 “新建CSS规则”对话框 任务实施 （2）应用外部样式表 在“CSS样式”面板中，单击“附加样式表”按钮，将弹出“链接