css網(wǎng)站布局實(shí)錄學(xué)習(xí)筆記第二部分XHTML與CSS基礎(chǔ)
我要評論第二章 XHTML與CSS基礎(chǔ)
2.1 XHTML基礎(chǔ)
XHTML是網(wǎng)頁代碼的核心內(nèi)容，標(biāo)準(zhǔn)XHTML代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a >http://www.w3</a> .org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="<a >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新建文檔</title>
</head></p> <p><body>
</body>
</html>
對于這段代碼，可以分為幾部分來了解：
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 .org/TR/xhtml1/DTD/xhtml1-transitional.dtd">這段代碼以doctype開頭，也成為文檔類型制定代碼，它是XHTML的格式標(biāo)記，用來告訴瀏覽器，代碼是什么類型的。
2. <html></html>標(biāo)簽，代表一個(gè)網(wǎng)頁，是網(wǎng)頁的第一個(gè)標(biāo)簽，表示謂語這對標(biāo)簽之間的內(nèi)容屬于html類型，瀏覽器便將其中的內(nèi)容按html類型進(jìn)行解析。
3. <head></head>標(biāo)簽，指的是網(wǎng)頁的頭部，其中的內(nèi)容主要放置在瀏覽器標(biāo)題欄的名稱，或者其他需要給瀏覽器的信息。其中meta標(biāo)簽告訴瀏覽器，網(wǎng)頁的類型是text/html，并使用utf-8編碼。
4. <body></body>標(biāo)簽，指的是網(wǎng)頁的主體，body中的內(nèi)容都要將被瀏覽器顯示在窗口之中。
CSS代碼就應(yīng)該放置在head標(biāo)簽之中。
2.2 選擇合適的DTD
一個(gè)標(biāo)準(zhǔn)的XHTML文檔，必須以doctype標(biāo)簽作為開始。對于XHTML而言，類型可以使用3種不同的XHTML文檔類型。使用方式如下：
Transitional類型：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 .org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Strict類型：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3 .org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Frameset類型：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3 .org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
從本質(zhì)上講，XHTML DTD要求使用XHTML的各個(gè)標(biāo)簽來定義文檔中所有內(nèi)容的結(jié)構(gòu)，而并非去表現(xiàn)其樣式，因此最終的XHTML編寫方式應(yīng)當(dāng)是使用Strict類型。然而直接使用Strict類型有時(shí)會(huì)使編碼方式變得過分狹窄，所有一般情況下都使用Transitional類型。
2.3 選擇合適的標(biāo)簽
1. 布局
div標(biāo)簽是布局標(biāo)簽的首選，頁面中的每一個(gè)區(qū)域，比如頁頭、頁腳、左分欄、右分欄等，都可以使用div進(jìn)行標(biāo)識(shí)。記住一句話：用div布局，用css控制！
2. 文本
XHTML中提供了很多豐富的標(biāo)簽，用于進(jìn)行文本排版，比如h1-h6標(biāo)簽等。
3. 圖片及其他對象
HTML中就存在img標(biāo)簽，以及插入Flash時(shí)常常用到的object標(biāo)簽，他們都可以用于圖片及對象的插入。
4.列表元素
列表元素除了應(yīng)用在列表型內(nèi)容中外，也可以作為導(dǎo)航設(shè)計(jì)。XHTML提供了包含ul、ol、li、dl、dt、dd等在內(nèi)的幾種列表標(biāo)簽。
另外還有用于表單的form、input、select以及表格所用的標(biāo)簽等，這里僅列出了一部分標(biāo)簽。在表格式布局中，并沒有經(jīng)常用到，而在CSS布局中，它們將會(huì)是頁面標(biāo)簽的主力。
2.4 給CSS留下接口
CSS是通過使用XHTML中的id與class屬性來控制的。id可以理解為對象的名稱，而class則可以理解為對象的類型或歸屬。例如：
定義一個(gè)id為content的p標(biāo)簽：<p id="content"></p>
在CSS中使用： #content {...}
這樣的形式便可以為p對象編寫樣式，即使頁面有多個(gè)p標(biāo)簽，只要他們的id不同，便可以分別為他們編寫不同的樣式代碼。在XHTML中，對于每個(gè)頁面上，同樣的id名稱只能使用一次，不允許使用重復(fù)的id名稱，這正是命名的唯一性。
同樣，class屬性也可以用相同的方式，比如：
<span class="blue"></span>
class的主要用途就是對應(yīng)于CSS樣式，class名稱在頁面中則允許重復(fù)使用。也就是說，痛一樣式可以用在多個(gè)XHTML對象之中。
2.5 良好的XHTML編寫習(xí)慣
XHTML與HTML的區(qū)別，其中最明確的一點(diǎn)就是，XHTML比HTML語法要求更嚴(yán)格。這些規(guī)則主要表現(xiàn)在以下幾個(gè)方面：
屬性名稱必須小寫
屬性值必須使用雙引號(hào)
不允許使用屬性簡寫
使用id替代name
必須使用結(jié)束標(biāo)簽
2.6 CSS語法結(jié)構(gòu)
將CSS應(yīng)用到XHTML之中，首先要做的就是選用合適的選擇符，選擇符是CSS控制XHTML文檔中對象的一種方式。簡單地說，它用于告訴瀏覽器，這段樣式將應(yīng)用到哪個(gè)對象。
2.6.1 CSS屬性與選擇符
CSS的語法結(jié)構(gòu)僅由3個(gè)部分組成：選擇符(Selector)、屬性(Property)和值(Value)。
使用方法： Selector {Property: Value;}
選擇符(Selector)又稱選擇器，指這組樣式編碼所針對的對象，可以是一個(gè)XHTML標(biāo)簽，也可以是定義了特定id或class的標(biāo)簽。
屬性 (Property)是CSS樣式控制的核心，對于每個(gè)XHTML標(biāo)簽，CSS都提供了豐富的樣式屬性。
值(Value)指屬性的值，形式有兩種，一種是制定范圍的值，另一種為數(shù)值。
在實(shí)際應(yīng)用中，往往使用以下的類型的應(yīng)用形式：
body {background-color: blue;}
它表示選擇符為body，即選擇了頁面中的<body>標(biāo)簽，屬性為background-color，這個(gè)屬性用于控制對象的背景色，其值為blue。
除了對單個(gè)屬性的定義，同樣可以為單個(gè)標(biāo)簽定義一個(gè)或者多個(gè)屬性，每個(gè)屬性之間使用分號(hào)隔開。例如：
p {
text-align: center;
color: black;
font-family: arial;
}
同樣，一個(gè)id或class也能通過相同的形式編寫樣式。
2.6.2 類型選擇符
上面的body {}便是一種類型選擇符。類型選擇符是指以網(wǎng)頁中已有的標(biāo)簽名作為名稱的選擇符。如：body{}、div{}、span{}等。
2.6.3 群組選擇符
除了可以對單個(gè)XHTML對象進(jìn)行樣式指定外，同樣可以對一組對象進(jìn)行相同的樣式指派。例如：
h1, h2, h3, p, span {
font-size: 12px;
font-family: arial;
}
使用逗號(hào)對選擇符進(jìn)行分隔，使得頁面中所有的h1, h2, h3, p, span都將具有相同的樣式定義。這樣做的好處是，對頁面中需要使用相同樣式的地方，只需書寫一次樣式表即可，從而減少代碼量，改善CSS代碼的結(jié)構(gòu)。
2.6.4 包含選擇符
當(dāng)只打算對某個(gè)對象的子對象進(jìn)行樣式指定時(shí)，包含選擇符就派上用處了。包含選擇符指選擇符組合中前一個(gè)對象包含了后一個(gè)對象，對象之間使用空格作為分隔符。例如：
h1 span {
font-weight: bold;
}
對h1下面的span進(jìn)行了樣式指派，h1標(biāo)簽下的span標(biāo)簽將被應(yīng)用font-weight: bold的樣式設(shè)置。值得注意的是，僅僅對有此結(jié)構(gòu)的標(biāo)簽有效，而對單獨(dú)存在的h1或者span以及其他非h1標(biāo)簽下屬的span則均不會(huì)應(yīng)用到此樣式。
包含選擇符除了可以二者包含，也可以多級(jí)包含，但是為了代碼清晰，可讀性高，一般不提倡這樣做。
2.6.5 id及class選擇符
id及class均是CSS提供由用戶自定義標(biāo)簽名稱的選擇符，用戶可以使用選擇符id及class來對頁面中的XHTML標(biāo)簽進(jìn)行自定義名稱。
2.6.6 標(biāo)簽指定式選擇符
如果既想使用id或class，也想同時(shí)使用標(biāo)簽選擇符，那么可以使用如下格式：
h1#content {}: 表示針對所有id為content的h1標(biāo)簽進(jìn)行指派。
h1.p1 {}: 表示針對所有class為p1的h1標(biāo)簽進(jìn)行定義。
標(biāo)簽指定式選擇符在對標(biāo)簽選擇的精確度上介于標(biāo)簽選擇符及id/class選擇符之間。
2.6.7 組合選擇符
對于上述所有CSS選擇符而言，無論什么樣的選擇符，均可以進(jìn)行組合使用。比如：
h1 .p1 {}: 表示h1標(biāo)簽下的所有class為p1的標(biāo)簽。
#content h1 {}: 表示id為content的標(biāo)簽下的所有h1標(biāo)簽。
h1 .p1, #content h1 {}: 對以上二者進(jìn)行群組選擇。
h1#content h2 {}: 表示id為content的h1標(biāo)簽下的h2標(biāo)簽。
2.6.8 偽類及偽對象
偽類及偽對象是一種特殊的類和對象，它由CSS自動(dòng)支持，屬CSS的一種擴(kuò)張型類和對象。偽類及偽對象的名稱不能被用戶自定義，使用時(shí)只能夠按標(biāo)準(zhǔn)格式進(jìn)行應(yīng)用。
偽類及偽對象由以下兩種形式組成：
選擇符 指偽類
選擇符 指偽對象
CSS內(nèi)置了幾個(gè)標(biāo)準(zhǔn)的偽類，可用于樣式定義。
除了鏈接樣式控制的:link, :hover, :active, :visited幾個(gè)偽類之外，其他偽類及偽對象在實(shí)際使用中并不常見。
2.6.9 通配選擇符
通配是指使用字符來替代不確定的內(nèi)容。所謂通配選擇符，就是指可以使用模糊制定的方式來對對象進(jìn)行選擇。CSS通配選擇符可以使用*作為關(guān)鍵字，使用方法如下：
* {
color: blue;
}
*號(hào)表示所有對象，包含所有id及class的XHTML標(biāo)簽。使用如上選擇符進(jìn)行樣式定義時(shí)，頁面中的所有對象都會(huì)應(yīng)用color: blue;來設(shè)置字體的顏色。
注：CSS選擇符的優(yōu)先級(jí)：記住一句話，控制越精細(xì)，優(yōu)先級(jí)越高！
2.7 CSS數(shù)據(jù)單位
CSS提供了許多類型的數(shù)學(xué)單位，以便幫助設(shè)計(jì)師進(jìn)行數(shù)值的定義。
2.8 應(yīng)用CSS到網(wǎng)頁中
2.8.1 行間樣式表
行間樣式表是指將CSS樣式編碼寫在XHTML標(biāo)簽之中，類似如下格式：
<h1 style="font-size: 12px; color: #000FFF; font-weight: normal">...</h1>
在此極力反對這樣做。罕見樣式表僅僅是XHTML標(biāo)簽對style屬性的支持，并不符合表現(xiàn)與內(nèi)容分離的設(shè)計(jì)原則。因此應(yīng)當(dāng)完全杜絕這種CSS編寫方式。此方法只是在需要調(diào)試CSS樣式的時(shí)候，臨時(shí)使用還行。
2.8.2 內(nèi)部樣式表
內(nèi)部樣式表與行間樣式表的相似之處在于，都是將CSS樣式代碼寫在頁面之中。不同的是，前者可以將樣式表統(tǒng)一放置在一個(gè)固定位置上。將CSS代碼寫在<style>標(biāo)簽內(nèi)。
內(nèi)部樣式表是CSS樣式編碼的初級(jí)應(yīng)用形式，但不是推薦的編寫方式，它只能針對當(dāng)前頁面有效，不能跨越頁面執(zhí)行，因此達(dá)不到CSS代碼重用的目的。
2.8.3 外部樣式表
外部樣式表是CSS應(yīng)用中最好的一種形式，它將CSS樣式代碼單獨(dú)放在一個(gè)外部文件中，再由網(wǎng)頁進(jìn)行調(diào)用。多個(gè)網(wǎng)頁可以調(diào)用同一個(gè)樣式表文件，這樣能夠?qū)崿F(xiàn)代碼的最大限度重用及網(wǎng)站文件的最優(yōu)化配置，這是最為推薦的編碼方式。
<link rel="stylesheet" href="xxx.css" tyle="text/css" />
通過在XHTML代碼中，在<head>下使用<link>標(biāo)簽來調(diào)用外部樣式表文件。將link制定為stylesheet方式，并使用href=""指明樣式表文件的路徑。
2.9 樣式優(yōu)先權(quán)問題
由于存在3中不同的樣式表導(dǎo)入方式，以及各種種類繁多的樣式選擇符。因此，在CSS設(shè)計(jì)中，樣式優(yōu)先問題不容忽視。
2.9.1 寫法優(yōu)先權(quán)
從樣式寫入的位置來看，它們的優(yōu)先級(jí)依次是：
行內(nèi)樣式表
內(nèi)部樣式表
外部樣式表
也就是說，在相同的CSS定義情況下，使用style定義的XHTML標(biāo)簽之中的樣式，其必然優(yōu)先于寫在<style>之間的樣式定義。其次或者說最后才是對外部樣式表調(diào)用及應(yīng)用。
2.9.2 選擇符優(yōu)先權(quán)
對于id與class而言，id的定義優(yōu)先于class的定義。
2.9.3 樣式繼承
XHTML中的子標(biāo)簽會(huì)繼承部分父標(biāo)簽的樣式特征。當(dāng)然有些樣式不會(huì)被繼承，比如：margin、padding等。
2.9.4 !important語法
在兩行相同類型的CSS樣式定義中，往往優(yōu)先執(zhí)行后面一個(gè)：
div {
background-color: red;
background-color: green;
}
但是可以通過!important語法，提升某一句樣式表的重要性，使其優(yōu)先實(shí)行!important標(biāo)注的語句：
div {
background-color: red; !important
background-color: green;
}
這樣，div的背景色將被設(shè)計(jì)為紅色。
樣式優(yōu)先權(quán)問題從CSS的專業(yè)術(shù)語上來說，可被稱之為層疊和特殊性，這也是CSS的全稱為層疊樣式表的原因之一。
2.10 代碼注釋
在良好的CSS編碼習(xí)慣中，注釋是很重要的一環(huán)。其樣式代碼的注釋為：/*...*/
相關(guān)文章
HTML5與CSS3設(shè)計(jì)模式 中文版 高清PDF掃描版[43MB完整版]
HTML5與CSS3設(shè)計(jì)模式是一部全面講述用HTML5和CSS3設(shè)計(jì)網(wǎng)頁的教程。適合具有HTML和CSS基礎(chǔ)的讀者學(xué)習(xí)參考2015-08-03精通CSS與HTML設(shè)計(jì)模式 PDF中文版
《精通CSS與HTML設(shè)計(jì)模式》是一部非常實(shí)用的CSS 與HTML（XHTML）解決方案手冊。書中包含了350 多種可以立即使用的設(shè)計(jì)模式（涉及文本、背景、邊框、圖片、表格、布局等多方2009-09-08HTML5 video標(biāo)簽（播放器）學(xué)習(xí)筆記（一）:使用入門
這篇文章主要介紹了HTML5 video標(biāo)簽（播放器）學(xué)習(xí)筆記（一）:使用入門,本文講解了使用標(biāo)簽、比如播放視頻的路徑、是否顯示控制條、讓視頻自動(dòng)播放或自動(dòng)加載、讓播放器規(guī)2015-04-24HTML5學(xué)習(xí)筆記之History API
這系列文章主要是學(xué)習(xí)Html5相關(guān)的知識(shí)點(diǎn)，以學(xué)習(xí)API知識(shí)點(diǎn)為入口，由淺入深的引入實(shí)例，讓大家一步一步的體會(huì)"h5"能夠做什么，以及在實(shí)際項(xiàng)目中如何去合理的運(yùn)用達(dá)到使用自2015-02-26html5中canvas學(xué)習(xí)筆記2-判斷瀏覽器是否支持canvas
判斷瀏覽器是否支持canvas,本人搜集整理了一些使用方法，感興趣的朋友可以了解下2013-01-06html5中canvas學(xué)習(xí)筆記1-畫板的尺寸與實(shí)際顯示尺寸
在canvas中當(dāng)在canvas上寫width和height時(shí)為canvas的實(shí)際畫板大小，默認(rèn)情況下width為300px，height為150px,接下來詳細(xì)介紹，感興趣的朋友可以參考下2013-01-06HTML設(shè)計(jì)模式日常學(xué)習(xí)筆記整理
本周沒有項(xiàng)目做，一直都在研究html設(shè)計(jì)模式，現(xiàn)將我這周的學(xué)習(xí)成果整理分享給大家供大家參考2015-11-17
