网页表现语言--CSS单飞的鞋子.ppt

网页设计与制作教程 (第 4版） 机械工业出版社同名教材 配套电子教案 一 CSS简介 二 CSS样式面板 三 创建并使用内部样式表 四 创建并使用外部 CSS样式 五 实训 第 7章 网页表现语言 CSS 7.1.1 CSS的特点和用途 CSS是一种格式化网页的标准方式，它扩展了 HTML的 功能，使网页设计者能够以更有效的方式设置网页格式。 CSS样式表是由一系列样式选择器和 CSS属性组成的，它支 持字体属性、颜色和背景属性、文本属性、边框属性、列表 属性及精确定位网页元素等属性，从而大大增强了网页的格 式化能力。 CSS的出现简化了这样的工作， CSS是通过对页面结构的 风格控制的思想，控制整个页面的风格的。当需要更改这些 页面的样式设置时，只要在样式表中进行修改，而不用对每 个页面逐个修改，从而大大简化了格式化的工作。 7.1 CSS简介 7.1.2 CSS规则 样式由一组规则定义并存放在与要设置格式的实际文本 分离的位置（通常在外部样式表或 HTML文档的文件头部分 中）。因此，可以将 h1标签的某个规则一次应用于多个标签 （如果在外部样式表中，则可以将此规则一次应用于多个不 同页面上的标签）。通过这种方式， CSS可提供非常便利的 更新功能。如果用户在一个位置更新 CSS规则，使用已定义 样式的所有元素的格式设置将自动更新为新样式。 7.1 CSS简介 7.1.3 CSS常用属性 用户可以定义 CSS规则的属性，如文本字体、背景图像 和颜色、间距和布局属性以及列表元素外观。首先创建新规 则，然后定义下列任意属性。 1定义 CSS类型属性 2定义 CSS样式背景属性 3定义 CSS样式区块属性 4定义 CSS样式方框属性 5定义 CSS样式边框属性 6定义 CSS样式列表属性 7定义 CSS样式定位属性 8定义 CSS样式扩展属性 7.1 CSS简介 1 CSS样式面板视图 在“全部”模式和“正在”模式下， CSS样式面板都允许用 户在属性窗格中改变 3种视图状态。 类别视图：将 Dreamweaver支持的 CSS属性分为八个类别： 字体、背景、区块、边框、方框、列表、定位和扩展名。每 个类别的属性都包含在一个列表中，用户可以单击类别名称 旁边的加号按钮 展开或折叠它。 列表视图：按照字母顺序显示 Dreamweaver支持的所有 CSS属性。 属性视图：为默认视图，仅显示那些已进行设置的属性。 7.2 CSS样式面板 2 CSS样式面板按钮 在“全部”模式和“正在”模式下， CSS样式面板还包含 4个 按钮。 附加：附加链接到或导入到当前文档中的外部样式表。 新建：新建 CSS规则，用户可以选择要创建的样式类型。 编辑：编辑当前文档或外部样式表中的样式。 删除：删除 CSS样式面板中选定的规则或属性，并从它所 应用的所有元素中删除格式设置。 7.2 CSS样式面板 7.3.1 创建自定义样式 创建自定义样式的方法如下： 将插入点放在文档中，然后执行以下操作之一： 执行“格式” “ CSS样式” “新建”命令。 在 CSS样式面板中，单击面板右下侧的“新建 CSS规则” 按钮 。 在文档窗口中选择文本，从属性面板的“目标规则”弹出 菜单中选择“新 CSS规则”，然后单击“编辑规则”按钮。 7.3 创建并使用内部样式表 7.3.2 创建仅应用于一个 HTML元素的样式 创建仅应用于一个 HTML元素的样式的方法如下： 打开“新建 CSS规则”对话框。 在“新建 CSS规则”对话框中，指定要创建的 CSS规则的 “选择器类型”为“ ID（仅应用于一个 HTML元素）”，然 后在“选择器名称”文本框中输入 ID名称，例如， #myhead1。 7.3 创建并使用内部样式表 7.3.3 创建重定义 HTML标签样式 创建重定义 HTML标签样式的方法如下： 打开“新建 CSS规则”对话框。 在“新建 CSS规则”对话框中，指定要创建的 CSS规则的 “选择器类型”为“标签（重新定义 HTML元素）”，然后 在“选择器名称”文本框中输入或从下拉列表中选择 HTML 元素的名称，例如， h1，如图 7-18所示。 选择定义规则的位置。 7.3 创建并使用内部样式表 7.3.4 创建链接样式 创建重定义 HTML标签样式的方法如下： 打开“新建 CSS规则”对话框。 在“新建 CSS规则”对话框中，指定要创建的 CSS规则的 “选择器类型”为“复合内容（基于选择的内容）”，然后 在“选择器名称”文本框中输入或从下拉列表中选择超链接 状态的名称，例如， a:link，如图 7-19所示。 选择定义规则的位置。 单击“确定”按钮，完成样式属性的设置。 7.3 创建并使用内部样式表 7.3.5 样式的应用 在文档窗口中，选择要应用 CSS样式的对象。 执行下列操作之一： 在 CSS样式面板中，选择“全部”模式，右键单击要应用 的样式的名称，然后从弹出菜单中选择“套用”，如图 7-20 所示。 从“类”弹出菜单中选择要应用的类样式。 在文档窗口中，右键单击所选对象，从弹出菜单中选择 “ CSS样式”，然后选择要应用的样式。 执行“格式” “ CSS样式”命令，然后在子菜单中选择 要应用的样式。 7.3 创建并使用内部样式表 7.3.6 案例一：制作曙光大学网站导航条菜单 【 案例综述 】 使用 CSS样式制作曙光大学网站导航条，该导 航条带有下拉菜单。 【 案例展示 】 本案例的效果如图 7-22所示。 7.3 创建并使用内部样式表 7.4.1 创建外部样式文件 创建外部样式文件的方法如下： 打开“新建 CSS规则”对话框。 在“新建 CSS规则”对话框中，指定要创建的 CSS规则的 选择器类型，输入或选择选择器的名称。 选择定义规则的位置为“（新建样式表文件）”，如图 7- 28所示。 单击“确定”按钮，打开“将样式表文件另存为”对话框， 输入样式表的文件名，如图 7-29所示。单击“保存”按钮， 外部样式文件创建完毕。 7.4 创建并使用外部 CSS样式 7.4.2 链接外部样式 链接外部样式就是当浏览器读取到 HTML文档的样式表 链接标记时，将向所链接的外部样式表索取样式。 1代码链接方式 2操作链接方式 7.4 创建并使用外部 CSS样式 7.4.3 案例二：创建曙光大学网站样式 【 案例综述 】 创建曙光大学网站外部样式统一网站的风格。 【 案例展示 】 将曙光大学网站首页的内部样式转换为外部样 式后，网站首页的风格与使用内部样式完全一致，效果如图 7-34所示。 7.4 创建并使用外部 CSS样式 7.5.1 制作“爱家美食”网 站奶茶评测页面 【 实训综述 】 使用内部样 式制作“爱家美食”网站 奶茶评测页面。 【 实训展示 】 实例效果如 图 7-40所示。 7.5 实训 7.5.2 实训二：创建“爱家 美食”网站样式 【 实训综述 】 读者在学习 了 CSS样式的基础上，进一 步加强样式的定义与应用 练习，积累更多的样式使 用经验。 【 实训展示 】 创建“爱家 美食”网站的外部样式， 应用样式后的页面效果如 图 7-41所示。 7.5 实训 1使用 CSS样式制作如图 7-42所示的页面。 2使用 CSS样式制作如图 7-43所示的页面。 3打开站长书库 CSS教程页面 （ http:/ tml），学习 CSS教程。 7.6 习题