DIV+CSS技術(shù)入門(mén)
CSS是Cascading Style Sheets（層疊樣式表單）的簡(jiǎn)稱。更多的人把它稱作樣式表。顧名思義，它是一種設(shè)計(jì)網(wǎng)頁(yè)樣式的工具。借助CSS的強(qiáng)大功能，網(wǎng)頁(yè)將在您豐富的想象力下千變?nèi)f化，越來(lái)越多的人在學(xué)習(xí)而很多初學(xué)者沒(méi)有一個(gè)頭緒，整理了一些學(xué)習(xí)的方法給大家。
一. CSS學(xué)習(xí)重在方法!
學(xué)習(xí)任何東西都是一樣，從小學(xué)、中學(xué)、大學(xué)，除了學(xué)習(xí)知識(shí)外就是去學(xué)習(xí)方法!
要想掌握CSS, 首先要學(xué)會(huì)HTML!
再來(lái)談一下學(xué)習(xí)過(guò)程中的細(xì)節(jié)，因?yàn)橐粋�(gè)樣式它是不可能脫離HTML頁(yè)面的，HTML不與樣式結(jié)合的話, CSS就失去了存在的意義。所以一般書(shū)中都會(huì)舉一個(gè)例子，然后讓你上機(jī)測(cè)試效果，這是筆者想讓你有對(duì)樣式表CSS有一個(gè)初步的印象，告訴你CSS能做什么。一個(gè)小例子：“麻雀雖小，五臟俱全”，你可能看不懂每一個(gè)語(yǔ)句的真正意思。但是你可以記得例子的模式，以后在實(shí)踐中不斷地用，不斷用的過(guò)程就是不斷記的過(guò)程，所以不能恢心，不能總認(rèn)為自己記憶力不好，但不管你騎的是牛也好，千里馬也罷，只要有恒心，一定會(huì)到達(dá)終點(diǎn)的。
閱讀一本書(shū)，一般來(lái)說(shuō)第一次要先把整個(gè)書(shū)通讀一遍，不理解的也要往下看，在往下看的過(guò)程中你也許會(huì)找到那個(gè)問(wèn)題的答案。看完后你有一個(gè)大概的印象，但一定有很多不明白的地方，沒(méi)關(guān)系，繼續(xù)往下看。第二遍你就要邊看邊做學(xué)習(xí)筆記了，把你認(rèn)為是重點(diǎn)的部分寫(xiě)上，還有，你覺(jué)得有疑問(wèn)的部分也要記下，帶著疑問(wèn)看下去，如果沒(méi)有答案，你可以去BBS上發(fā)一個(gè)貼子，好心人還是很多的，提示一句：“一定要學(xué)會(huì)如何去問(wèn)問(wèn)題!” 。你還要上機(jī)去練習(xí)書(shū)上的例子，最讓你困惑的：“一是記不住，二是對(duì)概念的理解有誤(這一條可能是書(shū)譯的不好，另外就是你的理解不對(duì))”，對(duì)于第一條你就要樹(shù)立信心，堅(jiān)持再堅(jiān)持下去。當(dāng)你到達(dá)終點(diǎn)時(shí)你回發(fā)現(xiàn)一切都是順理成章的事。因?yàn)槟闩α耍α司蜁?huì)有回報(bào)，有結(jié)果。
有好多人也看了，但是沒(méi)有什么進(jìn)步，主要有以下幾個(gè)原因：
原因一：壓力不夠，因?yàn)橛胁簧偃吮热缑拦W(xué)CSS，因?yàn)槭强磩e人學(xué)，所以學(xué)之，不學(xué)就沒(méi)優(yōu)勢(shì)!這樣的壓力是很小的，學(xué)不好還有美工這碗飯。
原因二：只是業(yè)余學(xué)習(xí)，這樣學(xué)還只是玩一玩，因?yàn)槟悴灰欢ǚ且赃@門(mén)技術(shù)吃飯。
原因三：方法不對(duì)，有的人只是在看教程，但他不動(dòng)手去做，我以前就是看的太多，做的太少，所以有了實(shí)踐你才能把理論的東西揉進(jìn)去。
二. 掌握CSS的四個(gè)學(xué)習(xí)階段
階段一：不去想瀏覽器的兼容性問(wèn)題的情況下能做出頁(yè)面，但頁(yè)面里到處用TABLE的 模式DIV寫(xiě)出的頁(yè)面。
階段二：想到了兼容性問(wèn)題，但無(wú)法提前預(yù)防，只會(huì)修補(bǔ)問(wèn)題，大量使用HACK技術(shù)(我對(duì)HACK技術(shù)只是知道，但用的很少)
階段三：可提前預(yù)防BUG，但樣式表中大量應(yīng)用了ID,CLASS，CSS譯過(guò)來(lái)是重疊樣式表，比如“DIV P SPAN”。這句代碼是標(biāo)明DIV子元素中P的子元素SPAN，這樣寫(xiě)就可以定義SPAN的樣式了，不用在SPAN中加入CLASS了。這也就是CSS的優(yōu)點(diǎn)所在，為什么不好好利用而一定要定義一個(gè)CLASS呢!
階段四：這一階段是最難的，良好的HTML語(yǔ)義結(jié)構(gòu)、合理的CSS、可重復(fù)利用的樣式。良好的語(yǔ)義有這方面的文章,合理的CSS，這兩方面以后一定會(huì)寫(xiě)專題來(lái)研究。
三. CSS初學(xué)者常見(jiàn)問(wèn)題：
第一個(gè)要求是縮圖的正下方要有個(gè)標(biāo)題。作法相當(dāng)直接了當(dāng)：在你的 HTML 里放上圖片，接著一個(gè)斷行 (BR)，再把標(biāo)題放在一個(gè)段落 (P) 里并且置中 (利用 CSS)。
接著要讓這些縮圖跟標(biāo)題成對(duì)地排列在瀏覽器窗口里。使用表格排版時(shí)，這一對(duì)對(duì)的縮圖跟標(biāo)題會(huì)被分別放置在 TD 里。在使用 CSS 排版時(shí)，我們要把它們分別放置在 DIV 里。為了讓它們能水平排列在窗口上，我們用 CSS 讓這些 DIV 往左浮動(dòng) (FLOAT)。
問(wèn)題1：學(xué)CSS應(yīng)該選什么樣書(shū)來(lái)讀?
先推薦幾本：《CSS權(quán)威指南》《網(wǎng)站重構(gòu)》《網(wǎng)站布局實(shí)錄》《HTML參考大全》
問(wèn)題2：用什么軟件編輯CSS代碼?
只要已經(jīng)能達(dá)到會(huì)手寫(xiě)的程度，用什么軟件都可以，推薦使用DreamWeaver外掛TopStyle(最新版本是Pro V3.12)。
問(wèn)題3：先寫(xiě)HTML還是先寫(xiě)CSS?
網(wǎng)上有很多種答案：先寫(xiě)HTML后寫(xiě)CSS;先寫(xiě)CSS后寫(xiě)HTML;兩者同時(shí)寫(xiě)。兩者一起寫(xiě)更適合初學(xué)者，先寫(xiě)CSS或者先寫(xiě)HTML對(duì)于初學(xué)者都不是恰當(dāng)?shù)玫姆椒�。如果讓一個(gè)人編寫(xiě)代碼，你告訴他先寫(xiě)HTML,寫(xiě)完后 HTML不能修改了，然后你寫(xiě)CSS，如果他可以寫(xiě)出來(lái)，那這個(gè)人一定是一個(gè)水平非常高的Builder了!所以對(duì)于初學(xué)者，多數(shù)情況下建議同時(shí)編寫(xiě)，具體說(shuō)一下步驟：
先要把站點(diǎn)建好，目錄建好，比如我們建好文件夾CSS,IMAGES,這兩個(gè)是最其本的，然后新建一個(gè)HTML文件，一個(gè)style.css一個(gè)空 的樣式表，把HTML頁(yè)連接到這個(gè)外部樣式表。
然后我們先寫(xiě)HTML中的最基本的布局部分，都是用DIV，然后直接在DIV里加入ID或CLASS，這些 布局部分包括外套部分，頭部分，中間部分，左，中，右，版權(quán)部分等。
寫(xiě)好這些后，這時(shí)你可以到樣式表中寫(xiě)樣式，或者你在接著寫(xiě)布局里的部分，拿頭部為例，在頭部寫(xiě)入LOGO部分，NAV部分也同樣加入ID或CLASS。其它同理。
為什么說(shuō)我們不可能一次性把HTML部分寫(xiě)好呢，因?yàn)槿硕际强赡芊稿e(cuò)誤的，可能你的想法寫(xiě)的過(guò)程就是有問(wèn)題的，或者為了瀏覽器的兼容性問(wèn)題，有些是你由于經(jīng)驗(yàn)的不足沒(méi)有提前預(yù)料到的，所以當(dāng)你寫(xiě)樣式時(shí)發(fā)現(xiàn)了問(wèn)題時(shí)就有可能要改動(dòng)你的HTML的代碼。大至的寫(xiě)法就是這樣，你也可以HTML/CSS同時(shí)進(jìn)行，都是可以的，看你的習(xí)慣。我們寫(xiě)代碼時(shí)很多時(shí)候是邊寫(xiě)代碼邊測(cè)試，也不是說(shuō)寫(xiě)一句測(cè)試一句，而是寫(xiě)了一段代碼后就進(jìn)行瀏覽器的測(cè)試，一個(gè)優(yōu)秀的制作師他們的代碼多數(shù)情況寫(xiě)了很多時(shí)他們才測(cè)試一下，是因?yàn)橐粋�(gè)人如果經(jīng)驗(yàn)多的話，他們就會(huì)知道并提前預(yù)防瀏覽器錯(cuò)誤顯示的發(fā)生了!所以他們寫(xiě)代碼的速度比沒(méi)有經(jīng)驗(yàn)的人快。他們已經(jīng)經(jīng)歷過(guò)了你所要經(jīng)歷的錯(cuò)誤，你第一次遇到錯(cuò)誤的瀏覽器顯示問(wèn)題你要花時(shí)間去修補(bǔ)，而他們可提前防止或遇到了可立即解決問(wèn)題!這就是你與他們的不同點(diǎn)之一。
初學(xué)者與高手不同點(diǎn)之處還有一個(gè)就是高手們使用了大量的快捷鍵，所以一定要記住那些常用的快捷鍵，每一個(gè)小的細(xì)節(jié)都有一點(diǎn)提高，綜合在一起就是很大的提高。
另外提高自己的水平最好的方法就是多實(shí)踐，多找一些比較好的HTML+CSS的模板進(jìn)行編碼實(shí)踐，開(kāi)始時(shí)要選一個(gè)簡(jiǎn)單點(diǎn)的，把頁(yè)面截圖，然后把這張圖用自己的想法還原成HTML頁(yè)面……
