国产日韩欧美在线观看,欧美超级乱婬视频播放,国产亚洲精品影视在线

主頁(yè) > 知識(shí)庫(kù) > 標(biāo)記語(yǔ)言——精簡(jiǎn)標(biāo)簽

標(biāo)記語(yǔ)言——精簡(jiǎn)標(biāo)簽

點(diǎn)擊這里返回腳本之家　HTML教程　欄目．
上文：標(biāo)記語(yǔ)言——再談清單
原文出處 Chapter 9 精簡(jiǎn)標(biāo)簽
先前我們不斷提到結(jié)構(gòu)化內(nèi)容能夠把結(jié)構(gòu)與設(shè)計(jì)細(xì)節(jié)分類并精簡(jiǎn)標(biāo)簽,該怎么做呢?我們可以使用符合標(biāo)準(zhǔn)的XHTML與CSS代替表格,圖片制作我們所需要的版面.
使用標(biāo)準(zhǔn)技術(shù)制作網(wǎng)站(特別是十分依賴CSS的網(wǎng)站)的時(shí)候,我們常常會(huì)養(yǎng)成一個(gè)不太好的習(xí)慣,就是加上多余的標(biāo)簽和class屬性,技術(shù)完全不需要它們.
通過(guò)在CSS中使用集成選擇器(descendant selectors),我們就能消除多余的<div>,<span>與分類屬性.精簡(jiǎn)標(biāo)簽代表頁(yè)面將能讀取得更快,同時(shí)更容易維護(hù),在這一章中,我們會(huì)討論幾個(gè)完成這項(xiàng)任務(wù)的簡(jiǎn)單做法. 以標(biāo)準(zhǔn)技術(shù)制作網(wǎng)站時(shí),如何精簡(jiǎn)標(biāo)簽?
精簡(jiǎn)標(biāo)簽是個(gè)值得討論的重要話題,制作網(wǎng)站時(shí),用合法的XHTML書(shū)寫(xiě),用CSS設(shè)定展示效果能得到的巨大好處之一,就是精簡(jiǎn)標(biāo)簽.簡(jiǎn)短的代碼代表著下載速度加快,對(duì)于使用56k撥號(hào)上網(wǎng)的用戶來(lái)說(shuō),這絕對(duì)是關(guān)鍵,簡(jiǎn)短的代碼也代表服務(wù)器空間需求,帶寬消耗減少,這能讓老板,系統(tǒng)管理者開(kāi)心.
問(wèn)題在于,單純的確定頁(yè)面符合W3C標(biāo)準(zhǔn)規(guī)范并不代表內(nèi)容所使用的代碼會(huì)縮短,你當(dāng)然能為符合標(biāo)準(zhǔn)的標(biāo)記內(nèi)容加上各種不需要的標(biāo)簽,沒(méi)錯(cuò),他的確符合標(biāo)準(zhǔn),但可能為了讓設(shè)計(jì)CSS的時(shí)候方便一點(diǎn),加了不少多余的代碼.
別怕!這邊有些技巧,讓你能設(shè)計(jì)出簡(jiǎn)潔,有符合標(biāo)準(zhǔn)的標(biāo)記內(nèi)容,但也同時(shí)保留足夠的CSS樣式控制能力.接著讓我們學(xué)習(xí)幾個(gè)精簡(jiǎn)標(biāo)簽的簡(jiǎn)單技巧. 繼承選擇器
在這里我們要看看兩種在個(gè)人網(wǎng)站標(biāo)記側(cè)邊欄(包括信息,鏈接和其他東西)的做法.把所有好東西塞進(jìn)一個(gè)id是"sidebar"的<div>里,以便稍后把它放到瀏覽器視窗中的某一處(第二部分將會(huì)討論CSS布局 / 排版功能). 方法A:高興的分類

<div id="sidebar">
<h3 class="sideheading">About This Site</h3>
<p>This is my site.</p>
<h3 class="sideheading">My Links</h3>
<ul class="sidelinks">
<li class="link"><a href="archives.html">Archives</a></li>
<li class="link"><a href="about.html">About Me</a></li>
</ul>
</div>

