資源描述：
《divcss網(wǎng)頁(yè)布局初級(jí)入門系列教程-1》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫(kù)。
1、第一天 XHTMLCSS基礎(chǔ)知識(shí)歡迎大家學(xué)習(xí)《十天學(xué)會(huì)web標(biāo)準(zhǔn)》，也就是我們常說(shuō)的DIV+CSS。不過(guò)這里的DIV+CSS是一種錯(cuò)誤的叫法，建議大家還是稱之為web標(biāo)準(zhǔn)。學(xué)習(xí)本系列教程需有一定html和css基礎(chǔ)，也就是指您之前做過(guò)網(wǎng)頁(yè)，會(huì)用表格布局。如果您剛開始學(xué)習(xí)網(wǎng)頁(yè)制作，不知道什么是表格布局及html和css，建議您先去充電，否則學(xué)習(xí)本教程會(huì)非常吃力或者根本就聽不懂。由于時(shí)間關(guān)系，本教程只講解一些基礎(chǔ)知識(shí)，讓您從原來(lái)的表格布局跨入到web標(biāo)準(zhǔn)（div+css）布局，會(huì)使用web標(biāo)準(zhǔn)制作出常見的頁(yè)面，這也達(dá)到了本教程的目的。本教程多以實(shí)例形式循序漸進(jìn)講解，實(shí)例涉及到
2、哪些關(guān)鍵點(diǎn)或難點(diǎn)就講解什么，較少講解概念。因?yàn)楦拍钸@些東西很難說(shuō)明白，或者說(shuō)明白你也不一定能聽懂，聽懂了也不一定能理解。所以把概念留給大家以后再深入研究。由于章節(jié)關(guān)系，沒有把css和csshack單獨(dú)分出，只是在用到的時(shí)候穿插入講解了。html基礎(chǔ)和css基礎(chǔ)只在第一節(jié)中介紹了幾點(diǎn)重要的。下面我們開始第一天的學(xué)習(xí)一、xhtmlcss基礎(chǔ)知識(shí)首先說(shuō)一下我們這節(jié)課的知識(shí)點(diǎn)1.文檔類型2.語(yǔ)言編碼3.html標(biāo)簽4.css樣式5.css優(yōu)先級(jí)6.css盒模型組成1）文檔類型當(dāng)我們用dreamweaver新建一下html格式文檔時(shí)，查看源代碼，會(huì)發(fā)現(xiàn)代碼最上部有如下這句話：
3、OCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">這句話標(biāo)明本文檔是過(guò)渡類型，另外還有框架和嚴(yán)格類型，目前一般都采用過(guò)渡類型，因?yàn)闉g覽器對(duì)XHTML的解析比較寬松，允許使用HTML4.01中的標(biāo)簽，但必須符合XHTML的語(yǔ)法。許多朋友在制作頁(yè)面時(shí)，往往喜歡把這句刪除掉，在這里建議大家一定要保留這句話，刪除它后可能引起某些樣式表失效或其它意想不到的問(wèn)題。2）語(yǔ)言編碼接下來(lái)我們還會(huì)發(fā)現(xiàn)這樣一句話：4、http-equiv="Content-Type"content="text/html;charset=gb2312"/>它標(biāo)示文檔的語(yǔ)言編碼。就像我們平時(shí)所說(shuō)的漢語(yǔ)、英語(yǔ)一樣。這里的gb2312告訴瀏覽器，本文檔采用簡(jiǎn)體中文編碼；還有一種常用的編碼是UTF-8編碼，它是國(guó)際通用的編碼。不管我們采用哪種編碼，有一點(diǎn)就是包含的css樣式表和其它文件也必須和本文檔的編碼一樣，要不就會(huì)出現(xiàn)亂碼。?3）html標(biāo)簽html標(biāo)簽在頁(yè)面中都必須結(jié)束。成對(duì)的標(biāo)簽以“/標(biāo)簽名”結(jié)束，有些單一的標(biāo)簽在本身的結(jié)尾打上/來(lái)結(jié)束，這是xhtml代碼編寫的規(guī)范。成對(duì)的標(biāo)簽：
{...}<
5、/head>
{...}
{...}
{...}{...}
......單一的標(biāo)簽：
.......還需說(shuō)明一點(diǎn)的是按xhtml規(guī)范，標(biāo)簽必須用小寫。4）css樣式加載css樣式有以下四種§外部樣式§內(nèi)部樣式§行內(nèi)樣式§導(dǎo)入樣式
這種形式是把css單獨(dú)寫到一個(gè)css文件內(nèi)，然后在源代碼中以link方式鏈接。它的好處是不但本頁(yè)可以調(diào)用，其它頁(yè)面也可以調(diào)用，是
6、最常用的一種形式。這種形式是內(nèi)部樣式表，它是以結(jié)尾，寫在源代碼的head標(biāo)簽內(nèi)。這樣的樣式表只能針對(duì)本頁(yè)有效。不能作用于其它頁(yè)面。內(nèi)部樣式
這種在標(biāo)簽內(nèi)以style標(biāo)記的為行內(nèi)樣式，行內(nèi)樣式只針對(duì)標(biāo)簽內(nèi)的元素有效，因其沒有和內(nèi)容相分離，所以不建議使用。@importurl("/css/global.css");鏈接樣式是以@importurl標(biāo)記所鏈接的外部樣式表，它一般常用在另一個(gè)樣式表內(nèi)部。如layout.css為主頁(yè)所
7、用樣式，那么我們可以把全局都需要用的公共樣式放到一個(gè)global.css的文件中，然后在layout.css中以@importurl("/css/global.css")的形式鏈接全局樣式，這樣就使代碼達(dá)到很好的重用性。5）css優(yōu)先級(jí)§id優(yōu)先級(jí)高于class§后面的樣式覆蓋前面的§指定的高于繼承§行內(nèi)樣式高于內(nèi)部或外部樣式§總結(jié)：?jiǎn)我坏?id)高于共用的(class)，有指定的用指定的，無(wú)指定則繼承離它最近的6）css盒模型組成css盒模型是本節(jié)教程的重點(diǎn)。前面幾個(gè)知識(shí)點(diǎn)，如果您會(huì)用表格布局的話，就非常好理解和掌握了。這里
