软件开发 程序设计

第6章 层叠样式表

软件开发 程序设计

概述教学提示：XML为存储结构化数据提供了 教学提示：XML为存储结构化数据提供了 强大的方法， 强大的方法，但是它没有提供关于数据 如何显示的信息，这实际上是XML的优点： XML的优点 如何显示的信息，这实际上是XML的优点： 数据的结构完全与数据表示无关。 数据的结构完全与数据表示无关。当有 必要表示格式化XML文件中的数据时， XML文件中的数据时 必要表示格式化XML文件中的数据时，格 式化的详细信息放置在层叠样式表CSS CSS中 式化的详细信息放置在层叠样式表CSS中。 教学目标：理解层叠样式表CSS的概念， CSS的概念 教学目标：理解层叠样式表CSS的概念， 掌握层叠样式表CSS的方法，掌握CSS CSS的方法 CSS与 掌握层叠样式表CSS的方法，掌握CSS与 XML结合的方法 学会综合运用CSS 结合的方法， CSS。 XML结合的方法，学会综合运用CSS。

北京林业大学信息学院

软件开发 程序设计

6.1 6.2 6.3 6.4 6.5 6.6

CSS简介 设置字体属性 设置色彩和背景图象属性 设置边界属性 CSS2新增功能 综合实例北京林业大学信息学院

软件开发 程序设计

6.1 CSS简介是用于为XML XML数据定义显示参数的一 CSS 是用于为XML数据定义显示参数的一 种技术， 种技术，它利用简单的规则来控制元素 内容在浏览器中的表现方式。CSS最初是 内容在浏览器中的表现方式。CSS最初是 被开发来为HTML文档指定显示的， HTML文档指定显示的 被开发来为HTML文档指定显示的，同时 也适合于XML数据。 XML数据 也适合于XML数据。样式表中的显示规范 XML数据分离 数据分离， 与XML数据分离，这意味着相同的数据通 过应用不同的样式表可以以不同的方式 显示。同样， 显示。同样，相同的样式表可以应用到 多个XML文件。 XML文件 多个XML文件。北京林业大学信息学院

软件开发 程序设计

6.1.1 CSS的概念CSS( CSS(Cascading Style Sheet)层叠样 ) 式表，也称为级联样式表， 式表，也称为级联样式表，是用来进行 网页风格设计的。在网页制作时采用CSS 网页风格设计的。在网页制作时采用CSS 技术，可以有效地对页面的布局、字体、 技术，可以有效地对页面的布局、字体、 颜色、 颜色、背景和其它效果实现更加精确的 控制。 控制。只要对相应的代码做一些简单的 修改，就可以改变同一页面的不同部分， 修改，就可以改变同一页面的不同部分， 或者页数不同的网页的外观和格式。 或者页数不同的网页的外观和格式。

北京林业大学信息学院

软件开发 程序设计

6.1.2 CSS的使用CSS基本语法 CSS基本语法 一个无CSS样式表XML CSS样式表XML文件 一个无CSS样式表XML文件 一个使用CSS样式表XML CSS样式表XML文件 一个使用CSS样式表XML文件

北京林业大学信息学院

软件开发 程序设计

1. CSS基本语法CS

S的规则是通过属性与属性值来共同设定。 CSS的规则是通过属性与属性值来共同设定。 的规则是通过属性与属性值来共同设定 属性名称是CSS的关键字， fontCSS的关键字 属性名称是CSS的关键字，如fontfamily(字体 字体) font-size(文字大小 文字大小) family(字体)、font-size(文字大小)、 display(显示属性 显示属性) color(颜色 颜色) display(显示属性)、color(颜色)等。属 性用语指定元素某一方面的特性， 性用语指定元素某一方面的特性，而属性 值则用于指定元素的特性的具体特征。 值则用于指定元素的特性的具体特征。 样式表的建立要符合CSS规则， CSS规则 样式表的建立要符合CSS规则，它们一般被 定义成以下形式的句法： 定义成以下形式的句法： 标志{标志属性1:属性值1;标志属性2: 1:属性值1;标志属性2:属性 标志{标志属性1:属性值1;标志属性2:属性 2;标志属性3:属性值 标志属性3:属性值3;...} 值2;标志属性3:属性值3;...}北京林业大学信息学院

软件开发 程序设计

