客服
XHTML CSS基礎知識-Web標準(div+css)教程
歡迎大家學(xué)習《十天學(xué)會(huì )web標準》，也就是我們常說(shuō)的DIV+CSS。不過(guò)這里的DIV+CSS是一種錯誤的叫法，建議大家還是稱(chēng)之為web標準。
學(xué)習本系列教程需有一定html和css基礎，也就是指您之前做過(guò)網(wǎng)頁(yè)，會(huì )用表格布局。如果您剛開(kāi)始學(xué)習網(wǎng)頁(yè)制作，不知道什么是表格布局及html和css，建議您先去充電，否則學(xué)習本教程會(huì )非常吃力或者根本就聽(tīng)不懂。
由于時(shí)間關(guān)系，本教程只講解一些基礎知識，讓您從原來(lái)的表格布局跨入到web標準（div+css）布局，會(huì )使用web標準制作出常見(jiàn)的頁(yè)面，這也達到了本教程的目的。
本教程多以實(shí)例形式循序漸進(jìn)講解，實(shí)例涉及到哪些關(guān)鍵點(diǎn)或難點(diǎn)就講解什么，較少講解概念。因為概念這些東西很難說(shuō)明白，或者說(shuō)明白你也不一定能聽(tīng)懂，聽(tīng)懂了也不一定能理解。所以把概念留給大家以后再深入研究。
由于章節關(guān)系，沒(méi)有把css和css hack單獨分出，只是在用到的時(shí)候穿插入講解了。html基礎和css基礎只在第一節中介紹了幾點(diǎn)重要的。
下面我們開(kāi)始第一天的學(xué)習
一、xhtml css基礎知識
首先說(shuō)一下我們這節課的知識點(diǎn)
1. 文檔類(lèi)型
2. 語(yǔ)言編碼
3. html標簽
4. css樣式
5. css優(yōu)先級
6. css盒模型組成
1）文檔類(lèi)型
當我們用dreamweaver新建一下html格式文檔時(shí)，查看源代碼，會(huì )發(fā)現代碼最上部有如下這句話(huà)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這句話(huà)標明本文檔是過(guò)渡類(lèi)型，另外還有框架和嚴格類(lèi)型，目前一般都采用過(guò)渡類(lèi)型，因為瀏覽器對XHTML的解析比較寬松，允許使用HTML4.01中的標簽，但必須符合XHTML的語(yǔ)法。許多朋友在制作頁(yè)面時(shí)，往往喜歡把這句刪除掉，在這里建議大家一定要保留這句話(huà)，刪除它后可能引起某些樣式表失效或其它意想不到的問(wèn)題。西安做網(wǎng)站推薦閱讀>>> 一列布局-Web標準(div+css)教程，
2）語(yǔ)言編碼
接下來(lái)我們還會(huì )發(fā)現這樣一句話(huà)：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
它標示文檔的語(yǔ)言編碼。就像我們平時(shí)所說(shuō)的漢語(yǔ)、英語(yǔ)一樣。這里的gb2312告訴瀏覽器，本文檔采用簡(jiǎn)體中文編碼；還有一種常用的編碼是UTF-8編碼，它是國際通用的編碼。不管我們采用哪種編碼，有一點(diǎn)就是包含的css樣式表和其它文件也必須和本文檔的編碼一樣，要不就會(huì )出現亂碼。
3）html標簽
html標簽在頁(yè)面中都必須結束。成對的標簽以“/標簽名”結束，有些單一的標簽在本身的結尾打上/來(lái)結束，這是xhtml代碼編寫(xiě)的規范。
成對的標簽：
<head>{...}</head>
<body>{...}</body>
<div>{...}</div>
<span>{...}</span>
<p>{...}</p>
......
單一的標簽：
<img src="" />
<br />
.......
還需說(shuō)明一點(diǎn)的是按xhtml規范，標簽必須用小寫(xiě)。
4）css樣式
加載css樣式有以下四種
§ 外部樣式
§ 內部樣式
§ 行內樣式
§ 導入樣式
<link href="layout.css" rel="stylesheet" type="text/css" />
這種形式是把css單獨寫(xiě)到一個(gè)css文件內，然后在源代碼中以link方式鏈接。它的好處是不但本頁(yè)可以調用，其它頁(yè)面也可以調用，是最常用的一種形式。
<style>
h2 { color:#f00;}
</style>
這種形式是內部樣式表，它是以<style>和</style>結尾，寫(xiě)在源代碼的head標簽內。這樣的樣式表只能針對本頁(yè)有效。不能作用于其它頁(yè)面。
<p style="font-size:18px;">行內樣式</p>
這種在標簽內以style標記的為行內樣式，行內樣式只針對標簽內的元素有效，因其沒(méi)有和內容相分離，所以不建議使用。西安做網(wǎng)站推薦閱讀>>> 二列和三列布局-Web標準(div+css)教程，
@import url("/css/global.css");
鏈接樣式是以@import url標記所鏈接的外部樣式表，它一般常用在另一個(gè)樣式表內部。如layout.css為主頁(yè)所用樣式，那么我們可以把全局都需要用的公共樣式放到一個(gè)global.css的文件中，然后在layout.css中以@import url("/css/global.css")的形式鏈接全局樣式，這樣就使代碼達到很好的重用性。
5）css優(yōu)先級
§ id優(yōu)先級高于class
§ 后面的樣式覆蓋前面的
§ 指定的高于繼承
§ 行內樣式高于內部或外部樣式
§ 總結：?jiǎn)我坏?id)高于共用的(class)，有指定的用指定的，無(wú)指定則繼承離它最近的
6）css盒模型組成
css盒模型是本節教程的重點(diǎn)。前面幾個(gè)知識點(diǎn)，如果您會(huì )用表格布局的話(huà)，就非常好理解和掌握了。這里的盒模型是和table布局的一個(gè)不同點(diǎn)。學(xué)習web標準，首先要弄懂的就是這個(gè)盒模型，這就是DIV排版的核心所在。傳統的表格排版是通過(guò)大小不一的表格和表格嵌套來(lái)定位排版網(wǎng)頁(yè)內容，改用CSS排版后，就是通過(guò)由CSS定義的大小不一的盒子和盒子嵌套來(lái)編排網(wǎng)頁(yè)。這種排版方式的網(wǎng)頁(yè)代碼簡(jiǎn)潔，表現和內容相分離，維護方便，能兼容更多的瀏覽器，比如PDA設備也能正常瀏覽。
那么它為什么叫盒子呢？先說(shuō)說(shuō)我們在網(wǎng)頁(yè)設計中常聽(tīng)的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
我們可以把它想像成現實(shí)中上方開(kāi)口的盒子，然后從正上往下俯視，邊框相當于盒子的厚度，內容相對于盒子中所裝物體的空間，而填充呢，相當于為防震而在盒子內填充的泡沫，邊界呢相當于在這個(gè)盒子周?chē)舫鲆欢ǖ目臻g，方便取出。是不是這樣就很容易理解盒模型了。
所以整個(gè)盒模型在頁(yè)面中所占的寬度是由左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界組成，而css樣式中weight所定義的寬度僅僅是內容部分的寬度，這是許多朋友容易搞混的地方
這里的邊界我們也稱(chēng)之為：外邊距、外補??；填充也叫：內邊距、內補丁。
如果現在您對CSS盒模型理解還不夠透徹，繼續往下看，后來(lái)的章節會(huì )都會(huì )應用到盒模型實(shí)例。
二、如何開(kāi)始學(xué)習web標準？
1）有HTML和CSS基礎
學(xué)習本系列教程前，要求您有一定的html和css基礎，制作過(guò)網(wǎng)頁(yè)，會(huì )用表格進(jìn)行網(wǎng)頁(yè)布局，這樣學(xué)習起來(lái)才會(huì )很輕松。如果您對這些還不懂，建議先學(xué)習這些知識，然后再來(lái)學(xué)習本教程。
2）轉變觀(guān)念
在以前我們制作網(wǎng)站時(shí)，總是習慣于先考慮外觀(guān)、顏色、字體及布局等所有表現在頁(yè)面上的內容。但外觀(guān)并不是最重要的，相反最終用戶(hù)在訪(fǎng)問(wèn)網(wǎng)頁(yè)時(shí)的體驗才是優(yōu)先要考慮的。一個(gè)由div＋css布局且結構良好的頁(yè)面可以通過(guò)css定義成任何外觀(guān)，在任何網(wǎng)絡(luò )設備上（包括手機、PDA和計算機）上以任何外觀(guān)表現出來(lái)，而且用div＋css布局構建的網(wǎng)頁(yè)以夠簡(jiǎn)化代碼，加快顯示速度。
所以要想學(xué)好div＋css，首先要轉變觀(guān)念，需要拋棄傳統的表格(Table)布局方式，采用層(DIV)布局，并且使用層疊樣式表(CSS)來(lái)實(shí)現頁(yè)面的外觀(guān)。給網(wǎng)站瀏覽者更好的體驗。西安做網(wǎng)站推薦閱讀>>> 縱向導航菜單及二級彈出菜單-Web標準(div+css)教程，
3）多動(dòng)手、多動(dòng)腦
說(shuō)到這點(diǎn)，有點(diǎn)小兒科了，就像我們上小學(xué)時(shí)老師常常教我們的那樣。為什么我在這里也做為一點(diǎn)列出來(lái)呢，我是通過(guò)評論發(fā)現，有些同學(xué)提的問(wèn)題太沒(méi)水平了，稍微動(dòng)下腦筋就明白了，或者自己動(dòng)手一試就知道了，但他就懶得試。舉個(gè)簡(jiǎn)單的例子，拿瀏覽器兼容來(lái)說(shuō)吧，你寫(xiě)個(gè)樣式之后，在IE和火狐分別打開(kāi)看一下不就明白了，但就是不去做。還有一個(gè)同學(xué)留言要我把一個(gè)實(shí)例中的圖片打包發(fā)給他，我一看代碼，就用到一張圖片，無(wú)語(yǔ)了，有你留言的這個(gè)時(shí)間，自己也早把圖片下載下來(lái)了。所以在這里告誡大家，一定要多動(dòng)手、多動(dòng)腦，不要怕麻煩。另外在學(xué)習完一節教程后，一定要自己做一遍實(shí)例，這樣能更快掌握。
文章出處：標準之路 編輯：楊雨晨思
相關(guān)文章：
-
西安網(wǎng)站建設_西安做網(wǎng)站_西安網(wǎng)站制作——西安網(wǎng)絡(luò )公司...
-
CSS實(shí)現圖片裁剪居中 其實(shí)，css實(shí)現起來(lái)很簡(jiǎn)單，只需要設置img的樣式：object-fit：none即可，不過(guò)你要給img一個(gè)高度，因為裁剪嘛 頁(yè)面：（圖片可以自己隨便截兩張來(lái)測試） !--長(cháng)圖片-- div clas...
-
CSS背景圖片自適應全屏 .bg{ background:url(bg.png) no-repeat; background-size:cover; filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )//IE特有的濾鏡 }...
-
Viewport viewport：可視窗口，也就是瀏覽器。 vw Viewport寬度， 1vw 等于viewport寬度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的數學(xué)運算規則，但是也提供更智能的功能：...
-
從企業(yè)建站角度講，最便捷、最適合企業(yè)的建站系統莫過(guò)于自助建站系統，市場(chǎng)上可供選擇的自助建站平臺也是一搜一大把。這些自助建站平臺采用傻瓜式建站風(fēng)格，容易上手，操作簡(jiǎn)單方便...
-
現在想做一個(gè)網(wǎng)站成本很低了，買(mǎi)個(gè)域名，買(mǎi)個(gè)幾十塊空間，弄個(gè)網(wǎng)站建設程序就可以開(kāi)始你的玩耍了，如果你還想找成本更低的，可以看下面的分享。 如何創(chuàng )建網(wǎng)站一直都是很多朋友想要知...
-
商城網(wǎng)站建設如何將吸引力提升 在信息如此豐富多樣的今天，商城網(wǎng)站建設如何才能夠在眾多的同類(lèi)當中脫穎而出，獲得大眾的吸引和青睞呢？這其實(shí)是相關(guān)網(wǎng)站建設人員一直在思考的一個(gè)問(wèn)...
-
現在越來(lái)越多的企業(yè)重視網(wǎng)站的運營(yíng)推廣，那怎樣推廣效果更好呢？西安蟠龍網(wǎng)絡(luò )小編認為沒(méi)用永恒不變得，而且要根據企業(yè)的具體情況選擇合適的推廣方式才是最好的，如果你又運營(yíng)推廣的...
-
隨著(zhù)互聯(lián)網(wǎng)的發(fā)展，人們每時(shí)每刻已經(jīng)離不開(kāi)網(wǎng)絡(luò )，而網(wǎng)站是網(wǎng)絡(luò )的基本組成部分，可以這么說(shuō)，網(wǎng)絡(luò )是由各種各樣的網(wǎng)站組成的，當下，網(wǎng)站是每個(gè)企業(yè)的標配，很多個(gè)人都有自己的網(wǎng)站，...
-
網(wǎng)站現在是一個(gè)企業(yè)的標配，很多沒(méi)有網(wǎng)站的企業(yè)不清楚網(wǎng)站對企業(yè)有什么作用，那么今天西安蟠龍小編總結一下網(wǎng)站對企業(yè)都有哪些好處，希望看完之后您對網(wǎng)站有更深一層的認識。 一、低...