使用样式表.pptVIP

使用样式表 内容 什么是样式表 样式表和HTML文件的结合的几种方式 什么是层叠样式表 样式表属性的设置 什么是样式表？ 样式表是指告知浏览器如何显示HTML文件中特定元素类型的一组规则； 所有这些规则或说明都包含两个部分：选择器和属性； 选择器告诉浏览器页面中的哪些元素受规则控制； 属性告诉浏览器如何显示受控制的这些元素。 什么是样式表？ 通过样式表，我们只需在一个地方一次性的设置所有的规则； 样式表缩短了开发和维护HTML文件的时间； 样式表的使用非常灵活。用户可以组织一个控制全站文件的样式表，也可以为一个页面单独创建独立样式表；可以创建一个覆盖全局的样式表，也可以创建一个控制单一标签元素的样式表。 样式表和HTML文件的结合 实现样式表和HTML文件的结合共有四种方法： 1.使用嵌入式样式表 样式定义包含在开放式和闭合式的STYLE标签之间； 样式块位于HTML文件内部，一般定义在开放式和闭合式HEAD标签内部，或在/HEAD和BODY标签之间 。 样式表和HTML文件的结合 主要用于格式化单独的HTML文件； 例如： :::::::::::::::::::: HEAD STYLE !— BODY {color: blue} -- /STYLE /HEAD :::::::::::::::::::: 样式表和HTML文件的结合 2.使用外部样式表 用来使多个文件具有相同的格式样式； 需要一个单独的样式表文件，所有的样式定义都包含在这个文件当中； 样式表文件以“css”为扩展名； 要把独立的css文件和HTML文件结合起来，有两种途径：引用和链接； 使用引用方法时，要在HTML文件的style语句块中加入“@import url (“…”);” 。 样式表和HTML文件的结合 例如： STYLE !-- @import url(“style.css”); -- /STYLE 使用链接方法时，要在开放式和闭合式的HEAD标签之间使用LINK标签。 例如： HEAD LINK rel=stylesheet href=”style1.css” type=”text/css” /HEAD 样式表和HTML文件的结合 3.使用内联样式表 用来取代当前已有的样式定义； 使用“style”属性。 例如： P style=“color: red; font-size: 5px” 样式表和HTML文件的结合 4.使用类 可以格式化HTML文件中的指定部分； 在样式块的指定标签后面输入一个唯一的类名，通过这样的方式可以定义一个样式类； 例如： P.Classred {color: red} 在这里，P标签和类通过类名“classred”联系起来。使用样式类，就需要把相应标签的class属性都设置成相同的类名 P class=“classred”::::::::::/P 样式表和HTML文件的结合 样式表优先级 样式定义的优先顺序是由它和相应标签的距离来决定的； 内联样式表的优先级最高，其次是嵌入式样式表和外部样式表； 特殊标签的优先级高于普通标签，例如，H1标签的优先级高于BODY标签。 样式表和HTML文件的结合 DIV和SPAN标签 DIV标签：用来把P或其它段落级元素集合起来。设置的样式属性必须为DIV标签之中的元素可用的属性； SPAN标签：用来把字母和单词集合起来，设置其显示属性。 层叠样式表 1994年，样式表开始应用于HTML； 1996年12月，提出了一种新的样式表规范——层叠样式表； 允许在一个文件中使用多级样式； 每个位置靠后的样式表类型都继承以前的样式定义，并且重载那些相同的定义； 因此，可以用外部样式表来控制全站，用嵌入式样式表来控制某一页，用内联要式表控制某一个标签。 层叠样式表 不同级别的样式表 CSS1—为网页设计者提供了控制页面显示的方法。CSS1的属性包含对各个项的格式控制，如：字体、文本样式、大小等。 CSS-P—是指层叠样式表-布置。使用CSS-P属性可以把元素放置到指定的网页位置。 CSS2—是最新的网页设计工具。其特性包括：核心样式、媒体类型、听觉样式表、可下载字体、固定位置、表格格式化、自动编号、文本阴影和光标控制。 样式表属性 文本属性—用来控制页面中的文本 text-indent：用来缩进块文本的首行，其值可以是任何有效的长度单位或百分比。例如：H1{text-indent: 10px}； text-transform—控制文本的大小写，其值可为：none、capitalize、uppercase、lowercase和inherit。例如：P {text-transform: capitalize}； text-align—控制文本的对齐方式，其值可以为：left、center、right