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

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

　　1、掌握HTML

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

　　2、CSS概念

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

　　3、CSS基本語法

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

　　4、CSS兼容性

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

　　5、CSS工具

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

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

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

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

　　1、圖片

　　(1)指定圖像尺寸

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

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

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

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

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

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

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

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

　　3、使用外部js和css文件

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

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

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

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

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

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

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