《第4章 样式语言-CSS.ppt》由会员分享，可在线阅读，更多相关《第4章 样式语言-CSS.ppt（50页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第4章样式语言nXML中内容与表现形式分开，如果想让XML文档以某种样式显示在浏览器上，必须使用样式单文件。4.2层叠样式单CSSn层叠样式单CSS可以定义XML文档中元素的显示效果，包括元素的位置、颜色、背景、边框、字体、排版格式等。nCSS利用规则对元素的显示效果进行定义。nCSS文件就是一组规则的集合，规则中指定元素名称，及该元素的显示样式规则。4.2.1在XML文档中引用CSS样式单n在文档的序言部分使用一条处理指令引用CSS文件n引用式：4.2.2CSS样式规则n样式规则由选择符和样式描述组成。n选择符指定样式规则适用于哪个元素。n样式描述由一组样式属性名和样式属性值组成，用括起来。
2、n格式：选择符样式属性1属性值1；样式属性2属性值2；CSS样式规则选择符n标记名n.类名n标记名.类名nID名n标记名ID名n父标记名子标记名n用逗号分隔的多个选择符n通用选择符*设置样式属性nCSS提供的样式属性包括字体属性（字形、大小、粗细、倾斜等），颜色属性，背景属性，边框属性，文本属性，内容编排，页面排版等。设置样式属性n长度：pt(点)cm(厘米)in(英寸)px(像素)nURL：设置引用地址，将网址用引号括起来n颜色：关键字、十六进制、十进制定义法n关键字：预定义好的字符串代表特定的含义n设置组件显示方式：display属性值有三种：block(分块)、inline(不分块)、n
3、one(不显示)n设置块背景：可以设置背景色，也可以设置背景图案n设置外框：设置边框线的样式、宽度和颜色字体显示属性字体显示属性字体显示属性字体显示属性颜色属性颜色属性nCSS对颜色的取值有两种方式：名称和RGB颜色，并且这些颜色的取值方法适用于CSS所有与颜色有关的属性。n名称方式：CSS能够接受windowsVGA调色板的16种颜色，分别为：aqua（浅绿）、black（黑）、blue（蓝）、fuchsia（紫红）、gray（灰）、green（绿）、lime（酸橙）、maroon（粟）、navy（海蓝）、olive（橄榄）、purple（紫）、red（红）、silver（银）、teal（深
4、青）、white（白）和yellow（黄）。颜色属性nRGB方式：RGB方式可以更加精确的定义需要的颜色而不局限于上面的16种颜色，一般认为颜色可以由三原色，也即红、绿、蓝三种颜色按照一定的比例搭配而成，因此一种颜色可以通过指定这三种分量的值来获得。n指定RGB分量有四种方法：第一，红、绿、蓝三种颜色的分量都使用两位的十六进制数进行表示，比如#0fcff。第二，红、绿、蓝三种颜色的分量是第一种方式的压缩形式，每一个分量只采用一个十六进制数来表示，使用时再把它扩充为两位的十六进制数，比如#c4d扩展为#cc44dd。第三，使用矢量的方式表示，将其表示为rgb(x,y,z)。其中，x，y，z都是介
5、于0-255的整数。第四，也是矢量表示法，但是形式为rgb(x%,y%z%)，将数值变为百分比。背景属性背景属性背景属性文本属性长度单位文本属性文本属性文本属性文本属性版面属性版面属性版面属性版面属性版面属性版面属性版面属性版面属性版面属性6.2 在在XML中使用中使用CSSn6.2.1使用外部CSS文档n6.2.2直接嵌套n6.2.3混合方式n6.2.4多个CSS文件6.2.1 使用外部使用外部CSS文档文档n在XML文档的XML声明语句后加上一个特定的处理指令：n这个指令告诉了浏览器XML文档不使用默认的树状结构示意图作为显示结果，而是采用一个CSS文档规定的格式进行显示。6.2.2 直接
6、嵌套直接嵌套n可以将样式语句与XML语句安排在同一个XML文档中，这是直接嵌套的方法，但是也需要要指明该语句：6.2.3 混合方式混合方式n可以直接将使用外部CSS文件的处理语句与内部CSS语句相结合n如果一个元素既在外部CSS文件中规定了样式，又在内部样式语句中也规定了样式，则需要以内部样式语句为准。6.2.3 混合方式混合方式n例6-2-3-1是使用混合CSS方式的例子，看XML文档，它首先通过处理指令：nn将外部CSS文档6-2-3-1.css文件结合了进来n之后就使用标记将内部CSS语句包含起来：nnfriendnndisplay:block;nborder:1pxsolidblue;
7、ntext-align:center;nbackground-color:rgb(130,145,250);nmargin-bottom:1em;nn6.2.4 多个多个CSS文件文件n可以在一个XML文档中使用多个外部CSS文件来实现样式的定义。使用时，通过适用多个样式处理指令就可以了n多个CSS文件定义的样式冲突时，程序需要进行冲突解决，它会根据处理指令中CSS文件引入的先后顺序来进行处理，后引入的CSS文件的样式恢覆盖前面引入的CSS文件的相同样式规定6.3 在在XML中引入中引入HTML标记标记n6.3.1表格的使用n6.3.2超链接n6.3.3使用图形标记n6.3.4格式控制标记n6
8、.3.5对话组件n6.3.6脚本程序6.3.1 表格的使用表格的使用nnnnShallyn25nBeijingn010-25635684nnnnnMiken28nGuangzhoun020-52634854nnn6.3.1 表格的使用表格的使用n结果图：6.3.2 超链接超链接n在需要添加的元素上加上标记：n元素内容n例如：nBeijing6.3.2 超链接超链接n结果：结果：6.3.3 使用图形标记使用图形标记n通过使用HTML的图形标记，我们也可以使得XML文档具备显示图片的能力。n例如下列语句加入一个图片到一个表格项：6.3.3 使用图形标记使用图形标记n结果：6.3.4 格式控制标记格
9、式控制标记n可以使用HTML的格式控制标记来控制文本的显示，比如使用标记来开始一个段落；使用来换行，使用来绘制一条水平线。6.3.5 对话组件对话组件n对话组件用于接收用户输入的数据信息，比如输入框接收数据，按钮提交用户请求、选择框确定用户选择等等，通常使用HTML的form、TEXTAREA、INPUT等标记来实现这些功能。6.3.6 脚本程序脚本程序n如果仅仅有交互的组件，但是没有脚本程序也是很难实现对页面的动态控制，脚本语言有许多种类，比如JavaScript、C#、VBScript等等，这些脚本语言提供了编写控制页面的程序的功能，能够实现一些简单的逻辑，比如检查输入框字符的正确性、对用
10、户进行提示等等。小结小结n本章主要介绍层叠样式表的相关内容，层叠样式表是描述页面具体显示样式信息的一种语言，它的主要作用是定义标记元素的显示样式，保持样式信息与数据信息的独立。CSS具备独立性、可重用性、准确性和灵活性，构成CSS的要素主要有选择符、类选择符、ID选择符、属性选择符、通用选择符、后继选择符、孩子选择符、兄弟选择符、伪类与伪元素和注释部分。描述样式信息的主体是若干的属性值对。nXML可以直接将CSS语句嵌套在文档本身，或者指定使用的CSS外部文件来使用CSS，也可以将两种方式结合其来使用混合方式来使用CSS。此外还可以使用多个CSS文档来控制文档的显示。XML中可以使用HTML标记，这些HTML标记能够正常发挥样式显示的作用。