CSS全稱是cascading style sheets，中文名字叫級聯(lián)樣式單，也叫層疊樣式表。它的好處就是能讓代碼整齊，并且可以批量處理一些樣式。
基本語法：
注釋符：/* */
選擇符：selector {attribute:value} 同一個屬性的值用空格符號隔開，不同屬性用分號隔開。 區(qū)分大小寫。
比如要給頁面中的table定制樣式，則寫table {.....;.....;}
選擇符的使用方法有很多種，于是我又一次懶得打，從網(wǎng)上抄來的：

選擇符模式	說明
*	匹配任意元素。(通用選擇器)
E	匹配任意元素 E (例如一個類型為 E 的元素)。(類型選擇器)
E F	匹配元素 E 的任意后代元素 F 。(后代選擇器)
E > F	匹配元素 E 的任意子元素 F 。(子選擇器)
E:first-child	當(dāng)元素 E 是它的父元素中的第一個子元素時，匹配元素 E 。(:first-child 偽類)
E:link E:visited	如果 E 是一個目標(biāo)還沒有訪問過(:link)或者已經(jīng)訪問過(:visited)的超鏈接的源錨點(diǎn)時匹配元素 E 。(link 偽類)
E:active E:hover E:focus	在確定的用戶動作中匹配 E 。(動態(tài)偽類)
E:lang(c)	如果類型為 E 的元素使用了(人類)語言 c (文檔語言確定語言是如何被確定的)，則匹配該元素。(:lang() 偽類)
E + F	如果一個元素 E 直接在元素 F 之前，則匹配元素 F 。(臨近選擇器)
E[attr]	匹配具有”attr”屬性集(不考慮它的值)的任意元素 E 。(屬性選擇器)
E[attr="warning"]	匹配其“attr”屬性值嚴(yán)格等于“warning”的任意元素 E 。(屬性選擇器)
E[attr~="warning"]	匹配其“attr”屬性值為空格分隔的值列表，并且其中一個嚴(yán)格等于“warning”的任意元素 E 。(屬性選擇器)
E[lang|="en"]	匹配其“l(fā)ang”屬性具有以“en”開頭(從左邊)的值的列表的任意元素 E 。(屬性選擇器)
DIV.warning	僅 HTML。用法同 DIV[class~="warning"]。(類選擇器)
E#myid	匹配 ID 等于“myid”的任意元素 E 。(ID 選擇器)

用到的時候再詳細(xì)解釋吧。
CSS優(yōu)先級：同一個頁面或者css文件里，有時候會對同一個元素有多個定義，這就需要根據(jù)優(yōu)先級來渲染了。優(yōu)先級分為 外部定義樣式的優(yōu)先級與其他樣式的優(yōu)先級。
外部定義樣式的優(yōu)先級：具體怎么算法就不說了，這里單純說結(jié)果：id選擇符>類選擇符>屬性選擇符>偽類選擇符>元素選擇符>偽元素選擇符>全局選擇符>其他
其他樣式定義的優(yōu)先級：文內(nèi)樣式，也就是在元素里面的style=...，這個是最最高級的，優(yōu)先于所有的外部定義樣式。"!important" 這個在不同版本用法有偏差，也就不具體說了，需要的時候查吧。通過繼承得到的樣式：這個是優(yōu)先級最低的樣式。
CSS屬性：請參考http://www.dbjr.com.cn/w3school/css/css_reference.htm (喂這也太不負(fù)責(zé)了吧！摔)
CSS單位: http://www.dbjr.com.cn/w3school/css/css_units.htm (博主你簡直就是個廢柴??！摔！)
(假裝沒聽見)
下面來進(jìn)入應(yīng)用環(huán)節(jié) (￣︶￣)
1.當(dāng)前頁面嵌入css樣式：

2.嵌入css樣式文件：
我們在工程下新建一個css文件夾，然后新建一個css文件，取名為style.css。這樣做是為了代碼能整齊，當(dāng)然因?yàn)檫@里只是個例子于是里面的內(nèi)容我只寫了剛才例子里的東西。


