ML簡介與CSS3樣式表

XML簡介

XML是由W3C于1998年2月發布的一種可擴標記語言，是一種用于標記數據文件使其具有結構性的標記語言，它被設計用來傳輸和存儲數據。在電子計算機中，標記指計算機所能理解的信息符號，通過此種標記，計算機之間可以處理包含各種的信息比如文章等。它可以用來標記數據、定義數據類型，是一種允許用戶對自己的標記語言進行定義的源語言。它非常適合互聯網傳輸，提供統一的方法來描述和交換獨立于應用程序或供應商的結構化數據，使用XML也可以簡化互聯網的文檔信息傳輸。

XML在語法方面和HTML是一樣的，和HTML不同的是XML是設計用來傳輸和存儲數據，而HTML是設計用來顯示數據，它們都是標準通用標記語言的子集。XML的標簽是沒有預先定義的，需要自己自行定義標簽，所以才被稱為可擴展標記語言。

在XML發布后同年的8月18日，W3C發布了XSLT的草案，1999年11月16日則正式發布XSLT1.0推薦版本。XSMLT是eXtensible Stylesheet Language Transformation(擴展樣式表轉換語言)的縮寫。

XSMLT主要是用于將XML文檔轉換成可以被瀏覽器解析的文檔，例如HTML、XHTML。轉換成瀏覽器解析的文檔之后能讓我們更加直觀地在瀏覽器頁面上查看XML文檔的數據，并且能使用CSS增加樣式效果，例如：

這樣使用XSMLT轉換后要比起直接閱讀XML文檔要更加清晰直觀，這就是XSMLT主要的作用。

但是現在XSMLT已經很少使用了，幾乎淘汰了，而且XML也由于過于笨重，在一些需要輕量級的數據傳輸方面也逐漸比較少使用了，但是XML目前仍在一些數據結構復雜的情況下使用。

文檔結構定義DTD  and  Schema介紹：

DTD：

文檔類型定義(Document Type Definition)是一套為了進行程序間的數據交換而建立的關于標記符的語法規則。它是標準通用標記語言和可擴展標記語言1.0版規格的一部分，文檔可根據某種DTD語法規則驗證格式是否符合此規則。文檔類型定義也可用做保證標準通用標記語言、可擴展標記語言文檔格式的合法性，可通過比較文檔和文檔類型定義文件來檢查文檔是否符合規范，元素和標簽使用是否正確。文件實例提供應用程序一個數據交換的格式。使用各類文檔類型定義是為了讓標準通用標記語言、可擴展標記語言文件能符合規定的數據交換標準，因為這樣，不同的公司只需定義好標準文檔類型定義，就都能依文檔類型定義建立文檔實例，并且進行驗證，如此就可以輕易交換數據，防止了實例數據定義不同等原因造成的數據交換障礙，滿足了網絡共享和數據交互。

內部聲明代碼示例：

外部聲明代碼示例：

HTML里面開頭的DOCTYPE就是引入了一個文檔類型定義文檔：

Schema：

Schema是基于XML的DTD代替者，Schema是更加地嚴格的文檔結構定義。Schem是2001年5月2日成為W3C標準，Schem要更加完善功能也更加強大，也就是類似于DTD的一個升級版。

思維導圖：

CSS3樣式表

CSS3簡介：

CSS3是CSS技術的升級版本，CSS3語言開發是朝著模塊化發展的。以前的規范作為一個模塊實在是太龐大而且比較復雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。

CSS3完全向后兼容，所以沒有必要修改的設計來讓它們繼續運作。網絡瀏覽器也還將繼續支持CSS2。CSS3主要的影響是將可以使用新的可用的選擇器和屬性，這些會允許實現新的設計效果（譬如動態和漸變），而且可以很簡單的設計出現在的設計效果（比如說使用分欄）。

樣式在HTML中的書寫方式：

樣式有三種書寫方式，第一種是直接在style屬性上寫，style里有很多的樣式子屬性，不同的字屬性使用分號分開，示例：

運行結果：

這種寫法適合用于個別標簽需要單獨樣式的情況下，如果好幾個標簽都需要同樣的樣式的話，使用這種寫法就會導致很多重復的代碼，不利于網頁的優化，所以第二種寫法就是在<style>標簽里聲明樣式屬性，之后只要是該樣式里定義的標簽就會統一使用<style>里聲明的樣式，示例：

運行結果：

第三種寫法是在css文件里聲明樣式，這種方式好處是可以共享更多的網頁，因為只需要使用<link>標簽引用這個文件就可以使用文件里聲明的樣式了。示例：

創建一個后綴為.css的文件，將樣式屬性的聲明寫在文件里：

然后在HTML文件里使用<link>標簽引用這個文件：

運行結果：

思維導圖：

樣式選擇器：

并不是所有的標簽都需要使用同一個樣式，而且不是全部標簽都得使用樣式，那么同樣的標簽要使用不同的樣式就需要使用到樣式選擇器了。

在這里介紹幾種較為常用的樣式選擇器：

1. element選擇器，直接寫標簽的名稱，也就是上面使用的那種方式，示例：

運行結果：

1. .class選擇器，要使用這個選擇器的標簽需要使用class屬性引用這個選擇器的名稱，也叫做類樣式，示例：

運行結果，只有使用class屬性引用了選擇器的標簽才會使用這個選擇器里的樣式，這些選擇器都可以寫在css文件里：

1. #id選擇器，要使用這個選擇器的標簽需要使用id屬性來引用這個選擇器的名稱，示例：

運行結果：

在這里要說明一下.class選擇器與#id選擇器的區別：id是唯一的是不可重復的，一個頁面只可以使用一次，class則可以多次引用，一個頁面內可以使用多次。雖然你重復地使用#id選擇器瀏覽器也可以正常解析，有些IDE也不會報語法錯誤，但是當你需要用JavaScript通過id來控制div時就會出現錯誤。

id相當于是一個唯一的標識，用于區分不同的結構和內容，就象×××或名字，如果一個屋子有2個人同名，就會出現混淆。class則是一個樣式，可以套在任何結構和內容上，就象一件衣服。

所以從概念上說就是不一樣的：id是先找到結構/內容，再給它定義樣式；class是先定義好一種樣式，再套給多個結構/內容。

當我們使用#id選擇器時，應當遵循規范的語法不重復地去使用，要明白這兩個選擇器的區別。

錯誤寫法示例：

運行結果：

1. *選擇器，這個選擇器表示給所有的標簽都加上這個選擇器里的樣式：

運行結果：

1. element,element選擇器，使用逗號隔開可以給多個標簽定義樣式，示例：

運行結果：

1. element element選擇器，例如div p，選擇給div內部所有的p標簽定義樣式，示例：

運行結果：

1. element+element選擇器，例如div+p，選擇緊接著在div標簽后的那個p標簽（僅第一個有效），示例：

運行結果：

1. [attribute]選擇器，[]里寫屬性名稱，例如[title]，只要寫有括號里定義的屬性名稱就會使用此選擇器的樣式，示例：

運行結果：

這個選擇器也可以自己定義屬性的名稱，不一定要使用html里的屬性名稱，只要標簽里的屬性名稱和選擇器上定義的屬性名稱相同就可以了，示例：

運行結果：

1. [attribute=value]選擇器，只要標簽里屬性的名稱與值和選擇器里定義的屬性名稱和值相同，就會使用這個選擇器里的樣式，示例：

運行結果：

思維導圖：

CSS3選擇器參考：