我在許多網(wǎng)站上看過(guò)類似方法A的標(biāo)記內(nèi)容,在設(shè)計(jì)者剛發(fā)現(xiàn)CSS的威力的時(shí)候,很容易感動(dòng)過(guò)頭,為每個(gè)想要制定特殊樣式的標(biāo)簽指定class.
以前面這個(gè)例子來(lái)說(shuō),或許我們認(rèn)為<h3>指定class=sideheading是為了幫助它們指定與頁(yè)面之內(nèi)其他標(biāo)題不同的樣式;為<ul>和<li>指定class也是為了同樣的理由. 分類CSS
指定樣式時(shí),假設(shè)我們想讓標(biāo)題變成橘色,使用serif字體,底部加上淺灰色邊線,而"sidelinks"無(wú)序清單則要把小圓點(diǎn)符號(hào)去掉,清單項(xiàng)目改為粗體.
方法A需要的CSS內(nèi)容看起來(lái)會(huì)像這樣:

.sideheading {
font-family: Georgia, serif;
color: #c63;
border-bottom: 1px solid #ccc;
}
.sidelinks {
list-style-type: none;
}
.link {
font-weight: bold;
}

我們能參照標(biāo)記內(nèi)制定的分類名稱(class),為這些標(biāo)簽指定特殊樣式,你甚至能想象頁(yè)面的其他部分也照這個(gè)方式組織: 導(dǎo)航條,頁(yè)尾與內(nèi)容區(qū),每個(gè)標(biāo)簽都加上了雜亂的分類,以便對(duì)它們有完全控制權(quán).
沒(méi)錯(cuò),它的確能運(yùn)作,但是有個(gè)簡(jiǎn)單的做法能夠節(jié)省這些分類屬性(class),同時(shí)讓你的CSS更容易閱讀,更具組織性,接著看方法B. 方法B:自然的選擇

<div id="sidebar">
<h3>About This Site</h3>
<p>This is my site.</p>
<h3>My Links</h3>
<ul>
<li><a href="archives.html">Archives</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>

方法B短小精悍!但是等等,分類都到哪里去了?恩...你很快就會(huì)發(fā)現(xiàn)我們其實(shí)并不是真的需要它們,主要是因?yàn)槲覀儼堰@些標(biāo)簽都塞進(jìn)一個(gè)具有惟一名稱(本例是sidebar)的<div>的關(guān)系.
這就是發(fā)揮繼承選擇器作用的地方了.我們只需要直接以標(biāo)簽名稱指定位于sidebar之內(nèi)的標(biāo)簽,就能去掉這些多余的分類屬性. 以內(nèi)容前后關(guān)系指定CSS
讓我們看看與方法A相同的樣式,但是這次我們用繼承選擇器指定位于sidebar里的標(biāo)簽.

#sidebar h3 {
font-family: Georgia, serif;
color: #c63;
border-bottom: 1px solid #ccc;
}

#sidebar ul {
list-style-type: none;
}

#sidebar li {
font-weight: bold;
}

通過(guò)參考 #sidebar ID,就能為包含在其中的標(biāo)簽指定特殊樣式,舉例來(lái)說(shuō),只有位于<div id="sidebar">之內(nèi)的<h3>標(biāo)簽會(huì)設(shè)定上述的CSS規(guī)則.
這種根據(jù)內(nèi)容前后關(guān)系指定樣式的做法是縮短標(biāo)記內(nèi)容的關(guān)鍵.通常在為內(nèi)容設(shè)計(jì)好語(yǔ)義結(jié)構(gòu)之后,就不必為標(biāo)簽加上分類屬性了. 不止用在側(cè)邊欄
我們只展示了頁(yè)面的一個(gè)段落(就是側(cè)邊欄),不過(guò)這個(gè)做法可以應(yīng)用到整個(gè)頁(yè)面結(jié)構(gòu)上,只要將標(biāo)記內(nèi)容依照邏輯分成幾個(gè)段落(或許是#nav,#content,#sidebar,#footer),然后以繼承選擇器為這個(gè)段落內(nèi)的標(biāo)簽分別制定特殊樣式就可以了.
舉例來(lái)說(shuō),假設(shè)在頁(yè)面內(nèi)的#content與#sidebar段落內(nèi)都用了<h3>標(biāo)簽,并且希望它們都使用serif字體,然而,你希望其中一個(gè)段落的<h3>以紫色顯示,另一個(gè)則是橘色.
這是不需要修改任何標(biāo)簽,加上分類屬性.我們可以通過(guò)一個(gè)全局樣式指定所有<h3>標(biāo)簽共用的規(guī)則,然后用繼承選擇器根據(jù)標(biāo)簽的位置設(shè)定顏色.

h3 {
font-family: Georgia, serif; /* All h3s to be serif */
}
#content h3 {
color: purple;
}
#sidebar h3 {
color: orange;
}