2. 一个无CSS样式表XML文件【例6.1】这是一个没有应用层叠样式表的 】这是一个没有应用层叠样式表的XML文 文 档，code6_1.xml <?xml version="1.0" encoding="gb2312" ?> <poem> <name>望庐山瀑布 望庐山瀑布</name> 望庐山瀑布 <writer>唐.李白 李白</writer> 唐 李白 <content>日照香炉升紫烟 日照香炉升紫烟</content> 日照香炉升紫烟 <content>遥看瀑布挂前川 遥看瀑布挂前川</content> 遥看瀑布挂前川 <content>飞流直下三千尺 飞流直下三千尺</content> 飞流直下三千尺 <content>疑是银河落九天 疑是银河落九天</content> 疑是银河落九天 </poem>北京林业大学信息学院

软件开发 程序设计

2. 一个无CSS样式表XML文件

北京林业大学信息学院

软件开发 程序设计

3. 一个使用CSS样式表XML文件XML文档的开头部分写一个关于样式单 在XML文档的开头部分写一个关于样式单 的如下声明语句： 的如下声明语句： <?xml-stylesheet type="text/css" href="mycss.css" ?> 也可以使用完整的URL指定CSS样式表文件， URL指定CSS样式表文件 也可以使用完整的URL指定CSS样式表文件， 像下面这个例子： 像下面这个例子： <?xml-stylesheet type=" text/css" href=/file /mycss.css ?>北京林业大学信息学院

软件开发 程序设计

一个使用CSS样式表XML文件@charset "gb2312"; name{display:block; font-family: 黑体 黑体; font-size: 20pt; letter-spacing:10pt; text-align:center; } writer{display:block; font-family: 魏碑 魏碑; font-size:10pt; font-weight:bold; letter-spacing:10pt; line-height:40pt; text-align:center; color: Black; } content{display:block; font-family: 隶书 隶书; font-size: 20pt; font-weight:bold; line-height: 30pt; letter-spacing:10pt; text-align:center; color: Black; }

北京林业大学信息学院

软件开发 程序设计

一个使用CSS样式表XML文件

北京林业大学信息学院

软件开发 程序设计

6.2.1 fo

nt属性集1. font属性的分类 font属性的分类 font属性通常用于设置指定字体的风格 属性通常用于设置指定字体的风格、 font属性通常用于设置指定字体的风格、 大小、亮度等参数。该属性在XML XML样式表 大小、亮度等参数。该属性在XML样式表 。 分类中属于通用字体类， CSS样式表定 分类中属于通用字体类，由CSS样式表定 font属性的常见子属性见表 属性的常见子属性见表6.1 义。font属性的常见子属性见表6.1

北京林业大学信息学院

软件开发 程序设计

表6.1 font属性的常见子属性font属性 font-family fontfontfont-style fontfont-weight fontfont-variant fontfont-size fontfont-stretch 指定字体的字型 指定字体的风格 指定字体的亮度 指定字体全为大写字母 指定字体全为大写字母 指定字体的大小 指定字体的压缩或拉伸方式 说 明

北京林业大学信息学院

软件开发 程序设计

2. font属性的用法和常见的CSS属性设置类似，font属性 和常见的CSS属性设置类似，font属性 CSS属性设置类似 使用示例如下： 使用示例如下： element{font-style:italic;font-size: "20pt"; font-family: "楷体 楷体 _gb2312";}

北京林业大学信息学院

软件开发 程序设计

3. 字体字型font-family属性font-family属性用于指定字体名称， font-family属性用于指定字体名称，属性值使 属性用于指定字体名称 用逗号分隔的字体名称。 用逗号分隔的字体名称。如果字体名称中出现 空格，必须使用双引号将字体括起来， 空格，必须使用双引号将字体括起来，如 Roma”。 “Times New Roma 。 font-family属性可用的值取决于用户系统中已 font-family属性可用的值取决于用户系统中已 经安装了的字体， Windows系统的安装目录下 经安装了的字体，在Windows系统的安装目录下 单位的“fonts”文件夹中保存了系统安装的所 单位的“fonts 文件夹中保存了系统安装的所 有字体。 有字体。 font-family属性的参数值可以有几个 属性的参数值可以有几个， font-family属性的参数值可以有几个，在指定 font-family属性的时候 属性的时候， font-family属性的时候，可以同时指定几个字 符集。这样，在浏览器找不到第1 符集。这样，在浏览器找不到第1个字符集的时 候可以按顺序使用第2个字符集显示字体。 候可以按顺序使用第2个字符集显示字体。北京林业大学信息学院

软件开发 程序设计

