中职高教版《网页设计与制作》3.5 层叠样式表（CSS）课件

层叠样式表（CSS） CSS样式表简介 CSS(Cascading Style Sheet)的中文翻译为层叠样式表。 实质：是一组格式设置规则。 作用：用于控制Web页面的外观。 CSS对比HTML： 1.CSS可以设置一些特殊属性。 2.在更新功能，更新CSS样式时，套用该样式的所有页面文件都将自动更新为新的样式。 2 CSS规则 用户设定的CSS规则可以位于外部CSS样式表、内部CSS样式表。 （1）外部CSS样式表：一系列存储在一个单独的外部CSS(a.css)文件中的CSS规则。 （2）内部（或嵌人式）CSS样式表：一系列包含在日TML文档文件头部分的＜style>…</style>标签内的CSS规则。 3 “CSS样式”面板： Dreamweaver CS6界面最右边；快捷键Shift+F11。 “CSS样式”面板 “CSS样式”面板包括了两种显示模式：“全部”模式和“当前”模式 “全部”模式显示当前页面中用到的所有CSS规则。 “当前”模式显示当前所选内容样式的摘要。 4 “CSS样式”面板 “只显示设置属性” “显示类别视图” “显示列表视图” 5 “CSS样式”面板 “附加样式表” “新建CSS规则” “编辑样式” “禁用/启用CSS属性” “删除样式” 6 方法：单击“新建CSS规则”按钮 CSS样式的创建 (1)类(可应用于任何HTML元素）：是自定义的CSS规则，命名时以“.”开头。 (2）ID（仅应用于一个HTML元素)：用于特定的ID号，命名时以“#”开头。 (3)标签(重新定义HTML元素)：将HTML标记重新定义。 (4)复合内容(基于选择的内容)：可以使多个选择器组合应用。 7 “(仅限该文档）”，即创建一个嵌入式样式表，这种样式表一般只能应用于当前网页中的元素； “新建样式表文件”，即可将样式表作为独立的文件保存，其扩展名为“.css”，外部CSS文件可以被不同的网页调用，既可节省存储空间，减少重复工作，又能快捷地实现网站风格的统一化。 CSS样式的创建 8 “新建样式表文件”——保存样式表文件 CSS样式的创建 指定样式表文件的存放路径为站点的CSS目录中，并在“文件名”文本框中输入“css”，“保存类型”选择“样式表文件(*.css)”.单击“保存”按钮。 9 CSS样式基本设置 “新建CSS规则”对话框中，选择需要设置的CSS规则的类型后，即可进入“CSS规则定义”对话框。 类型：设置字体、字号、颜色、行高、修饰等属性。 10 CSS样式基本设置 背景：设置背景色、背景图像以及背景的定位、重复等属性。 11 CSS样式基本设置 区块：设置单词间距、文本缩进、对齐方式等属性。 12 CSS样式基本设置 方框：设置各元素的高、宽、浮动、填充、边界等属性。 13 CSS样式基本设置 边框：设置边框的粗细、颜色和边框线类型等属性。 14 CSS样式基本设置 列表：设置自定义的列表图像、位置等属性。 15 CSS样式基本设置 定位：设置各元素定位的类型、位置及大小等属性。 16 CSS样式基本设置 扩展：设置分页、光标样式及使用滤镜等属性。 17 CSS样式基本设置 过渡：设置CSS属性的变化速度、延时等效果。 18 新建文本CSS规则：打开“CSS样式”面板，单击“新建CSS规则”按钮，在弹出的对话框的“选择器类型”区域内选择“类(可应用于任何HTML.元素)”，在“选择器名称”区域内输入“.word”，在“规则定义”区域内选择“(仅限该文档)” CSS样式表应用 19 设置文本CSS样式：在“CSS规则定义”对话框左边“分类”区域内选择“类型”，在右边“字体”区域内选择“宋体”，在“大小”区域内选择“14”，单位为像素，在“粗细”区域内选择“粗体”。 在“CSS规则定义”对话框左边“分类”区域内选择“区块”，在右边“文本对齐”区域内选择“居中”。 CSS样式表应用 20 对导航条文本运用CSS样式选中导航条文字所在的单元格，在“属性”面板的“类”区域内选择刚才建立的样式“.word”。 CSS样式表应用 21 a:link：定义链接目前未被访问时的样式。 a:visited：定义链接被访问过后的样式。 a:hover：定义鼠标指针移动到超链接上的状态。 a:active：定义鼠标按下不放时的显示状态。 CSS样式表应用 22 a:link：定义链接目前未被访问时的样式。 a:visited：定义链接被访问过后的样式。 a:hover：定义鼠标指针移动到超链接上的状态。 a:active：定义鼠标按下不放时的显示状态。 CSS样式表应用 设置完毕后，直接在页面中选择需要添加链接的文字，在属性面板的链接项中设置链接。 23 $