第4章 节 网页表现语言——CSS 网页设计与制作教程（第3版） .pptVIP

第4章 网页表现语言——CSS CSS是Cascading Style Sheets（层叠样式单）的简称，更多的人把它称作样式单。 ; 4.2 把样式加到网页中的方法 当浏览器读取样式单时，要依照文本格式来读，可以使用4种方法把样式单加入到网页中：行内样式、内嵌一个样式单、链接到一个外部的样式单文件和导入多个外部样式单文件。 ;4.2.1 行内样式 标记 style=属性:属性值; 属性:属性值 ... 【例4-1】 ;除了在style.../style内分别定义各种选择符的样式外，如果多个选择符具有相同的样式，可以采用组合选择符，以减少重复定义的麻烦。其格式为： head ... style type=text/css !-- 选择符1, 选择符2, ... , 选择符n{属性:属性值; 属性:属性值; ... } -- /style ... /head 【例4-2】 【例4-3】 ;4.2.3 链接到一个外部样式单文件 格式为： head ... link rel=stylesheet href=样式单文件名.css type=text/css / ... /head 样式单文件的格式为： 选择符1{属性:属性值; 属性:属性值; ... } /* 注释内容 */ 选择符2{属性:属性值; 属性:属性值; ... } ... 选择符n{属性:属性值; 属性:属性值; ... } 【例4-4】 ;4.3.2 div与span定位标记 HTML的文档结构分为两大类：块级结构与行级结构。 在HTML中有div和span两个标记。 ;4.4 多重样式单的层叠 一般原则是，最接近目标的样式定义优先级最高。 样式单的优先级别从高到低为：行内样式、内部样式、链入外部样式、导入外部样式和默认浏览器样式。浏览器将按照上述顺序执行样式单的规则。 【例4-10】 h3{color: red; text-align: left; font-size: 8pt; background:ivory} 然后在内嵌样式单中也定义了h3标记的text-align和font-size属性： h3{text-align: right; font-size: 20pt} /* 标题3文字向右对齐；尺寸为20pt */ 那么这个网页叠加后的样式就是（文字颜色为红色；向右对齐；尺寸为20pt）： h3{color: red; text-align: right; font-size: 20pt; background:ivory } 【例4-11】 ;4.5 样式单的属性单位 ;2．百分比单位 百分比单位也是一种常用的相对类型。 例如： p{ line-height: 150% } /* 本段文字的高度为标???行高的1.5倍 */ hr{ width: 80% } /* 线段长度是相对于浏览器窗口的80% */ ;2．用rgb函数方式表示颜色值 在CSS中，可以用rgb函数设置出所要的颜色。语法为：rgb(R,G,B)。 例如： div { color: rgb(132,20,180) } div { color: rgb(12％,200,50%) } ;4.6 样式单的常用属性 参数中的“|”表示此属性值一次仅能选取其中一个，“||”表示此属性值可以复选多个。 ;2．字号（font-size） 语法：font-size : 绝对尺寸 | 相对尺寸 | 百分数 参数：绝对尺寸根据对象字体进行调节。可选xx-small | x-small | small | medium | large | x-large | xx-large 示例：所有包含在p中b的文字的尺寸将是30pt，因为b中的字号是相对于p的字号（20pt）的1.5倍。 p { font-size: 20pt } b { font-size: 1.5em } h3 { font-size: 20px } p { font-size: 15pt } b { font-size: 300% } body{ font-family:宋体; font-size: 9pt} p{font-family:宋体; font-size: 11pt} 【例4-13】 ;3．字体风格（font-style） 语法：font-style : italic | oblique | normal 参数：italic为斜体。对于没有斜体变量的特殊字体，将应用oblique。normal为正常的字体，声明此值将取消之前设置。 说明：将文本字体设置为斜体。 示例： h3 { font-style: italic } ;5．文