4. 字体风格font-style属性font-style属性 Normal Italic Oblique 说 明 表示不使用斜体，该参数是 表示不使用斜体，该参数是font-style 属性的默认值 表示使用斜体显示文字 表示使用倾斜幅度不大的斜体显示文 字

北京林业大学信息学院

软件开发 程序设计

5. 字体亮度font-weight属性font-weight属性设置字体的粗体程度，用于决 font-weight属性设置字体的粗体程度， 属性设置字体的粗体程度 定文本以多黑(

或多浅( 显示文本。 定文本以多黑(粗)或多浅(细)显示文本。font-weight属性 Normal Bold Bolder 说 明 表示使用标准字体(没有加深色彩),该参数是 表示使用标准字体(没有加深色彩),该参数是 ), font-variant属性的默认值 属性的默认值 表示使用标准的黑体文本 表示使用比标准黑体还要深的颜色显示文字( 表示使用比标准黑体还要深的颜色显示文字(为 相对参数) 相对参数) 表示使用比标准黑体稍浅的颜色显示文字( 表示使用比标准黑体稍浅的颜色显示文字(为相 对参数) 对参数)北京林业大学信息学院

Lighter

软件开发 程序设计

6. 设置为大写字母font-variant属性fontvariant 属性 Normal 说 明 表示在打印中大写字母没有变化，该参数是 表示在打印中大写字母没有变化， font-variant属性的默认值 属性的默认值

表示设定用大写字母代替文本中的小写字母。 表示设定用大写字母代替文本中的小写字母。 font-variant属性值设置为 属性值设置为small-caps将会 属性值设置为 将会 small-caps 用比主体文本字号小一些的大写字母代替 小写字母

北京林业大学信息学院

软件开发 程序设计

7. 设置字体大小font-size属性font-size属性 整数+“pt” 整数 整数+“%” 整数 Large x-small xx-small x-large xx-large Medium 说 明 表示使用指定的像素大小显示字体， 表示使用指定的像素大小显示字体，“pt”表示像素 表示像素 (如20pt、35pt) 、 ) 表示当前元素使用字体大小是前一个元素大小的百 分倍数( 分倍数(如40%、150%) 、 ) 表示使用比父元素大一号的字体 表示使用字体比small字体小 倍 字体小1.2倍 表示使用字体比 字体小 表示使用字体比x-small字体小 倍 字体小1.2倍 表示使用字体比 字体小 表示使用字体比large字体大 倍 字体大1.2倍 表示使用字体比 字体大 表示使用字体比x-large字体大 倍 字体大1.2倍 表示使用字体比 字体大 表示使用标准字体大小显示北京林业大学信息学院

软件开发 程序设计

8. 文本属性文本属性 letter-spacing Word-spacing vertical-align text-align text-indent inline-height 说 明 设置字母间隔， 设置字母间隔，可以增加或减少字母之间的间距 设置文字间隔。其使用方法和 设置文字间隔。其使用方法和letter-spacing类似 类似 确定一个内部元素的相对于它的上级元素或相对与元素行纵 向位置 作用于块元素，用来设置块中文本的对齐方式，取值为： 作用于块元素，用来设置块中文本的对齐方式，取值为： left(左对齐 、right(右对齐 、center(居中 、justify(两端对齐 左对齐)、 右对齐)、 居中)、 两端对齐) 左对齐 右对齐 居中 两端对齐 设置第一行缩进距离。 设置第一行缩进距离。如：name{text-indent:2em},表示第一 表示第一 行缩进两个

字的长度 控制文本连续行之间的距离， 控制文本连续行之间的距离，可以用来调整文本的垂直线的 距离。 距离。 设置显示文本的字母大小写的显示形式。取值关键字为： 设置显示文本的字母大小写的显示形式。取值关键字为： capitalize,首字母大写；uppercase,所有字母都大写； ,首字母大写； ,所有字母都大写； lowercase,所有字母都小写；none,不改变字母的大小写状 ，所有字母都小写； , 态 声明文本是否有划线，常用来装饰链接。取值关键字为： 声明文本是否有划线，常用来装饰链接。取值关键字为： overline,文本有上划线；line-through,穿过文本的删除线； ,文本有上划线； ,穿过文本的删除线； blink,使文字闪烁；underline,有下划线；none,则是表示 ，使文字闪烁； ,有下划线； 则是表示 没有任何划线。 没有任何划线。

text-transform

text-decoration

北京林业大学信息学院