使用CS设置页面格式.ppt

使用 CSS 设置页面格式 1、概述 在制作网页时，对文本的格式化是一件很繁琐的工作，利用CSS 可以控制一篇文档的格式，也可以控制多篇文档的文本格式，使得文档格式设置变得简单。 CSS语法比较复杂，有需要请查看相关书籍。 CSS不仅可以控制文档格式，也可以定义一些特殊的HTML属性，实现一些效果。 了解 CSS 层叠样式表 (CSS) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML 代码）位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件（外部样式表）或 HTML 文档的另一部分（通常为 head 部分）中。使用 CSS 可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。 样式表的组成 一个样式表由样式规则组成, 以告诉浏览器怎样去呈现一个文档. 每个规则的组成包括一个选择符--通常是一个HTML的元素, 例如BODY, P, 或EM--和该选择符所接受的样式. 有很多的属性可以用于定义一个元素. 每个属性带一个值, 共同地描述选择符应该如何呈现. 样式规则组成 选择符 { 属性: 值 } 选择符 { 属性1: 值1; 属性2: 值2 }单一 选择符的复合样式声明应该用分号隔开: 例如： H1 { font-size: x-large; color: red } H2 { font-size: large; color: blue } CSS的选择符 选择符：任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。P { text-indent: 3em } CSS的ID选择符 ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符#在名字前面。例如，ID选择符可以指定如下: #svp94O { text-indent: 3em } 引用样式：P ID=svp94O文本缩进3em/P 2、外部样式表和内部样式表 外部 CSS 样式表是存储在一个单独的外部 .css 文件（并非 HTML 文件）中的一系列 CSS 规则。利用文档 head 部分中的链接，该 .css 文件被链接到 Web 站点中的一个或多个页面。 内部（或嵌入式）CSS 样式表是包含在 HTML 文档 head 部分的 style 标签内的一系列 CSS 规则。 外部、内联、嵌入样式表（请看实例） CLASS属性 CLASS属性用于指定元素属于何种样式的类。例如，样式表可以加入punk和warning类: .punk { color: lime; background: #ff80c0 } P.warning { font-weight: bolder; color: red; background: white } 这些类可以使用CLASS属性在HTML中引用: H1 CLASS=punk属性扩展/H1P CLASS=warning一些属性扩展会有负值的边效果，产生于支持和不支持的浏览器上... ID属性 ID属性用于定义一个元素的独特的样式。一个CSS规则如 #wdg97 { font-size: larger } 可以通过ID属性应用到HTML中: P ID=wdg97欢迎访问Web Design Group及TV water 168!/P SPAN元素 SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用，而且它也能接受STYLE、CLASS和ID属性。 SPAN的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用。 DIV元素 DIV元素在功能上与SPAN元素相似，最主要的差别在于DIV (division，部分的简称)是一个块级元素。DIV可以包含段落、标题、表格甚至其它部分。 组合和继承 为了减少样式表的重复声明，组合的选择符声明是允许的。例如，文档中所有的标题可以通过组合给出相同的声明: H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif } 实际上，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值，除非另外更改。例如，一个BODY定义了的颜色值也会应用到段落的文本中。 伪类和伪元素 伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。 伪类或伪元素规则的形式如 选择符:伪类 { 属性: 值 } 或 选择符:伪元素 { 属性: 值 } 伪类和伪元素不应用HTML的CLASS属性来指定 伪类和伪元素实