當(dāng)你開始學(xué)習(xí)CSS時(shí)，你可能會(huì)被網(wǎng)上大量的CSS書籍和教材所淹沒。下面由學(xué)習(xí)啦小編為大家整理的學(xué)習(xí)CSS的方法，希望大家喜歡!

　　學(xué)習(xí)CSS的方法

　　1、掌握HTML

　　要想學(xué)會(huì)CSS,首先必須掌握HTML，如果你沒有學(xué)會(huì)HTML,那么你將無(wú)法有效使用CSS，因?yàn)樗麄兪窍噤佅喑?，缺少了HTML的CSS是毫無(wú)意義的。HTML的學(xué)習(xí)是非常的重要，以至于你需要花費(fèi)一半的學(xué)習(xí)時(shí)間在里面。

　　2、CSS概念

　　在學(xué)習(xí)CSS之前，首先要了解CSS是什么，為什么CSS是如此重要，在了解CSS基本概念后，你將能理解到網(wǎng)頁(yè)設(shè)計(jì)中CSS扮演著什么角色。

　　3、CSS基本語(yǔ)法

　　所謂無(wú)規(guī)矩不成方圓，CSS基本語(yǔ)法的分為3部分：CSS選擇器、CSS選擇器聲明、CSS的繼承，這3部分是CSS的精髓，始終貫穿在編寫CSS之中。在CSS語(yǔ)法學(xué)習(xí)中，我們會(huì)面臨同一種結(jié)果卻有著多種表達(dá)方式，這時(shí)要根據(jù)頁(yè)面的需要采取合適的表達(dá)方式來(lái)實(shí)現(xiàn)。當(dāng)我們對(duì)CSS有所理解時(shí)可以使用CSS縮寫，這樣可以精簡(jiǎn)CSS代碼，降低CSS文件大小，提高網(wǎng)頁(yè)打開速度，同時(shí)能使代碼更加通俗易懂，

　　4、CSS兼容性

　　由于每個(gè)瀏覽器都有其默認(rèn)的CSS，所以不同的瀏覽器下有著不同的顯示效果。在我們開始編寫CSS代碼時(shí)，對(duì)CSS沒有深入掌握的情況下，難免會(huì)犯下對(duì)瀏覽器兼容不一致的問題，這要求我們?cè)诰帉慍SS代碼時(shí)，最好在兩個(gè)不同的瀏覽器上進(jìn)行預(yù)覽，以便及時(shí)調(diào)整各個(gè)環(huán)節(jié)，通過(guò)這樣不斷的預(yù)覽測(cè)試，發(fā)現(xiàn)然后解決問題來(lái)快速的掌握CSS在不同瀏覽器下的兼容性。

　　5、CSS工具

　　好的CSS工具不僅有助于幫助你學(xué)習(xí)CSS，而且還可以幫助你提高編寫CSS代碼的效率，當(dāng)然你也可以使用Dreamweaver或者使用純文本編輯器如記事本來(lái)編寫，這取決你的習(xí)慣，正所謂蘿卜白菜更有所愛。

　　6、利用各種渠道學(xué)習(xí)

　　學(xué)習(xí)CSS不要一味的埋頭苦干，多去CSS相關(guān)的論壇和博客逛逛，要做到不恥下問，多聽聽前輩的講解。還要多參考其他著名網(wǎng)站的CSS代碼，畢竟都是些CSS高手寫的代碼，代表CSS代碼的規(guī)范和一些前沿技術(shù)，這樣對(duì)我們快速掌握各種CSS技巧并運(yùn)用到實(shí)際編寫中，是有很大好處的。

　　學(xué)習(xí)CSS圖片對(duì)網(wǎng)站加載的方法

　　1、圖片

　　(1)指定圖像尺寸

　　加載圖像之前，您的瀏覽器開始渲染頁(yè)面。制定圖像尺寸，有助于它環(huán)繞不可替代的元素。如果沒有制定尺寸，一旦圖像被下載您的瀏覽器將回流，為了做到這個(gè)，筆者建議在< IMG >元素使用高度和寬度標(biāo)簽規(guī)格。

　　注意不要使用尺寸縮放功能的圖像，因?yàn)橛脩羧匀贿€是需要下載原始文件的大小，筆者認(rèn)為，其實(shí)圖像并不需要多大的屏幕空間，只要能讓用戶看清楚就可以。

　　(2)優(yōu)化圖像

　　在使用圖像的過(guò)程中，包含了一些額外的東西，比如使用一些無(wú)用的顏色，額外的多出的圖片大小。使用之前先對(duì)其進(jìn)行優(yōu)化，將大小保持在最低程度，嘗試保存JPEG格式，這將幫助很多慢速的網(wǎng)絡(luò)用戶。這樣做的原因是為了在保持圖片質(zhì)量的同時(shí)控制其重量，減少服務(wù)器的加載時(shí)間。

　　2、避免CSS表達(dá)式

