第5章 使用CSS格式XML文档.ppt

《第5章 使用CSS格式XML文档.ppt》由会员分享，可在线阅读，更多相关《第5章 使用CSS格式XML文档.ppt（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、使用CSS格式XML文档XML基础教程讲解内容1.CSS简介2.CSS基本语法3.CSS属性的设置4.CSS的链接5.1.1 CSS的基本知识 CSS(Cascading Style Sheets，层叠样式单)可以对XML输出样式进行控制：设置字体、页边距、排列对齐方式等。它是HTML网页标准语言制定者W3C万维网联盟制定并发布的一个网页排版样式标准，用来对HTML有限的表现功能进行补充。CSS并不是一种程序设计语言，而只是一种用于网页排版的标记性语言，其全部信息都是以纯文本的形式存在一个文档中，因此我们可以利用任何一个文本编辑工具去编写CSS文档。5.1.2 CSS的创建与应用1.建立XML

2、文档XML入门王小明￥32.00第二版XML数据库技术章文锦￥36.00已发行320000册XML语法李大同￥12.00此书可读性极强XML入门王小明$32.00第二版XMLXML入门入门王小明王小明￥32.0032.00第二版第二版5.1.2 CSS的创建与应用bookdisplay:block;margin-top:18px;bookdisplay:block;margin-top:18px;titledisplay:block;titledisplay:block;titlefont-size:12pt;font-weight:bold;titlefont-size:12pt;font-

3、weight:bold;authorfont-size:11pt;font-style:italic;authorfont-size:11pt;font-style:italic;title,author,price,memomargin:8pxtitle,author,price,memomargin:8px2.创建样式表文件?xml:stylesheet type=text/css href=?3.链接样式表到XML文档如何将样式表加入您的网页 或或方法一方法一 链入外部样式表文件链入外部样式表文件 1.链接样式表到XML文档studentdisplay:block;background-

4、color:orange;namedisplay:line;font-size:12pt;color:red;sexdisplay:line;font-size:20pt;font-style:italic;卫青男杨玉环女例5-3方法二方法二 定义内部样式块对象定义内部样式块对象 5.2.1 CSS语法概述1.CSS语句的基本格式 CSS能够针对指定标识定义全新的样式，其基本语法如下所示：选择器属性1:属性值 1;属性2:属性值2 bookdisplay:block;margin-top:18px;bookdisplay:block;margin-top:18px;用于HTML中5.2.1 C

5、SS语法概述2.CSS中的注释3.CSS中字母的大小写filename:book_01.cssfilename:book_01.css/*/*/*/TITLETITLETitleTitletitletitle用于XML中TITLETITLETitleTitletitletitle5.2.1 CSS语法概述4.CSS中属性的继承在CSS中为某个元素所设置的显示格式属性会影响到该元素所包含的所有子元素，除非这些子元素又设置了不同的格式属性。Ex10-7.css ex10-1.xml5.2.2 CSS选择器1.使用多个元素与多个规则一个规则用于多个元素一个元素设置多个规则TITLE,AUTHOR,P

6、RICE,MEMOmargin:8pxTITLE,AUTHOR,PRICE,MEMOmargin:8pxTITLE display:blockTITLE display:blockTITLE font-size:12pt;font-weight:boldTITLE font-size:12pt;font-weight:boldTITLE font-style:italicTITLE font-style:italicTITLE color:blueTITLE color:blue5.2.2 CSS选择器2.使用CLASS属性 具有相同名称的若干个元素分别指定不同的CLASS属性。（例ex10-

7、3.css）3.使用ID属性 具有相同名称的若干个元素分别指定不同的ID属性。（例10-5.css）book.s001font-size:10pt book.s001font-size:10pt book.s002font-size:12pt;font-style:italic book.s002font-size:12pt;font-style:italic book#s001font-size:10pt book#s001font-size:10pt book#s002font-size:12pt;font-style:italic book#s002font-size:12pt;font

8、-style:italic5.2.2 CSS选择器4.使用STYLE属性 可以直接在XML文档中设置元素的显示样式注意要添加：例注意要添加：例ex10-3.xml5.使用上下文选择器 允许在元素名称之前加上父元素的名称，甚至加上父元素之父元素的名称。也就一个包含一个或多个嵌套元素名称的选择器，被称为上下文选择器。规则为：例10-6.css祖元素 父元素.子元素标志属性：属性值；标志属性：属性值；.标志属性：属性值 5.3 CSS属性与属性值1.属性关键字预先定义的属性关键词来设置元素的显示规则 1）属性名称关键字 2）属性值关键字2.尺寸属性值 1）相对尺寸值 em（当前字体中字母m的宽度）e

