第八章 样式表.ppt

容器模型综合示例 样式表属性——容器模型 边框快捷属性 边框快捷属性包括border-top、border-right、border-bottom、border-left。这些是可以一次性指定所选容器边框的宽度、颜色和样式的快捷属性。如果某个属性没有设置，则使用其默认值。 样式表属性——列表 可以使用CSS属性来控制列表的位置以及项目符号的样式，甚至可以用图片来代表列表的项目符号。 list-style-type属性 list-style-type属性用来设置列表的符号或者编号，通常搭配ol或ul标记一起使用 list-style-image属性 使用图片来替代列表符号 list-style-position属性 用来控制列表符号的缩进 列表属性综合示例 样式表属性——列表 list-style属性 一次性定义所有的列表属性。定义的顺序如下：type、position、image。 如果某一属性空缺，则自动用其默认值取代。 样式表属性——混合属性 容器标记位置、显示等混合在一起设置的属性 display属性 可以设置标记在页面中的显示方式 position属性 提供不同的定位方法 top、bottom、right和left属性 和position属性一起使用，用来指定标记的位置 height和width属性： 用来指定容器标记的大小 样式表属性——混合属性 float属性 指定了标记的位置在左边还是右边 line-height属性 用来指定容器标记中文本的行间距 visibility属性 用来指定标记的可见性 混合属性综合示例 外部和内联样式表示例 外部样式表 内联样式表 本章小结 CSS样式表提供了一种进行网站文件格式化的方法，它可以实现一次指定，随处使用。 样式表的使用方法一般有四种: 内联样式表 嵌入式样式表 输入外部样式 链接外部样式表 样式表有一些特定的规则和样式定义。通过id规则和class规则，可以精确指定标记使用的样式规则。通过继承和情景选择，可以实现Web页面标记样式的嵌套定义，从而保持良好的结构。 样式表是通过定义标记的属性来修饰标记，常用到的样式表属性有文本属性、颜色和背景属性、字体、容器模型、列表属性以及一些混合属性。网页设计者通过指定这些属性的属性值实现自己的设计意图。 思考题 什么是CSS？ 如何将CSS和HTML相结合？ id规则和class规则的区别是什么？ 样式表的文本属性有几种？ CSS如何通过容器模型来定义边距？怎样设定边框属性？ 高等学校计算机应用人才培养系列教材 2.* HTML网页设计 贾素玲 王强 主编 罗昌 姜浩 许珂 编著 第八章 样式表 本章结构 式表简介 使用样式表 样式表创建规则 层叠样式表 样式表属性 外部和内联样式表示例 本章小结 思考题 样式表简介 早期HTML版本的缺陷 缺少对HTML页面标记进行统一控制的规范，或者说，早期HTML版本无法对页面标记进行精确的控制。 样式表概念 样式表是规范浏览器如何显示HTML特定标记的一组规则。所有这些规则都包含两个部分： 标记名称：决定页面中的哪些标记受到样式规则的控制 标记属性：决定如何显示这些受控制的标记。 通过样式表，网页设计者只需在某个地方一次性地设置所有样式规则，这使得HTML文档更加简洁。 使用样式表 一般说来，可以通过四种不同的方法将样式表添加到页面中。这四种方法是： 内联式样式表 嵌入式样式表 输入外部样式表 链接外部样式表。 其中，前两种可以称为内部样式表，后两种称为外部样式表。它们的优先级从高到低依次为：内联式样式表、嵌入式样式表、输入外部样式表、链接外部样式表。 内部样式表——内联式样式表 严格地说，内联式样式表称不上“表”，仅仅是一种HTML标记。在HTML中，内联式样式表的样式规则直接插入所应用的HTML标记中，作为标记的属性参数，因此，其作用范围仅限于所应用的HTML元素。语法如下： 标记名称 style=”样式属性: 属性值; 样式属性: 属性值……” 内联式样式表示例 内部样式表——嵌入式样式表 嵌入式样式表位于HTML的内部，一般在head和/head标记之间定义，或在/head和body标记之间。嵌入式样式表使用style和/style标记对实现。下面是嵌入样式表定义的语法格式： 嵌入式样式表示例 外部样式表 如果要操作多个页面，并且这些页面需要有统一的外观格式。在这种情况下，假设对每个页面都使用嵌入式样式表，想要进行更新就需要调整每个页面的样式表。 最好的方法是建立一个独立的样式表文件，它包括所有样式定义，并且可以和页面相结合。独立的样式表文件以“css”为扩展名。 该文件中，样式的定义也放在style和/style标记对内。语法格式同嵌