第8章样式表导论.ppt

网页设计技术 第八章-样式表 提 纲 样式表简介 使用样式表 样式表创建规则 层叠样式表 样式表属性 外部和内联样式表示例 8.1? 样式表简介 样式表是规范浏览器如何显示HTML特定标记的一组规则 标记名称：决定页面中的哪些标记受到样式规则的控制 标记属性：决定如何显示这些受控制的标记 8.1? 样式表简介 8.2? 使用样式表 四种样式表： 内联式样式表 嵌入式样式表 输入外部样式表 链接外部样式表 前两种可以称为内部样式表，后两种称为外部样式表 优先级从高到低依次为：内联式样式表、嵌入式样式表、输入外部样式表、链接外部样式表。 8.2? 使用样式表 内部样式表——内联式样式表 样式规则直接插入所应用的HTML标记中，作为标记的属性参数，因此其作用范围仅限于所应用的HTML元素。 语法如下： 标记名称 style=”样式属性: 属性值; 样式属性: 属性值……” 内联样式表 示例 课堂练习 8.2? 使用样式表 内部样式表——嵌入式样式表 嵌入式样式表位于HTML内部，在head和/head标记之间定义，或在/head和body标记之间 嵌入式样式表使用style和/style标记对实现 8.2? 使用样式表 嵌入式样式表 示例 课堂练习 8.2? 使用样式表 外部样式表 操作多个页面，并且这些页面需要有统一的外观格式。 外部样式表文件以“css”为扩展名 根据样式文件与网页的关联方式又分为： 输入（import）：将外部的样式表文件以输入的方式添加到页面中，相当于复制一份样式表。 链接（link）：如果标记使用到样式表，就会到所链接的外部样式表中索取指定的样式。 8.2? 使用样式表 使用@import，语法： head style type=text/css @ import url(样式表文件.css); /style /head 输入外部样式表 示例 8.2? 使用样式表 链接外部样式表： 链接外部样式表 示例 课堂练习 8.3? 样式表创建规则 id规则： 定义语法的样式如下： id规则 示例 8.3? 样式表创建规则 class规则 同一类可应用于不同的标记，或者一个标记可以定义不同的类 class规则的语法如下： 课堂练习 8.3? 样式表创建规则 8.3? 样式表创建规则 8.3? 样式表创建规则 8.3? 样式表创建规则 8.3? 样式表创建规则 继承性 父标记和子标记的概念 包含在外面的标记为父标记 被包含在里面的标记为子标记 对子元素（后代）定义的样式比对子元素的父（或祖先）元素定义的样式更特殊 （子元素的样式优先） 8.3? 样式表创建规则 8.3? 样式表创建规则 情景选择 特殊的继承，对位于某嵌套标记内的特定内容进行样式控制，该规则按照嵌套顺序列出标记名称。 课堂练习 8.4 层叠样式表 CSS可以细分为： CSS1 CSS1的作用是设置标记的颜色、字体等显示特性 CSS-P CSS-P是指“层叠样式表-布置”（Cascading Style Sheet – Positioning） 使用CSS-P属性可以把标记放置到指定的页面位置。 CSS2 CSS2是最新推出的CSS规范， 拥有一些最新的功能特点：听觉样式表、自动编号、核心样式、光标控制、可下载的字体、固定位置、媒体类型、表格格式化、文本阴影 8.5 ?样式表属性 文本属性 文本属性 示例 8.5 ?样式表属性 颜色和背景属性 8.5 ?样式表属性 span span是行级容器标签，不会引起换行 div div是块级容器标签，可以包含图片、标题、段落、文字等 颜色和背景属性 示例 示 例 示 例 示 例 课堂练习 8.5 ?样式表属性 字体属性 字体属性 示例 8.5 ?样式表属性 容器模型 为不同的文本设置不同的容器级别，可以调整容器中的边距、填充和边框等 边距属性： 定义所选容器的侧面距离边框外部的距离，包括：margin-top、margin-right、margin-bottom、margin-left margin属性：用来一次性设置容器各个边的边距，而不必分别定义不同的部分。 8.5 ?样式表属性 填充属性 容器内容距离边框的距离，包括：padding-top、padding-right、padding-bottom、padding-left padding属性：用来一次性设置四边填充宽度的快捷属性，与margin属性类似 8.5 ?样式表属性 边框属性 可用来指定容器的四面边框宽度，边框属性包括：border-top-width、border-right-width、border-bottom-width和border-left-width border-widt