9、x（当前字体中字母x的宽度）px（像素点）5.3 CSS属性与属性值 2尺寸属性值 2）绝对尺寸值 in（英寸）cm（厘米）mm（毫米）pt（磅）pc（皮卡）3）百分比尺寸值 百分比单位是一个比较特殊的单位，百分比的值是相应属性占该元素的元素（即上一级的百分比）的百分率。5.3.1 CSS属性设置-显示属性block将元素以块方式显示，通过换行与其他元素分将元素以块方式显示，通过换行与其他元素分开显示开显示line在同一行显示元素在同一行显示元素none隐藏元素，使元素在页面中不可见隐藏元素，使元素在页面中不可见list-item以列表方式显示元素以列表方式显示元素/*File Name:bo

10、ok_03.css*/Bookdisplay:block;magrin-top;12pt;font-size:10ptTITLEfont-style:italicAUTHORfont-weight:boldMEMOdisplay:none5.3.2 CSS属性设置-字型属性font-family设置文字的字体设置文字的字体(包括包括”Arial”“Time New Roman”)font-size设置文字的大小设置文字的大小 单位为单位为pt(磅磅)font-style设置文字的字型设置文字的字型（normal italic oblique）font-weight设置文字的粗细设置文字的粗细（

11、normal bold bolder lighter）font-variant 设置文字字母的大小写设置文字字母的大小写(normal small-caps)5.3.3 CSS属性设置-色彩属性color设置文字颜色属性设置文字颜色属性background-color设置背景颜色属性设置背景颜色属性border-color设置边框颜色属性设置边框颜色属性颜色值有下列四种表示方式：颜色名称：例如：red yellow black aqua white16进制色彩控制：例如：#336699RGB值：例如：RGB51，204，0颜色百分比：RGB0%,0%,100%5.3.4 CSS属性设置-边框属

12、性border-style设置边框四周的样式设置边框四周的样式border-color设置边框颜色属性设置边框颜色属性border-width设置整个边框的宽度设置整个边框的宽度border 设置整个边框的样式、颜色和宽度设置整个边框的样式、颜色和宽度如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。如果提供全部四个参数值，将按上右下左的顺序作用于四个边框。5.3.5 CSS属性设置-布局属性1.设置元素位置与大小设置元素位置与大小top设置元素顶端与其他元素的距离设置元素顶端与其他元素的距离bottom

13、设置元素底端与其他元素的距离设置元素底端与其他元素的距离left设置元素左端与其他元素的距离设置元素左端与其他元素的距离right设置元素右端与其他元素的距离设置元素右端与其他元素的距离width设置元素的宽度设置元素的宽度height设置元素的高度设置元素的高度5.3.5 CSS属性设置-布局属性2.margin属性属性margin同时设置上同时设置上.下下.左左.右边界距离右边界距离margin-top设置顶端边界距离设置顶端边界距离margin-bottom设置底端边界距离设置底端边界距离margin-left设置左端边界距离设置左端边界距离margin-right设置底端边界距离设置底

14、端边界距离例（例（5-12.css）3边界属性（边界属性（border）（例）（例border.css）border-styleborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-rightborder-bottomborder-leftborder-color5.3.5 CSS属性设置-布局属性4.padding属性属性padding元素与四周边框的距离元素与四周边框的距离padding-top元素与上边框的距离元素与上边框的距离padding-bottom元素与下周边框的距离元素与下周边框

15、的距离padding-left元素与左周边框的距离元素与左周边框的距离padding-right元素与右周边框的距离元素与右周边框的距离5.3.6 CSS属性设置-背景属性background-color设置背景颜色设置背景颜色background-image设置背景图像设置背景图像background-repeat设置背景图像重复方式设置背景图像重复方式background-position设置背景图像相对于文字的位置设置背景图像相对于文字的位置background-attachment设置背景图像是否与元素内容一起滚动设置背景图像是否与元素内容一起滚动5.3.7 CSS属性设置-文本属性l

16、etter-spacing设置字符间距设置字符间距word-spacing设置单词间距设置单词间距vertical-align设置文本垂直对齐方式设置文本垂直对齐方式text-align设置文本水平对齐方式设置文本水平对齐方式text-indent设置字符缩进设置字符缩进line-height设置文本行高设置文本行高text-transform设置文本大小写转换方式设置文本大小写转换方式text-decoration设置文本修饰设置文本修饰5.4.1 使用一般链接指令当前当前XML文档在显示时需要使用样式表文档在显示时需要使用样式表表示使用表示使用CSS样式表样式表用来指定样式表文件的用来指定样式表文件的URL5.4.2 样式应用说明外部样式表文件外部样式表文件无子元素规则无子元素规则上下文选择上下文选择同级属性冲突同级属性冲突元素无样式规则元素无样式规则采用最后属性设定采用最后属性设定浏览器默认值浏览器默认值继承父元素规则继承父元素规则一般选择器一般选择器内联定义样式内联定义样式vsvs1.2.3.4.5.