网页表现语言——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简介,1CSS样式面板视图 在“全部”模式和“正在”模式下，CSS样式面板都允许用户在属性窗格中改变3种视图状态。 类别视图：将Dreamweaver支持的CSS属性分为八个类别：字体、背景、区块、边框、方框、列表、定位和扩展名。每个类别的属性都包含在一个列表中，用户可以单击类别名称旁边的加号按钮 展开或折叠它。 列表视图：按照字母顺序显示Dreamweaver支持的所有CSS属性。 属性视图：为默认视图，仅显示那些已进行设置的属性。,7.2 CSS样式面板,2CSS样式面板按钮 在“全部”模式和“正在”模式下，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样式的基础上，进一步加强样式的定义与应用练习，积累更多的样式使用经验。 【实训展示】创建“爱家美食”网站的外部样式，应用样式后的