第5章补充Css知识

4. Css的基本用法
语法 selector{ property1: value1 property2: value2 } Selector 是样式定义的选择器，决定对哪些XML 元素或者HTML元素起作用； 花括号里的属性名、属性值用来指定字体、大小、 背景和颜色等；

5. Xml 关联CSS
14：处理层叠
z-index 属性的值来规定一个样式表所在的层： 当样式表之间的显示区域发生重叠时，具有较大 层数的样式表的显示区域将覆盖具有较小层数 的样式表的显示区域。

z-index:10; z-index:5; 例子：层叠.css 层叠.xml
7：设置文本的方式（续）
disc: 圆盘（默认） circle：圆圈 square：方块 decimal：十进制 lower-roman：小写罗马数字 upper-roman：大写罗马数字 lower-alpha：小写英文字母 upper-alpha：大写英文字母 例： student3.css student3.xml
border-top-style:dashed; border-bottom-style:dashed; border-left-style:dashed; border-right-style:dashed;
取值与border-style的取值一致
9：边框（续）

border-right-color等属性：边框的颜色
9：边框（续）

border-right-width等属性：边框的宽度
border-top-width:12; border-bottom-width:12; border-left-width:12; border-right-width:12;

border-right-style等属性：边框的样式
子标记指定的块区域将被包含在父标记指定的块区域 中。 例子：classRoom.css classRoom.xml

7：设置文本的方式（续）

7.2 行方式
name { display:line; } 如果同级别的标记所对应的样式表都是行方式来 显示文本，那么这些行将按照标记的先后顺序首尾相 接。 如果子标记显示方式是line，将被包含在父标记指 定的块区域中。 例：student2.css student2.xml
8：文本样式

line-height属性：文本之间的行距，默认是1， 取值为正数。
line-height:1.5;
注意：如果子标记的样式表不指定文本的样式属性，子 标记就会使用父标记的样式表中的有关文本样式的属 性。 例子：公式.css 公式.xml
9：边框

border-style属性：文本边框
第5章 （补充） 使用CSS显示XML文档
1. 样式单简介




Css（Cascading Style Sheet）级联样式单、 层叠样式单 主要用于控制HTML页面中元素的大小、位置、 背景和颜色等外观； 最初是为HTML文档设计的，但也可以对XML 起作用； Xml文档仅仅保存数据逻辑，样式单负责显示 逻辑，很好地将数据逻辑与显示逻辑分离开
7：设置文本的方式（续）

7.3 列表方式
name { display:list-item; } 如果同级别的标记所对应的样式表都是列表方式 来显示文本，那么这些列表将按照标记的先后独立显 示，项目符号按照先后顺序递增。 如果子标记显示方式是line，将被包含在父标记指 定的块区域中或者成为父标记指定列表的子列表。 List-style-type属性可以更改列表序号的外观：
8：文本样式

text-decoration属性：文本下划线
text-decoration:none; text-decoration:underline; text-decoration:overline; text-decoration:line-through; text-decoration:blink;

vertical-align：设置文本垂直对齐方式
vertical-align:baseline; vertical-align:sub; vertical-align:super; vertical-align:top; vertical-align:text-top; vertical-align:middle; vertical-align:bottom; vertical-align:text-bottom;
font-size:12pt;
注意：如果子标记的样式表不指定文本的字体属性，就 会使用父标记的样式表中的字体属性及属性值。
8：文本样式

text-align属性：文本对齐方式，默认left
text-align:center; text-align:left; text-align:right; text-align:justify;

text-indent属性：文本首行的缩进量，单位是px或pt font-indent:12pt;

text-transformt：设置文本大小写
text-transform:uppercase; text-transform:lowercase; text-transform:capitalize; text-transform:none;
7.1：设置文本的方式（续）

块的位置默认地靠左对齐，可以通过设置 position 属 性的值=absolute 来改变默认对齐方式。
name { display:block; position:absolute; left=100;top=120; width=280;height=120; }
13：设置鼠标的形状

设置鼠标指针运动到文本的显示区域上面时的形状。 cursor:auto; cursor:crosshair; cursor:default; cursor:hand; cursor:move; cursor:e-resize; cursor:ne-resize; cursor:nw-resize; cursor:n-resize; cursor:se-resize; cursor:sw-resize; cursor:s-resize; cursor:w-resize; cursor:text; 例子：鼠标.css 鼠标.xml cursor:wait; cursor:help;
border-style:none; border-style:dotted;点组成的虚线 border-style:dashed;短线组成的虚线 border-style:double; 双线 border-style:groove; 3D沟槽状边框 border-style:ridge; 3D 脊状的边框 border-style:inset; 3D 内嵌边框 border-style:outset; 3D 外嵌边框 border-style:solid; 普通的边框
3. 样式单的优势




表达效果丰富：支持文字和图像的精确定位、 三维层技术以及交互操作等，独立于其他结构 文档； 文档较小：对于同一类标记只需进行一次格式 定义即可； 便于信息检索：显示逻辑与数据逻辑分离，对 于显示细节的描述并不影响文档中数据的内在 结构，有利于网络搜索引擎对文档的搜索； 可读性好：对各种标记的显示进行集中定义， 且定义直观易读；
7：设置文本的方式（续）

7.5 不显示标记中的文本
name { display:none; } 对应name样式表的标记将不显示标记中的文本。
8：字体

font-family属性：字体名称
font-family:Arial; font-family:宋体; font-family:"Time New Roman";

font-style属性：是否使用斜体
font-style:itlic; font-style:normal;

font-variant属性：是否使用小体的大写字母
font-variant:small-caps; font-variant:normal;
8：字体(续）

font-weight属性：字体线条粗细
font-weight:bold; font-weight:normal; font-weight:bolder; font-weight:lighter; font-weight:600; （bold=400，bolder=500，lighter=300 ）

font-size属性：字体大小，单位为pt
margin-top:20; margin-bottom:20; margin-left:10; margin-right:10;
单位是像素
例子：边缘.xml 边缘.css
11：颜色和背景

设置文本的字符颜色和背景颜色
color:rgb(120,225,220); color:red; background-color:rgb(10,225,220); background-color:yellow;
2. 显示XML的两种常用样式表



W3C 给出了两种推荐样式单标准： Css 与 XSL（eXtensible Stylesheet Language，即可 扩展样式语言） CSS对XML文档的可视化布局结构十分有限， 需要借助xml的另外一种样式单XSL； XSLT 功能要比 CSS 强大得多，也更复杂，不 仅定义外观显示，还可以将 xml 文档转换成另 外的文档（XML或Html）
在根元素之前声明：

<?xml-stylesheet href=“样式表的URI" type="text/css"?>