XML學習筆記（四）-- 修飾XML文檔的CSS

標簽（空格分隔）： 學習筆記

---

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方式顯示元素內容。

示例:

1. 新建一個xml文件：employee.xml，內容如下：

   張濤 男 18 開發部 李雪萍 女 34 銷售部 傅嘉祺 女 19 人事部

2. 新建一個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>