第7章网页表现语言–CSS单飞的鞋子.pptVIP

机械工业出版社同名教材 配套电子教案 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 样式的应用