9.1认识CSS样式 课件 - 2022-2023学年高二下学期（中职）《网页设计与制作》（武汉大学版）

第9章 学习美化页面之CSS 认识CSS样式 9.1 掌握CSS滤镜效果 9.2 9.1 认识CSS样式 9.1.1 类样式 9.1.2 标签样式 9.1.3 高级样式 9.1.4 知识拓展 如果只想在网页的指定部分应用样式表，则可以建立类样式，在文档窗口的任何区域或文本中应用类样式，不区分字符与段落。 9.1 认识CSS样式 9.1.1 类样式 如果只想在网页的指定部分应用样式表，则可以建立类样式，在文档窗口的任何区域或文本中应用类样式，不区分字符与段落。 创建和应用类样式操作步骤详见教材。 9.1.2 标签样式 使用标签定义样式制作样式表，则包含相应标签的所有属性将变成设定值，它可以一次性定义所有包含相应标签的要素。 1．指定表格和图像样式 操作步骤详见教材。 2．指定位置上只显示一次的背景图像 操作步骤详见教材。 9.1.2 标签样式 9.1.3 高级样式 高级样式是一种特殊类型的样式，用于设置已设定了链接的文本的属性。默认情况下在文本中设定链接，文本变成蓝色并且有下划线，访问后变成紫色。但是利用高级样式，则可任意设定链接的文本样式。 创建和使用高级CSS样式表操作步骤详见教材。 9.1.4 知识拓展 1.样式表的概念 　　样式表也称为CSS，使用样式表可以指定不能用HTML标签表现的各种属性。当需要给大量的网页文档设定相同的样式时，不需要一个一个重复设定。通过样式的指定，可以简单而快速地完成操作。 利用样式表可以统一设定文字样式，扩大行与行之间的间距，设定只显示一次的背景图像、固定背景图像等。 9.1.4 知识拓展 2.“CSS样式”面板 　　默认情况下，“CSS样式”面板显示在工作界面的右上角。如果没有显示，可选择“窗口”→“CSS样式”命令或者按Shift+F11组合键，打开“CSS样式”面板，如下图所示。 9.1.4 知识拓展 9.1.4 知识拓展 ①“附加样式表”按钮：单击可打开“链接外部样式表”对话框，可选择要链接到或导入到当前文档中的外部样式表。 ②“新建CSS规则”按钮：单击可打开“新建CSS规则”对话框，可以选择要创建的样式类型。 9.1.4 知识拓展 ③“编辑样式表”按钮：单击可打开“CSS规则定义”对话框，可编辑当前文档或外部样式表中的任何样式。 ④“删除CSS规则”按钮：单击可删除“CSS样式”选项卡中的所选样式，并从应用该样式的所有元素中删除格式。 9.1.4 知识拓展 3.CSS样式表属性的分类项介绍 在CSS样式表中可以直接设定样式表的细节属性，如下图所示。 9.1.4 知识拓展 各属性说明如下： 类型：指定文本的相关属性。 背景：指定背景图像的重复程度和位置。 区块：指定字间距等文字的相关属性。 方框：指定表格的大小、边距等。 边框：指定边框的形状、宽度、颜色等。 列表：指定列表形状。 9.1.4 知识拓展 定位：指定位置。 扩展：指定光标形状和滤镜效果。 9.1.4 知识拓展 $