Chapter4CSS样式表分解.ppt

4.2.8 扩展 扩展选项中的CSS属性包括分页、光标和过滤器（滤镜效果）选项。 4.2.8 扩展 1．分页 打印网页时，在样式所控制的对象之前或者之后强行分页。下拉列表中包括4个选项：自动、总是、左对齐和右对齐。 2．光标 当鼠标指针位于样式所控制的对象上时改变鼠标指针的外观 3．过滤器 对样式所控制的对象应用特殊效果（包括模糊和反转等滤镜效果）。“过滤器”下拉列表中包括一些具体的选项，这些效果应用到网页中元素上后，可以得到一种类似于Photoshop的滤镜效果。 4.3 创建CSS样式 如果设置单个页面的格式，可使用内部样式表——保存在网页文档内部。 假如需要同时控制多个文档的外观以便在多个页面上实现统一的格式时，可以使用外部样式表，即建立的样式表保存在网页文档的外部，在使用时被链接到当前页面。 4.3.1 内部样式表 4.3.2 外部样式表 样式表 内部样式的定义只应用于当前文档，即适合只在自己站点的一个页面中使用。 如果想制作很多具有统一样式的网页，就必须在每个网页内定义相同的CSS样式表。这样很麻烦，效率也很低。外部CSS样式表能够较好地解决这个问题。具体实现方法是，先建立一个外部CSS样式表文件，在这个文件中定义文字、段落、表格、超级链接等网页元素的样式。然后在需要的网页上链接这个外部CSS样式表文件即可。 样式表 外部样式表的作用 练习一 CSS定义文本样式 设计页面时，可以把内容和外观分别考虑，互不干扰。可以事先规划好页面显示风格，单独设计样式，也可以准备好页面布局和内容，再添加样式。 利用CSS样式表可以对文本格式进行精确的美化，可以将所有有关文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供HTML调用。 实际操作 利用CSS可以固定字体大小，使网页中的文本始终不随浏览器改变而发生变化。 步骤1 打开“CSS样式”面板，单击“新建CSS规则” 练习一 CSS定义文本样式 步骤2 弹出“新建CSS规则” 选项 名称（.b） 位置 确定 练习一 CSS定义文本样式 步骤3 弹出“.b的CSS规则定义”对话框，在对话框中进行相应的设置 练习一 CSS定义文本样式 * 网页设计与制作实用教程 （Dreamweaver+Flash+Photoshop） 2013 . 3 第4章 CSS样式表 CSS入门 CSS详解 创建和应用CSS CSS：Cascading Style Sheets CSS可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容独立出来，并集中管理。当要改变网页外观时，只需更改样式设定的部分，HTML文件本身并不需要更改。 本章主要内容： 4.1 CSS入门概述 4.1.1 “CSS样式”面板 4.1.2 定义CSS样式 4.1.3 在网页中应用CSS样式 CSS是一种格式化网页的标准方式，它对颜色、字体、间隔、定位以及边距等格式方面提供了多种属性，这些属性均可用于HTML标记符。 CSS技术可以方便地为所有网页设置一种风格。使用外部样式表，还能为所有需要使用该样式的网页所链接。 4.1.1 “CSS样式”面板 在Dreamweaver中，“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”—“CSS样式”命令可以打开或者关闭“CSS样式”面板。 没有定义CSS前，“CSS样式”面板是空白的。定义后，在“CSS样式”面板中会显示定义好的CSS规则。 样式表文件名 CSS规则列表 属性和属性值列表 工具按钮栏 4.1.2 定义CSS样式 单击【新建CSS规则】 按钮，打开如图对话框 【规则定义】 两个单选项 新建样式表文件：设定的样式保存在一个外部样式表文件中。 仅限该文档：设定的样式放在当前文件中，只在此文件中使用 提示：CSS可分为“内联样式表”和“外部样式表”。分别将CSS规则定义在HTML文档内部和独立的外部样式表文件（.css） 4.1.2 定义CSS样式 【选择器类型】选项 类（可应用于任何标签）：选择此类型后，需要在【名称】文本框中填入一个样式名字，注意，此类名称必须以“.”开头。这样定义的样式可用来定义绝大多数的HTML对象，使这些对象有统一的外观。 提示：如果选择【新建样式表文件】，单击【确定】后会要求选择保存目录和输入文件名，单击【保存】进入【.mystyle的CSS规则定义】对话框。 4.1.2 定义CSS样式 标签（重新定义HTML元素）：选择此选项后，在【标签】下拉框里选择需要重新定义的HTML标签。 ID（仅应用于一个HTML元素）：重新定义特定元素组合的格式，或其他CSS允许的选择器表单的