指定所有<h3>標(biāo)簽都使用senif字體,而顏色必須根據(jù)內(nèi)容上下文關(guān)系選擇使用紫色或是橘色,此時(shí)我們不需要重復(fù)共享規(guī)則(這個(gè)例子中是font-family),因此能縮短CSS的內(nèi)容,同時(shí)防止多個(gè)聲明內(nèi)出現(xiàn)重復(fù)的規(guī)則.
我們不僅能減少class屬性需要的額外的標(biāo)記空間,同時(shí)CSS結(jié)構(gòu)也變得更具意義,讓我們更容易閱讀它的內(nèi)容,更容易依照頁(yè)面分段進(jìn)行組織,修改特定的規(guī)則也變得很簡(jiǎn)單,對(duì)龐大,復(fù)雜的排版來(lái)說(shuō)特別明顯,因?yàn)檫@時(shí)你可能會(huì)同時(shí)擁有上百條CSS規(guī)則.
舉例來(lái)說(shuō),在這個(gè)例子中,如果把共享規(guī)則加到每個(gè)聲明中,而稍后想把所有<h3>換成sans serif字體的話,就得修改三個(gè)地方,沒(méi)辦法一次搞定. 越少分類越好維護(hù)
除了減少需要使用的源代碼空間之外,用繼承選擇器代替多余分類還代表了標(biāo)記內(nèi)容未來(lái)易于擴(kuò)展.
舉例來(lái)說(shuō),讓我們假設(shè)你想讓sidebar之內(nèi)的鏈接變成紅色,而不是像頁(yè)面的其余部分那樣使用藍(lán)色,因此你建立了一個(gè)red類,像這樣加到錨點(diǎn)標(biāo)簽中:

<div id="sidebar">
<h3>About This Site</h3>
<p>This is my site.</p>
<h3>My Links</h3>
<ul>
<li><a href="archives.html" class="red">Archives</a></li>
<li><a href="about.html" class="red">About Me</a></li>
</ul>
</div>

而把這些鏈接變成紅色(假設(shè)預(yù)設(shè)的鏈接顏色不是紅色)則需要類似這樣的CSS:

a:link.red {
color: red;
}

這些動(dòng)作沒(méi)什么問(wèn)題,也完全可以正常運(yùn)作,但是如果未來(lái)你改變心意,想把這些鏈接換成綠色的話怎么辦?或者更實(shí)際一點(diǎn),你的老板偶爾說(shuō)了"今年紅色已經(jīng)過(guò)時(shí)了,把這些側(cè)邊欄鏈接換成綠色"!沒(méi)問(wèn)題,你只要修改CSS里的red類就搞定了,但是標(biāo)記內(nèi)容里的class屬性還是red,明顯這不完全符合語(yǔ)義,就跟使用其他顏色當(dāng)作分類名稱一樣.
這不是個(gè)使用顯示效果當(dāng)作分類名稱的好地方,但是完全不指定分類的話,我們能省去許多處理分類的精力(以及代碼),同時(shí)讓內(nèi)容語(yǔ)義更合理,我們倒不如以繼承選擇器選擇這些側(cè)邊欄的鏈接,依照需要指定樣式.
標(biāo)記內(nèi)容和方法B完全相同,而設(shè)定側(cè)邊欄的鏈接所需的CSS將是這樣:

#sidebar li a:link {
color: red;
}

基本上,這代表"只有在<div id="sidebar">之內(nèi)的<li>標(biāo)簽里的使用了href屬性的錨點(diǎn)標(biāo)簽應(yīng)還顯示成紅色".
現(xiàn)在,我們維持了簡(jiǎn)短靈活的標(biāo)記內(nèi)容,而未來(lái)更新只需要用到CSS,不管想讓鏈接變成紅色,綠色,粗體,斜體都沒(méi)問(wèn)題.
接著,來(lái)看看另一個(gè)精簡(jiǎn)標(biāo)簽的做法:消除不必要的<div>標(biāo)簽,直接取用現(xiàn)有的塊級(jí)標(biāo)簽.

上一頁(yè)12 3 下一頁(yè) 閱讀全文

標(biāo)簽：眉山青海崇左北海河池晉中阜陽(yáng) 營(yíng)口

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《標(biāo)記語(yǔ)言——精簡(jiǎn)標(biāo)簽》，本文關(guān)鍵詞標(biāo)記,語(yǔ)言,精簡(jiǎn),標(biāo)簽,標(biāo)記,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。