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

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

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

2.嵌入css樣式文件：
我們?cè)诠こ滔滦陆ㄒ粋€(gè)css文件夾，然后新建一個(gè)css文件，取名為style.css。這樣做是為了代碼能整齊，當(dāng)然因?yàn)檫@里只是個(gè)例子于是里面的內(nèi)容我只寫(xiě)了剛才例子里的東西。


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

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

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

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

接下來(lái)是FF的：

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

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

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

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

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

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

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

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



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

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

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

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

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

最新評(píng)論