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