十天學(xué)會web標準，也就是常(cháng)說的DIV+CSS，不過(guò)div+css是一種錯(cuò)誤的(dí)叫法，建(jiàn)議大家還(huán)是稱之為web標準。
學(xué)習(xí)本係(xì)列教程(chéng)需有一定(dìng)HTML和(hé)css基礎，也(yě)就(jiù)是(shì)指您之(zhī)前(qián)做過網頁，會用(yòng)表(biǎo)格布局(jú)。如果(guǒ)您剛開始(shǐ)學(xué)習網頁製(zhì)作，不(bù)知道什(shí)麼是表格布局及html和css，建(jiàn)議您先去(qù)充(chōng)電，否則學(xué)習(xí)本教(jiào)程會非(fēi)常吃力(lì)或(huò)者根(gēn)本(běn)就(jiù)聽不(bù)懂。
由於時(shí)間關係，本(běn)教程隻講(jiǎng)解一些(xiē)基礎(chǔ)知(zhī)識，讓(ràng)您(nín)從(cóng)原(yuán)來(lái)的表格(gé)布局跨入到(dào)web標(biāo)準（div+css）布(bù)局，會(huì)使(shǐ)用web標(biāo)準製(zhì)作(zuò)出常見(jiàn)的(dí)頁麵，這(zhè)也(yě)達到了本(běn)教程的(dí)目的。
本教程多以實例形(xíng)式(shì)循序漸進(jìn)講解，實(shí)例(lì)涉及到哪(nǎ)些(xiē)關(guān)鍵點或難點就講(jiǎng)解(jiě)什麼，較少講解(jiě)概(gài)念(niàn)。因為概念(niàn)這些(xiē)東(dōng)西很難說明白(bái)，或者(zhě)說(shuō)明白(bái)你(nǐ)也不(bù)一(yī)定能聽懂(dǒng)，聽懂(dǒng)了也(yě)不一(yī)定(dìng)能理(lǐ)解。所(suǒ)以把(bǎ)概念留給(gěi)大(dà)家以後(hòu)再深入研究(jiū)。
由(yóu)於(yú)章(zhāng)節(jié)關係(xì)，沒(méi)有把css和css hack單獨分出(chū)，隻是在用(yòng)到(dào)的時(shí)候穿插(chā)入講(jiǎng)解了。html基礎(chǔ)和(hé)css基礎隻(zhī)在第一節(jié)中介紹了幾(jī)點重要的(dí)。
下(xià)麵我們(mén)開(kāi)始第(dì)一天的學(xué)習
一(yī)，xhtml css基礎知識
首(shǒu)先說(shuō)一(yī)下(xià)我(wǒ)們這(zhè)節(jié)課的(dí)知(zhī)識點(diǎn)
1. 文檔類型 2. 語言編碼 3. html標簽 4. css樣式 5. css優先級 6. css盒模型組成
1）文檔(dàng)類(lèi)型(xíng)
當(dāng)我們(mén)用dreamweaver新(xīn)建一(yī)下(xià)html格式文(wén)檔時(shí)，查看(kàn)源代碼，會發現代(dài)碼最上部有(yǒu)如下這句(jù)話(huà)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這句話標(biāo)明(míng)本(běn)文(wén)檔(dàng)是(shì)過(guò)渡類型(xíng)，另(lìng)外(wài)還有框架和嚴(yán)格類型(xíng)，目(mù)前(qián)一般都(dū)采用過渡類(lèi)型(xíng)，因(yīn)為(wéi)瀏(liú)覽器(qì)對(duì)XHTML的解(jiě)析比較(jiào)寬(kuān)鬆(sōng)，允許(xǔ)使用HTML4.01中的標(biāo)簽(qiān)，但(dàn)必須符(fú)合(hé)XHTML的語(yǔ)法(fǎ)。許(xǔ)多朋(péng)友在製作頁(yè)麵(miàn)時(shí)，往(wǎng)往喜(xǐ)歡(huān)把這句刪除(chú)掉(diào)，在這裏建(jiàn)議大(dà)家一(yī)定(dìng)要保留(liú)這句(jù)話(huà)，刪除它後可能(néng)引(yǐn)起某些(xiē)樣式表(biǎo)失效或(huò)其它(tā)意想不到的問(wèn)題。
2）語言(yán)編碼
接(jiē)下來我(wǒ)們(mén)還(huán)會(huì)發(fā)現這樣(yàng)一(yī)句話：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
它標示文檔的語言編(biān)碼。就像我(wǒ)們平時所說(shuō)的漢(hàn)語(yǔ)，英語一樣。這裏(lǐ)的utf-8告訴(sù)瀏(liú)覽器(qì)，本文(wén)檔(dàng)采用簡體中(zhōng)文(wén)編(biān)碼；還有一種常用(yòng)的編碼(mǎ)是(shì)UTF-8編碼(mǎ)，它是國(guó)際(jì)通(tōng)用的編碼。不管(guǎn)我(wǒ)們(mén)采(cǎi)用哪(nǎ)種編(biān)碼，有一點就是包(bāo)含的(dí)css樣式表和其它文(wén)件也(yě)必須和本(běn)文檔(dàng)的(dí)編碼一(yī)樣，要不(bù)就會出現(xiàn)亂碼。
3）html標簽
html標簽(qiān)在頁(yè)麵(miàn)中(zhōng)都必(bì)須(xū)結束(shù)。成(chéng)對(duì)的標簽以“/標簽(qiān)名(míng)”結(jié)束，有些(xiē)單一(yī)的(dí)標簽在本身的結尾(wěi)打(dǎ)上/來(lái)結(jié)束，這是(shì)xhtml代(dài)碼編(biān)寫的規範(fàn)。
成對的標簽：
<head>{...}</head>
<body>{...}</body>
<div>{...}</div>
<span>{...}</span>
<p>{...}</p>
......
單一的標簽(qiān)：
<img src="" />
<br />
.......
還需(xū)說(shuō)明一點的(dí)是按xhtml規(guī)範(fàn)，標簽必須用小(xiǎo)寫(xiě)。
4）css樣(yàng)式(shì)
加(jiā)載css樣式(shì)有以下四(sì)種
§ 外(wài)部樣式
§ 內部樣式(shì)
§ 行(háng)內(nèi)樣(yàng)式(shì)
§ 導(dǎo)入(rù)樣(yàng)式(shì)
<link href="layout.css" rel="stylesheet" type="text/css" />
這種形(xíng)式是把css單(dān)獨寫到一個(gè)css文件(jiàn)內，然後(hòu)在(zài)源代碼(mǎ)中(zhōng)以link方式鏈(liàn)接。它(tā)的好(hǎo)處是(shì)不但本(běn)頁可以調用，其它頁(yè)麵(miàn)也可以(yǐ)調(tiáo)用，是最常用的一種形式(shì)。
<style>
h2 { color:#f00;}
</style>
這種形式(shì)是(shì)內部(bù)樣式表(biǎo)，它是(shì)以<style>和(hé)</style>結尾，寫(xiě)在源(yuán)代(dài)碼的head標(biāo)簽內。這樣(yàng)的樣(yàng)式表隻能(néng)針對本頁(yè)有效。不(bù)能作(zuò)用於其(qí)它頁麵。
<p style="font-size:18px;">行內樣式</p>
這(zhè)種(zhǒng)在標簽內以style標(biāo)記的(dí)為行(háng)內樣式，行(háng)內樣(yàng)式隻針(zhēn)對標(biāo)簽(qiān)內(nèi)的元(yuán)素有(yǒu)效，因其沒(méi)有和內(nèi)容相分離，所以不建議(yì)使用(yòng)。
@import url("/css/global.css");
鏈(liàn)接樣(yàng)式(shì)是以(yǐ)@import url標記(jì)所鏈(liàn)接的外部樣式表，它一般常(cháng)用在另一個(gè)樣式表內部(bù)。如(rú)layout.css為(wéi)主頁(yè)所用樣式(shì)，那(nà)麼(mó)我(wǒ)們可(kě)以把全(quán)局都需(xū)要用(yòng)的(dí)公共樣(yàng)式放(fàng)到一個(gè)global.css的文(wén)件(jiàn)中(zhōng)，然後(hòu)在(zài)layout.css中以(yǐ)@import url("/css/global.css")的形式(shì)鏈接(jiē)全局樣(yàng)式(shì)，這(zhè)樣就使(shǐ)代(dài)碼達(dá)到(dào)很(hěn)好(hǎo)的(dí)重用性。
5）css優先級(jí)
§ id優先級高(gāo)於class
§ 後麵(miàn)的樣式覆(fù)蓋(gài)前(qián)麵的(dí)
§ 指定(dìng)的(dí)高於繼承
§ 行內樣式高於內部(bù)或(huò)外(wài)部樣式(shì)
§ 總結(jié)：單一的(dí)(id)高(gāo)於共用的(class)，有(yǒu)指定的用指(zhǐ)定的，無指定(dìng)則繼(jì)承離(lí)它最近(jìn)的
6）css盒(hé)模型組成
css盒模型是(shì)本(běn)節(jié)教(jiào)程(chéng)的重點。前麵幾(jī)個知(zhī)識(shí)點，如果您會(huì)用表格(gé)布局(jú)的話(huà)，就(jiù)非常(cháng)好理解和掌握(wò)了。這(zhè)裏(lǐ)的盒(hé)模型是和table布(bù)局的一個(gè)不(bù)同點(diǎn)。學(xué)習web標(biāo)準，首(shǒu)先要(yào)弄(nòng)懂的(dí)就是(shì)這個盒(hé)模(mó)型，這就是DIV排(pái)版的核(hé)心所在。傳統(tǒng)的(dí)表格排(pái)版是通(tōng)過大小(xiǎo)不(bù)一的表(biǎo)格和表(biǎo)格嵌(qiàn)套來(lái)定位排(pái)版(bǎn)網頁內容，改用CSS排版(bǎn)後(hòu)，就是(shì)通過由(yóu)CSS定義的(dí)大小不(bù)一的盒(hé)子(zǐ)和(hé)盒(hé)子嵌(qiàn)套(tào)來編(biān)排(pái)網(wǎng)頁。這種排版方(fāng)式的網頁代(dài)碼(mǎ)簡潔，表現和(hé)內容(róng)相分離(lí)，維護(hù)方(fāng)便，能兼(jiān)容(róng)更多的瀏(liú)覽(lǎn)器，比如(rú)PDA設備(bèi)也能(néng)正(zhèng)常瀏覽(lǎn)。
那麼它(tā)為什(shí)麼叫盒子呢？先說說我(wǒ)們(mén)在(zài)網(wǎng)頁設計中(zhōng)常(cháng)聽(tīng)的(dí)屬性(xìng)名(míng)：內(nèi)容(róng)(content)，填充(chōng)(padding)，邊框(kuàng)(border)，邊界(jiè)(margin)， CSS盒子模(mó)式都(dū)具(jù)備(bèi)這(zhè)些屬性(xìng)。
我(wǒ)們(mén)可(kě)以(yǐ)把(bǎ)它想像(xiàng)成(chéng)現實(shí)中上(shàng)方(fāng)開口的(dí)盒子，然(rán)後(hòu)從正上往下俯視(shì)，邊框相當(dāng)於(yú)盒(hé)子的厚(hòu)度，內容相對(duì)於盒子中所裝物體的空間(jiān)，而填(tián)充(chōng)呢，相(xiāng)當於(yú)為防震而在(zài)盒子內填(tián)充(chōng)的泡(pào)沫，邊(biān)界(jiè)呢相當(dāng)於(yú)在這個盒子周圍(wéi)要(yào)留出一定的空間(jiān)，方(fāng)便(biàn)取(qǔ)出。是(shì)不是(shì)這樣就(jiù)很容易理(lǐ)解盒模(mó)型(xíng)了(liǎo)。
所(suǒ)以整個(gè)盒模型在頁(yè)麵中(zhōng)所占的寬度是由(yóu)左邊界+左(zuǒ)邊框(kuàng)+左填充+內(nèi)容+右(yòu)填充(chōng)+右(yòu)邊(biān)框(kuàng)+右邊界組成，而(ér)css樣式(shì)中weight所定義的(dí)寬度(dù)僅(jǐn)僅是內(nèi)容(róng)部(bù)分的寬度(dù)，這是許(xǔ)多朋(péng)友(yǒu)容易搞混的地方(fāng)
這裏的(dí)邊界我(wǒ)們也(yě)稱之為(wéi)：外(wài)邊(biān)距(jù)，外(wài)補丁(dīng)；填(tián)充也(yě)叫：內邊(biān)距(jù)，內補丁(dīng)。
如果現在您(nín)對(duì)CSS盒模型理(lǐ)解還(huán)不夠透(tòu)徹(chè)，繼續(xù)往(wǎng)下看，後(hòu)來的(dí)章(zhāng)節(jié)會(huì)都會應(yīng)用到(dào)盒模(mó)型實例。
二(èr)，如(rú)何(hé)開(kāi)始(shǐ)學(xué)習(xí)web標準？
1）有HTML和(hé)CSS基礎(chǔ)
學習(xí)本係列(liè)教程前，要求您有一定的html和css基(jī)礎，製作過網頁(yè)，會(huì)用(yòng)表格進行網頁布局(jú)，這樣學(xué)習(xí)起(qǐ)來(lái)才(cái)會很輕(qīng)鬆(sōng)。如果您(nín)對這(zhè)些還(huán)不懂，建(jiàn)議(yì)先(xiān)學習這些知識(shí)，然(rán)後再(zài)來學習本教(jiào)程(chéng)。
2）轉變觀念
在以前(qián)我們(mén)製(zhì)作(zuò)網站時，總(zǒng)是習慣於(yú)先(xiān)考慮(lǜ)外(wài)觀(guān)，顏(yán)色，字體及布局(jú)等所有(yǒu)表現在頁麵(miàn)上的內容(róng)。但外(wài)觀(guān)並不是最重要(yào)的，相(xiāng)反(fǎn)最終用戶在訪問網(wǎng)頁時(shí)的體驗才是優先(xiān)要考慮的(dí)。一個由div＋css布(bù)局且(qiě)結(jié)構良(liáng)好的(dí)頁(yè)麵可以(yǐ)通過(guò)css定(dìng)義成任何外觀(guān)，在任(rèn)何網絡(luò)設備上（包(bāo)括手機(jī)，PDA和計(jì)算(suàn)機）上以任何外(wài)觀(guān)表現(xiàn)出來(lái)，而且(qiě)用div＋css布(bù)局(jú)構建(jiàn)的網頁以夠簡化(huà)代(dài)碼，加快(kuài)顯示(shì)速度。
所(suǒ)以(yǐ)要想學好(hǎo)div＋css，首(shǒu)先要(yào)轉(zhuǎn)變觀念，需要(yào)拋(pāo)棄傳(chuán)統的表格(gé)(Table)布局(jú)方式，采用層(céng)(DIV)布局，並且使(shǐ)用(yòng)層(céng)疊樣(yàng)式(shì)表(biǎo)(CSS)來(lái)實現頁(yè)麵(miàn)的外(wài)觀(guān)。給網(wǎng)站(zhàn)瀏覽(lǎn)者更好的體(tǐ)驗(yàn)。
3）多(duō)動手，多動(dòng)腦
說到(dào)這點(diǎn)，有(yǒu)點小(xiǎo)兒科了，就像(xiàng)我們(mén)上(shàng)小(xiǎo)學時老(lǎo)師常(cháng)常教我(wǒ)們的那樣(yàng)。為什麼我在(zài)這裏(lǐ)也做為一點列出(chū)來呢，我是通過(guò)評論發現(xiàn)，有些(xiē)同學(xué)提(tí)的(dí)問(wèn)題(tí)太沒水(shuǐ)平(píng)了(liǎo)，稍(shāo)微動下腦筋就明(míng)白了(liǎo)，或者自己(jǐ)動(dòng)手一試就(jiù)知(zhī)道了，但(dàn)他就(jiù)懶得(dé)試。舉個(gè)簡單(dān)的例子(zǐ)，拿瀏覽器兼容來(lái)說(shuō)吧，你(nǐ)寫個(gè)樣式之(zhī)後，在(zài)IE和火狐分別打開看一下不(bù)就明(míng)白了(liǎo)，但就(jiù)是不去做(zuò)。還有一個同學留(liú)言(yán)要我把(bǎ)一(yī)個(gè)實(shí)例中的圖(tú)片打包(bāo)發(fā)給他，我一看(kàn)代(dài)碼，就用(yòng)到(dào)一張(zhāng)圖片，無(wú)語(yǔ)了(liǎo)，有你留(liú)言的這個時間，自己也(yě)早把圖片下(xià)載下來了。所以(yǐ)在(zài)這裏告(gào)誡大家(jiā)，一定要(yào)多(duō)動(dòng)手(shǒu)，多動腦，不(bù)要怕麻煩。另外在(zài)學(xué)習(xí)完一節(jié)教程後(hòu)，一定(dìng)要自己做一(yī)遍實例，這(zhè)樣(yàng)能更(gēng)快掌握(wò)。
文章出處(chǔ)：標準之路(lù) 編(biān)輯：楊雨晨思
轉(zhuǎn)載(zǎi)請保留(liú)原文地址(zhǐ): https://antelcom.cn/show-343.html