4.4 CSS 样式表运用

4.4 CSS样式表运用

学习目标 • 理解CSS样式表对网页布局的作用 • 掌握CSS样式表的运用方法

样式表设计 • 样式表定义及引用 • 相关的标记和属性 • 样式的继承和作用顺序 • CSS属性 • CSS滤镜

一、样式表定义及引用 • CSS，Cascading Style Sheets，层叠样式表，是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。 • CSS标准中重新定义了HTML中原来的文字显示样式，并增加了类、层等新概念，可以对文字重叠、定位等，提供了更为丰富多彩的样式；同时CSS可进行集中样式管理。

CSS还允许将样式定义单独存储于样式文件中，这样可以把显示的内容和显示样式定义分离，便于多个HTML文件共享样式定义。一个HTML文件也可以引用多个CSS样式文件中的样式定义。 • 所谓"层叠"，实际上就是将显示样式独立于显示的内容，进行分类管理，例如分为字体样式、颜色样式等，需要使用样式的HTML文件进行套用即可。

1. 样式表定义 • CSS样式表定义的基本语法为：选择符（Selector）{ 规则（Rule）表} • 选择符是指要引用样式的对象，它可以是一个或多个HTML标记（各个标记之间以逗号分开），如h1；也可以是类选择符（如.text）、ID选择符或上下文选择符。 • 规则表是由一个或多个样式属性组成的样式规则，各个样式属性间由分号隔开，每个样式属性的定义格式为：样式名：值 • 样式定义中可以加入注解，格式为：/*字符串*/ 【例】使用CSS控制文字显示特性<Go1> <Go2>

2. 样式引用 （1）链接到外部样式表 • 将样式表定义为一个独立的CSS样式文件； • 使用该样式表的HTML文件在头部用<link>标记链接到CSS样式文件。【例】<Go> • 在HTML文件头部使用多个<link>标记就可以链接到多个外部样式表。 • <style>标记内定义的前后加上注释符的作用是使不支持CSS的浏览器忽略样式表定义。

<link>标记的属性

（2）引入外部样式表 • 在HTML文件的头部的<style></style>标记之间，利用CSS的@import声明引入外部样式表。 • 格式为： <style> @import URL("外部样式文件名"); ......</style>

例如 <style type= “text/css ”></style>

引入方式：引入外部样式表的使用方式 • 链接方式：链接到外部样式表的使用方式 • 引入方式与链接方式的区别： • 引入方式在浏览器下载HTML文件时就将样式文件的全部内容拷贝到@import关键字所在位置，以替换该关键字。 • 链接方式在浏览器下载HTML文件时并不进行替换，而仅在HTML文件体部需引用CSS样式文件中的某个样式时，浏览器才链接样式文件，读取需要的内容。

（3）嵌入样式表 • 利用<style>标记将样式表嵌HTML文件的头部。 • 嵌入样式表的作用范围是本HTML文件。【例】嵌入样式表　<Go>

（4）内联样式 • 内联样式: 样式在标记内部使用样式 • 方法: 将标记的style属性值赋为所定义的样式规则例如： <h1 style="font-family:'隶书', '宋体';color:#ff8800">CSS示例！</h1> <p style= “color:red;background-color:yellow ”>......</p><body style= “font-family: ‘宋体’;font-size:12pt;background:yellow ”> • 使用内联样式时，样式定义的作用范围仅限于此标记范围之内。

内联样式应用于样式仅适用于单个页面元素的情况，因为样式和要展示的内容混在一起，会失去一些样式表的优点，使样式定义和内容不能分离，所以尽量少用。内联样式应用于样式仅适用于单个页面元素的情况，因为样式和要展示的内容混在一起，会失去一些样式表的优点，使样式定义和内容不能分离，所以尽量少用。 • 若要在一个HTML文件中使用内联样式，必须在该文件的头部对整个文档进行单独的样式表语言声明。即 <meta http-equiv= "Content-type " content= "text/css "> 【例】四种方式的混合使用 <Go>

二、相关的标记和属性 随CSS的出现增加的HTML标记和属性： • 类选择符 • class属性 • id选择符和id属性 • 上下文选择符 • 伪类 • span标记 • div标记

1. 类选择符（Class Selector）和class属性 • 用类选择符和标记的class属性就可做到 • 在页面中不使同一种标记都遵循同一种样式 • 使不同的标记能够遵循相同的样式 • 方法：在<style>标记中定义类选择符，在体部标记中将标记的class属性值设置为类名。 • 类选择符（Class Selector）是在样式表中定义具有样式值的类.