　　HTML頁(yè)面進(jìn)度指示器指示，瀏覽器載入頁(yè)面的流程是逐步從頁(yè)頭，導(dǎo)航欄，內(nèi)容等，如果將CSS文件放在頁(yè)面底部，將會(huì)靜止許多瀏覽器進(jìn)行渲染，這些瀏覽器阻止渲染將會(huì)導(dǎo)致頁(yè)面被重繪，使用CSS文件需要將其放置在頁(yè)面頂端，并且CSS文件避免使用CSS表達(dá)式。

　　CSS表達(dá)式是一個(gè)強(qiáng)大的和危險(xiǎn)的方式動(dòng)態(tài)設(shè)置CSS屬性。他們支持在Internet Explorer版本5開始，但與IE8開始棄用。作為一個(gè)例子，可以設(shè)置背景顏色交替使用CSS表達(dá)式每隔一小時(shí)：

　　getHours背景色：表達(dá)式((新的Date())()2%“B8D4FF#”：“#F08A00”);CSS表達(dá)式將會(huì)增加頁(yè)面的一個(gè)翻譯時(shí)間，延長(zhǎng)頁(yè)面的加載時(shí)間。

　　3、使用外部js和css文件

　　在現(xiàn)實(shí)世界中使用外部文件，一般會(huì)產(chǎn)生更快的網(wǎng)頁(yè)，因?yàn)槭怯蔀g覽器的Javascript和CSS文件緩存。Javascript和CSS在HTML文檔內(nèi)聯(lián)得到下載的HTML文件要求的時(shí)間。這減少了所需的HTTP請(qǐng)求的數(shù)量，但增加了HTML文檔的大小。另一方面，如果在外部瀏覽器的緩存文件，Javascript和CSS，HTML文檔的大小沒有增加HTTP請(qǐng)求的數(shù)量減少。

　　div+css結(jié)構(gòu)寫網(wǎng)頁(yè)的幾個(gè)誤區(qū)

　　1、用div+css結(jié)構(gòu)制作靜態(tài)html網(wǎng)頁(yè)不等于徹底拋棄古老的table寫法。之所以不建議用table來(lái)布局網(wǎng)頁(yè)是因?yàn)樵诰W(wǎng)頁(yè)加載很慢的時(shí)候要等table結(jié)構(gòu)加載完成才能看到網(wǎng)頁(yè)，其次是table的布局沒有一定的語(yǔ)義，網(wǎng)頁(yè)代碼修改起來(lái)比較麻煩。

　　在寫一些欄目塊時(shí)，特別是數(shù)據(jù)分類較多，比如“求購(gòu)信息”的欄目塊，頂部可能出現(xiàn)“發(fā)布人、發(fā)布時(shí)間、信息標(biāo)題、聯(lián)系方式”等項(xiàng)目，像這樣的地方建議還是要用table來(lái)寫，因?yàn)閠able是專門用來(lái)寫數(shù)據(jù)表格的，控制起來(lái)很方便，而且符合語(yǔ)義要求，還有頁(yè)面中出現(xiàn)類似excel數(shù)據(jù)的地方，也建議用table來(lái)寫。

　　2、div+css結(jié)構(gòu)不等于通篇區(qū)域都用div包起來(lái)。遇到一個(gè)區(qū)塊就用一個(gè)div標(biāo)簽，這樣你寫完代碼后全篇都是div，失去了語(yǔ)義的存在價(jià)值，區(qū)塊修改起來(lái)也不容易找到，合理的利用dl、ul、ol、span、等標(biāo)簽，不僅讓你的網(wǎng)頁(yè)看起來(lái)?xiàng)l理清晰，而且修改起來(lái)很方便，見名知意，比如你要修改一個(gè)新聞列表，先找到新聞列表所在的div或者dl標(biāo)簽，然后再找其中的ul，修改具體內(nèi)容就很容易。

　　3、并不是css文件一定要和html代碼分開。之所以將css文件和html分開，是因?yàn)橛行ヽss同時(shí)為多個(gè)頁(yè)面服務(wù)，而用戶訪問時(shí)css文件可以緩存在本地，這樣下次再訪問其他頁(yè)面時(shí)就不用重復(fù)加載css，可以節(jié)約時(shí)間和流量，提高訪問速度，但是如果你的頁(yè)面有些區(qū)域的css是獨(dú)一無(wú)二的，其他頁(yè)面用不到的，就不用把css剝離出去，直接用style標(biāo)簽包括在html網(wǎng)頁(yè)里就可以。

　　4、用div和css寫網(wǎng)頁(yè)一定要在不同類型和不同版本的瀏覽器進(jìn)行測(cè)試。建議最好是同時(shí)打開多個(gè)瀏覽器，如果說(shuō)你認(rèn)為你的網(wǎng)站訪客還沒有養(yǎng)成使用火狐、谷歌等瀏覽器的習(xí)慣，那最少也得兼容ie6、7、8幾個(gè)版本，由于軟件限制，沒有辦法在一個(gè)電腦上裝不同版本的多個(gè)瀏覽器，因此要借助版本模擬軟件，我常用的是ietest，用來(lái)測(cè)試網(wǎng)頁(yè)足夠了。