XML（4）——CSS装饰XML（1）

利用CSS装饰XML

CSS简介

CSS(Cascading Style Sheets，层叠样式单)可以对XML输出样式进行控制：设置字体、页边距、排列对齐方式等。
CSS现在有三个版本：CSS1，CSS2，CSS3。
在这里插入图片描述

CSS在技术方面的优势

内容与表现分离,有了CSS,网页的内容与表现就可以分开了.
表现的统一,可以使网页的表现统一,并且容易修改.
CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等.
使用CSS可以减少网页的代码量,增加网页的浏览速度,减少硬盘容量.

CSS基本语法

CSS 样式规则由三部分构成：选择器、属性和值：
selector {property: value}
例：

body {
	color: red;
	background: green;
	margin: 0;
	padding: 0;
	font-family: Georgia, Palatino, serif;
}

XML使用CSS样式有两种方式：

外部样式表

<?xml version="1.0" encoding="ISO-8859-1"?> 
<?xml-stylesheet type="text/css" href="cd_catalog.css"?> 
<CATALOG>
       <CD> 
             <TITLE>Empire Burlesque</TITLE> 
             <ARTIST>Bob Dylan</ARTIST>      
             <COUNTRY>USA</COUNTRY>    
             <COMPANY>Columbia</COMPANY> 
             <PRICE>10.90</PRICE>   
             <YEAR>1985</YEAR>    
        </CD> 
        <CD>
             <TITLE>Hide your heart</TITLE>     
             <ARTIST>Bonnie Tyler</ARTIST> 
             <COUNTRY>UK</COUNTRY> 
             <COMPANY>CBS Records</COMPANY>   
             <PRICE>9.90</PRICE> 
              <YEAR>1988</YEAR> 
        </CD>
         . . . . 
</CATALOG>

cd_catalog.css

CATALOG 
 {
    background-color: #ffffff; 
    width: 100%;
 } 
CD 
{ 
   display: block;
   margin-bottom: 30pt;
   margin-left: 0; 
} 
TITLE { color: #FF0000; font-size: 20pt; } 
ARTIST { color: #0000FF; font-size: 20pt; }
COUNTRY,PRICE,YEAR,COMPANY { display: block; color: #000000; margin-left: 20pt; }

内部样式表

<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/css"?>
<student xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
   <HTML:STYLE>
student{
display:block;
background-color:orange;
}
name{
display:line;
font-size:12pt;
color:red;
}
sex{
display:line;
font-size:20pt;
font-style:italic;
}
</HTML:STYLE>
   <name>卫青</name>
   <sex>男</sex>
   <name>杨玉环</name>
   <sex>女</sex>
</student>

CSS与HTML

外部样式表
内部样式表（位于标签内部）
内联样式（在 HTML 元素内部）

      其中，内联样式（在 HTML 元素内部）拥有最高的优先权

元素定位

元素的定位方式position分为绝对定位(absolute)和相对定位(relative) 。

(1) 绝对定位，以上一级元素的左上角为坐标系的原点。
(2) 相对定位，以自己的默认位置为坐标系的原点。

文本显示方式

CSS中所有的元素都有一个元素显示方式，它的取值是block、inline(默认值)、或none。由元素的display属性确定：
block表明该元素出现在自己的方框中，并以换行的形式与其他块分开。
inline表示后面的内容可以接在本行的后面。（默认）
none表示该元素不可见。
list-item表示以列表的形式显示。

 description 
  { 
     display:block; 
     position:relative; 
     left:125; 
     width:340; 
     padding:5; 
}

设置元素大小

CSS通过高度（height）和宽度（width）参数设置元素显示的大小。

字体显示方式

可以设置字体的多种属性，如font-style，font-variant，font-weight, font-size，font-family。

font-family属性用于指定字体名称，属性值使用逗号分隔的字体名称。如果字体名称中出现空格，必须使用双引号将字体括起来，如“Times New Roma”。

在这里插入图片描述

文本控制

用于控制文档的编排，其属性主要有：text-align、text-indent、text-transform、text-decoration、vertical-align，letter-spacing，line-height

text-transform
完全控制字母大小写：
全部大写：h2 {text-transform:uppercase};
全部小写：h2 {text-transform:lowercase};
单词第一个字母大写：
h2 {text-transform:capitalize};
取消所有设定：h2 {text-transform:none};
text-decoration
文字下划线：A:link{text-decoration:underline};
文字上划线：A:link{text-decoration:overline};
文字删除线：A:link{text-decoration:line-through};
文字闪烁：A:link{text-decoration:blink};
不要任何效果：A:link{text-decoration:none}