格式1 标记名.类名 {规则1; 规则2; ......} • 示例 <head><style type="text/css">p.back { background-color:#666666;}...</style>.....</head><body>...<p class="back">本段文字的底色为#666666</p><p>这是另一段，不遵循以上样式的设置</p>......</body> <GO>

格式2 .类名 {规则1; 规则2; ......} • 示例 <head><style type="text/css">.text {font-family: "宋体"; font-size: 14pt; color: red}</style></head><body><span class="text">这行文字应是红色的。</span><h1 class="text">标题1也采用以上样式。</h1></body></html> <Go>

2. id选择符（ID Selector）和id属性 • id选择符用于定义一个元素的独有的样式，它与类选择符的区别在于id选择符在一个HTML文件中只能引用一次，而类选择符可以多次引用。 • id选择符的定义的格式为： #id名 { 规则1; 规则2; ...} • 要引用id选择符定义的样式，需在体部标记中设置id属性值，即将该id属性值设置为id名。

示例 <html><head>...<style type="text/css">...#colorid1 { color:green;}...</style></head><body>...<p id="colorid1">ID选择符与ID属性结合使用可对特定标记进行样式控制</p>......</body></html> <Go>

3. 上下文选择符（Contextual Selector） • 上下文选择符定义嵌套标记的样式 • 例如： td p { color:darkred} • 该定义指明HTML文件中出现嵌套标记<td>...<p>...</p>...</td>之处将引用该样式，即只有在单元格中的段落才使用该样式。

4. 伪类 • 伪类是特殊的类可区别标记的不同状态。 • 伪类定义格式为：选择符:伪类 { 属性: 值 } • 伪类不用HTML的CLASS属性来指定。

a:visited { • color: #0000FF; • text-decoration: none} • a:link { • font-family: "宋体"; • font-size: 9pt; color: #FF00FF; • text-decoration: none} • a:hover { • font-family: "宋体"; • font-size: 12pt; • color: #003333; • background-color: #FFCC99; • text-decoration: none} • 例如: 指定超链接（<a>）以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links) <Go>

5. span标记 • span标记可以带有class、id、style等与CSS样式有关的属性。 • 增加span标记的目的在不必将样式附加在一个HTML的原有标记（称为结构元素）上。 • span标记纯粹是为了应用样式，无其他作用。 • span标记是随CSS的产生而被新加入到HTML中的。　 • 格式：<span>……</span>

6. div标记 • <div>是一个块级元素。<div>和</div>之间可以包含段落、标题、表格等其他块级元素。 • <div>将其中包含的内容形成一个独立段落。<div>中有align、class、id和style等属性。 • <div>与<span>共同构成HTML中层的概念，二者区别在于<div>是块级元素，而<span>是行元素；<div>可包含<span>，反之则不行。 <Go>

三、样式的继承和作用顺序 1. 样式继承 • 嵌在内层的标记采用外层标记的样式 <html><head><title>样式继承</title><style type="text/css"> h2 { color:red;}</style></head><body> <h2><u>DIV</u><strong>标记的作用</h2> </body></html> <Go>

样式继承的特殊形式——相对值继承方式，即以百分比继承。例如： <head><style> p.class1 {font-size:12pt;} p.class2 {font-size:200%} p.class3 {font-size:100%}</style></head><body> <p class="class1">第一段</p> <p class="class2">第二段</p> <p class="class3">第三段</p></body> <Go>

2. 样式的作用顺序 • 样式表的作用优先顺序遵循以下原则： • 内联样式中所定义的样式的优先级最高； • 其它的样式表按其在HTML文件中出现或被引用的顺序，越在后出现，优先级越高； • 选择符的作用优先顺序为：上下文选择符、类选择符、id选择符，优先级依次降低； • 未在任何文件中定义的样式，将遵循浏览器的缺省样式。

四、 CSS属性 • 字体属性 • 颜色及背景属性 • 文本属性 • 方框属性 • 分类属性 • 定位属性

1. 字体属性 • 字体（font-family） • 字号（font-size） • 字体风格（font-style） • 字体加粗（font-weight） • 字体变化（font-variant） • 字体综合设置（font） • …… 【例】字体属性的用法　<Go>

2. 颜色和背景属性 • 属性名: color • 可取值: 英文单词, #RRGGBB, #RGB • 含义: 指定页面元素的前景色 • 举例: • h1{color:red} • h2{color:#008800} • h3{color:#080}

属性名: background-color • 可取值:英文单词, #RRGGBB, #RGB, transparent • 含义:指定页面元素的背景色 • 举例: • body {background-color:white} • h1{background-color:#0000F0} • p{background-color:transparent}

属性名: background-image • 可取值:统一资源定位器URLs, none • 含义:指定页面元素的背景图象 • 举例: • body{background-image:url(bg.gif)} • p{ background-image:url(http://www.htmlhelp.com/bg.jpg)}

属性名:background-repeat • 可取值: repeat, repeat-x, repeat-y, no-repeat • 含义:决定一个被指定的背景图象被重复的方式。缺省值为repeat • 举例: • body {background-repeat:no-repeat} • p {background-repeat:repeat-x}

属性名:background-attachment • 可取值: scroll, fixed • 含义:指定背景图象是否跟随页面内容滚动。缺省值为sroll • 举例: • body {background-attachment:fixed}

属性名: background-position • 可取值:数值表示法,关键词表示法 • 含义:指定背景图象的位置 • 举例: • body{background-position:30% 70%} • p{background-position:bottom left}

属性名: background • 可取值:背景颜色、背景图象、背景重复、背景位置。 • 含义:背景属性综合设定 • 举例: • body {background:url(bg1.gif) • green repeat-y fixed left 20pt} 【例】颜色和背景属性的用法　<Go>

3. 文本属性 • 属性名: letter-spacing • 可取值:长度值|normal • 含义:设定字符之间的间距 • 举例: • h1 {letter-spacing:8px} • p {letter-spacing:14pt}

属性名: text-decoration • 可取值: none|underline|overline|line-through|blink • 含义:设定文本的修饰效果，line-through是删除线，blink是闪烁效果。缺省值为none。 • 举例: • a:link,a:visited,a:active { text- decoration: none}

属性名: text-align • 可取值: left|right|center|justify(两端对齐) • 含义:设置文本横向排列对齐方式 • 举例: • p {text-align:center} • h1 {text-align:right}

属性名: vertical-align • 可取值: baseline|super|sub|tomiddle|bottom|text-top|text-bottom|百分比设定元素在纵向上的对齐方式。 • 含义:值的含义见下面的说明 • 举例: • img.mid { vertical-align:50%} • span.sup { vertical-align:super} • span.sub { vertical-align:sub}

属性名: text-indent • 可取值:长度值|百分比 • 含义:设定块级元素第一行的缩进量 • 举例: • p { text-indent:30pt} • h1 { text-indent:10%}

属性名: line-height • 可取值: normal|长度值|数字|百分比 • 含义:设定相邻两行的间距 • 举例: • p { line-height:200%} • p { line-height:30pt} 【例】文本属性的用法 <Go>

4. 方框属性 • 方框属性用于设置元素的边界、边框等属性值，可用方框属性的元素大多是块元素，包括body、p、div、td、table、hx（x=1,2,...,7）等等。 • 方框属性包括边界（margin）、边界补白（padding）、边框（border）等【例】方框属性的用法　<Go>

5. 列表属性 • 属性名: list-style-type

【例】列表属性的用法　<Go>

6. 定位属性 （1）top、left和position属性 (二维定位属性) • top属性用于设置元素与窗口上端的距离； • left属性用于设置元素与窗口左端的距离； • position属性用于设置元素位置的模式。 • top和left属性通常配合position属性使用。position有三种取值： • absolute：绝对位置，原点在所属块元素的左上角； • relative：相对位置，即该位置是相对HTML文件中本元素的前一个元素的位置； • static：静态位置，按照HTML文件中各元素的先后顺序显示，static是缺省值。【例】二维定位属性的使用　　<Go>

（2）三维空间定位 • CSS允许在三维的空间中定位元素，与之相关的属性是z-index，z-index与top和left属性结合使用。 • z-index将页面中的元素分成多个"层"，形成多个层"堆叠"的效果，从而营造出三维空间效果。 • z-index的取值为整数，可以为正，也可为负，值越大表示在堆叠层中越处于高层，为0表示基准，为负表示位置在z-index=0的元素之下。【例】三维定位属性的使用 <Go>

五、CSS滤镜 1、概述　 • 作用：构造对图像处理的特殊效果 • 语法：filter：filtername(parameters) • 优点：实现简单 • 缺点：当浏览器不支持时，……

CSS 属性

4.4 CSS 样式表运用

4.4 CSS 样式表运用

Presentation Transcript