引用的時候也很容易，只需要加一行：
<link rel="stylesheet" type="text/css" href="css/style.css" />
rel指定加入的是css樣式表文件，type指定文件類型，href則是文件的物理地址。
3 動態(tài)修改css樣式。
終于，跟js扯上關(guān)系了。
這個修改的方法無外乎取到元素然后修改屬性。要提的一點(diǎn)是，link的屬性也可以修改。
比如：寫一個link的id是myStyle，然后修改它的導(dǎo)入文件，方法是這樣的：

好的接下來開始XML部分
（博主你的節(jié)操呢？！?。?
xml如果真要詳細(xì)學(xué)可以再開一個系列了。。于是，我們這里就是簡約的說一下。
xml的全稱是：extensible markup language，它的存在時為了更好的，更靈活而廣泛的描述數(shù)據(jù)。他的標(biāo)簽幾乎全部可以由用戶定義。
比如我們要存儲一個關(guān)于書的信息，可以有不同的存儲方式：

xml還有幾個死的規(guī)定：
必須有聲明語句<?xml cersion="1.0"?> 當(dāng)然里面可以有別的比如encoding之類的屬性。
所有的xml以外的元素都必須是封閉的，也就是必須要有/>
屬性值必須包含在引號里。
區(qū)分大小寫
標(biāo)記名字以字母?！癬”，“:”開頭，后面可以跟字母，數(shù)字，句點(diǎn)，冒號，下劃線。
只有一個根節(jié)點(diǎn)。
XPath
XPath是用來在XML文件中查找信息并且定位的語言。它可以遍歷樹中的元素和屬性。
數(shù)是什么大家都懂的，其實(shí)說到這里也就是講講xpath的語法而已。
關(guān)于xpath的語法請看http://www.dbjr.com.cn/w3school/xpath/xpath_syntax.htm
請大致瀏覽上述網(wǎng)頁的“XPath 語法” “XPath 軸” “XPath 運(yùn)算符” 以及參考手冊一欄下的“XPath 函數(shù)”。
大致瀏覽過后，就可以開始這部分的練習(xí)了：
首先給一個xml文件：

（從網(wǎng)站copy來的，復(fù)制請保留權(quán)限。）
在IE和FF中的使用稍有不同，這點(diǎn)比較麻煩，先來IE的：這段代碼中再次重申：script寫在table后面，否則它在編譯js的時候，不知道那句innerText該往哪里加載，因?yàn)檫€沒有渲染到table的地方。完整代碼如下做參考：
XML in IE

接下來是FF的：

xml在FF中的讀取網(wǎng)上的資源很少，我找了好多也沒找到可以讀到結(jié)點(diǎn)值的，于是我用debug在ff瀏覽器下觀察了好久，終于找到了 author.childNodes[0].nodeValue 這一句。
XML文件在firefox瀏覽器下的讀取主要有兩個類實(shí)現(xiàn)，一個是XPathEvaluator, XPathResult。其實(shí)就是用XPathEvaluator查找，然后在XPathResult里存儲查找結(jié)果。可以看到我的代碼里用XPathEvaluator查找的部分，那個函數(shù)evaluate的參數(shù)非常多，但是必須要了解這個函數(shù)才行，摘取下別人的東西（原內(nèi)容點(diǎn)這里）：
函數(shù)：evaluate(xpathText,contextNode,namespaceURLMapper,resultType,result)

參數(shù)	描述
xpathText	表示要計算的 XPath 表達(dá)式的字符串。
contextNode	文檔中，對應(yīng)要計算的表達(dá)式的節(jié)點(diǎn)。
namespaceURLMapper	把一個命名空間前綴映射為一個全稱命名空間 URL 的函數(shù)。 如果不需要這樣的映射，就為 null。
resultType	指定了期待作為結(jié)果的對象的類型，使用 XPath 轉(zhuǎn)換來強(qiáng)制結(jié)果類型。 類型的可能的值是 XPathResult 對象所定義的常量。
result	一個復(fù)用的 XPathResult 對象； 如果你要創(chuàng)建一個新的 XPathResult 對象，則為 null。

