标签（空格分隔）： 学习笔记
XML为存储结构化数据提供了强大的方法，但是它没有提供关于数据如何显示地信息，（数据的结构与数据表示无关）。可以使用CSS来控制XML文档中各元素的呈现方式。
CSS语法
又三部分构成：选择器（selector）、属性（property）、属性值（value），基本语法个数如下：
selector {
property1: value;
property2: value;
property3: value;
}
虽然在CSS中是不区分大小写的，但是在XML中区分，如Name，NAME，name都会被CSS视为同一个元素，这样就无法为这些元素分别设置不同的属性。因此应该设置完全不一样的名称来进行区分。
CSS选择器
类选择器
定义一：与元素不相关的类选择器的定义
.Class {
property1: value;
property2: value;
...
}
定义二：与元素相关的类选择器的定义
Tag.Class {
property1: value;
property2: value;
...
}
ID选择器
在HTML或XML文档中，往往需要唯一地标识一个元素，赋予它一个ID标识，以便在对整个文档进行处理时能够就快的找到这个元素。
定义一：与元素不相关的标识选择器的定义方法
#ID {
property1: value;
property2: value;
...
}
定义二：与元素相关的标识选择器的定义方法
Tag#ID {
property1: value;
property2: value;
...
}
CSS属性
显示属性
在CSS中，通常使用display属性来控制浏览器元素的文字显示效果。
| display属性值 | 说明 |
|---|---|
| block | 将元素以块方式显示，通过换行与其他元素分开显示 |
| inline | 在同一行显示元素 |
| none | 隐藏元素，使元素在页面中不可见 |
| list-item | 以列表方式显示元素 |
CSS规定display属性是不能别子元素继承的，所以如果将父元素的display属性设定为block，不等于其为子元素设定了该属性。但也有两种特殊情况：
- 如果将父元素的display属性设定为none,则子元素实际上继承了none的属性设定，因为当父元素被隐藏起来时，所有的子元素将同时被隐藏；
- 父元素的inline属性值也会被子元素继承，因为IE浏览器默认以inline方式显示元素内容。
示例:
-
新建一个xml文件：
employee.xml，内容如下：张涛 男 18 开发部 李雪萍 女 34 销售部 傅嘉祺 女 19 人事部 -
新建一个css文档：
employee.css, 内容如下：Employee {
display: block;
margin-top: 16pt;
}
name {
font-weight: bold;
}
Employee#1 {
font-size: 25pt;
font-style: italic;
}
Employee#2 {
font-size: 20pt;
font-style: bold;
}
department {
display: none;
}
字体(font)属性的设置
| font的子属性 | 说明 | 取值 |
|---|---|---|
| font-family | 设置文字的字体 | 宋体，黑体，楷体_gb2312 |
| font-style | 设置文字的字形 | normal, italic, oblique |
| font-weight | 设置文字的粗细 | normal, bold, bolder, lighter |
| font-variant | 设置文字字母的大小写 | normal, small-caps |
| font-size | 设置文字的大小 | small, medium, large / pt, cm, in... |
边框属性的设置
- border-style: 设置边框四周的样式；
- none, dotted, dashed(边框线为虚线), solid, double, groove(设置边框有3D效果), inset(设置边框线具有沉入的效果), outset(设置边框线有浮出的效果)。
- border-color:
- 取值为颜色的英文名或RGB值，默认时边框和元素的颜色相同；
- border-width:
- thin, medium, thick
布局属性的设置
- 定位属性：通过CSS的定位属性可以设置元素的位置、宽度和高度；
- top, bottom, left, width, height, right;
- margin属性：默认情况下，CSS中元素的页边距为0；
- margin(同时设置元素上下左右边界的距离), margin_top, margin_bottom, margin_left, margin_right;
- padding属性：在边框属性设置完成后，元素与边框的距离可能会出现过于接近的情况，通过设置padding属性使得边框与元素之间的距离不会太靠近;
- padding, padding_top, padding_bottom, padding_left, padding_right;
背景属性的设置
| background的子属性 | 说明 | 取值 |
|---|---|---|
| backgroung-color | 设置元素的背景颜色 | 颜色的英文名或RGB值 |
| background-image | 设置元素的背景图像 | none, URL, 文件名(与CSS处于同一个目录下) |
| background-repeat | 设置元素背景图像的重复样式 | repeat, repeat-x(水平方向重复平铺), no-repeat |
| background-attachment | 设置元素背景图像是否与元素内容一起滚动 | scroll, fixed |
| background-position | 设置元素背景图像相对于文字的位置 | background-position-horizontal, background-position-vertical(top, center, bottom, left, right) |
文本属性的设置
CSS中，元素文字的间距、行高、实现字母的大小写转换以及为文字添加各种修饰等。
| 设置文本的属性 | 说明 | 取值 |
|---|---|---|
| letter-spacing | 设置元素的字符间距 | 无 |
| vertical-align | 设置元素文本的垂直对齐方式 | baseline, sub(文字以下标显示), super, top, middle, bottom |
| text-align | 设置元素文本的水平对齐方式 | left, center, right, justify(两端对齐) |
| text-transform | 设置元素文本的大小写转换方式 | capitalize(第一个字母大写), uppercase, lowercase, none |
| text-decoration | 设置元素文本的修饰方式 | underline, overline, line-through, blink(文字闪烁), none |
CSS链接
如果不把创建好的CSS链接到XML文件中，则文档中的元素是无法按照样式表的规则在浏览器中显示的。
一般链接
<?xml:stylesheet type="text/css" href="***.css"?>
可以在一个XML文档中使用多条xml:stylesheet语句，达到将多个样式表文件链接的目的。
@import指令
@import url(stylesheetURL);
无需链接的内部CSS
<?xml-stylesheet type="text/css"?>
<根元素 xmlns:HTML="URL">
<HTML:STYLE>
<!--CSS内容-->
</HTML:STYLE>
<!--XML子元素-->
</根元素>
示例：
<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/css"?>
<Employees xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
<HTML:STYLE>
name{
font-weight:bold
}
sex{
font-size:20px
}
age{
font-style:italic
}
</HTML:STYLE>
<Employee>
<name>展涛</name>
<sex>男</sex>
<age>23</age>
<department>开发部</department>
</Employee>
</Employees>