注意，resultTypt有很多種參數(shù)值，繼續(xù)抄來：

返回類型	說明
ANY_TYPE	把這個值傳遞給 Document.evaluate() 或 XPathExpression.evaluate() 來指定可接受的結(jié)果類型。屬性 resultType 并不設(shè)置這個值。
NUMBER_TYPE	numbervalue 保存結(jié)果。
STRING_TYPE	stringvalue 保存結(jié)果。
BOOLEAN_TYPE	booleanValue 保存結(jié)果。
UNORDERED_NODE_ITERATOR_TYPE	這個結(jié)果是節(jié)點(diǎn)的無序集合，可以通過重復(fù)調(diào)用 iterateNext() 直到返回 null 來依次訪問。在此迭代過程中，文檔必須不被修改。
ORDERED_NODE_ITERATOR_TYPE	結(jié)果是節(jié)點(diǎn)的列表，按照文檔中的屬性排列，可以通過重復(fù)調(diào)用 iterateNext() 直到返回 null 來依次訪問。在此迭代過程中，文檔必須不被修改。
UNORDERED_NODE_SNAPSHOT_TYPE	結(jié)果是一個隨機(jī)訪問的節(jié)點(diǎn)列表。snapshotLength 屬性指定了列表的長度，并且 snapshotItem() 方法返回指定下標(biāo)的節(jié)點(diǎn)。節(jié)點(diǎn)可能和它們出現(xiàn)在文檔中的順序不一樣。既然這種結(jié)果是一個“快照”，因此即便文檔發(fā)生變化，它也有效。
ORDERED_NODE_SNAPSHOT_TYPE	這個結(jié)果是一個隨機(jī)訪問的節(jié)點(diǎn)列表，就像 UNORDERED_NODE_SNAPSHOT_TYPE，只不過這個列表是按照文檔中的順序排列的。
ANY_UNORDERED_NODE_TYPE	singleNodeValue 屬性引用和查詢匹配的一個節(jié)點(diǎn)，如果沒有匹配的節(jié)點(diǎn)則為 null。如果有多個節(jié)點(diǎn)和查詢匹配，singleNodeValue 可能是任何一個匹配節(jié)點(diǎn)。
FIRST_ORDERED_NODE_TYPE	singleNodeValue 保存了文檔中的第一個和查詢匹配的節(jié)點(diǎn)，如果沒有匹配的節(jié)點(diǎn)，則為 null。

(雖然是抄的，可是復(fù)制神馬的也很辛苦的=w=)

除了這些之外，xml文件結(jié)點(diǎn)其實(shí)還可以增加條件，比如只要第一個符合條件的結(jié)點(diǎn)：

/bookstore/book[1]/title
或者價格高于35的：

/bookstore/book[price>35]/price
之前的例子里不用條件選取是我想示范一下返回所有子結(jié)點(diǎn)的效果，畢竟這才是常用的。



這里提到一個概念叫做XSLT，這是一個用來轉(zhuǎn)換xml文件的語言，全稱是：extensible stylesheet language transformation。XSLT借用XPath在xml文檔中尋找信息，它可以將xml文件中存放的內(nèi)容按照指定樣式顯示為html頁面。

具體有興趣的同學(xué)可以查查看，反正我是沒興趣。。╮(╯▽╰)╭

終于，到了xml的最后一個概念：數(shù)據(jù)島

其實(shí)就是指頁面包含了xml數(shù)據(jù)信息，跟css一樣，可以內(nèi)部鑲嵌，辦法就是<xml>......</xml> 也可以外部引入：<xml src="xml/books.xml"></xml>

xml數(shù)據(jù)島的數(shù)據(jù)與html標(biāo)簽的綁定，通過datasrc, datafld來完成，但是我試來試去也沒有一個代碼能運(yùn)行，于是就暫時這樣吧，等我把代碼弄好再回來補(bǔ)充好了。

最新評論