CSS是用來(lái)定義網(wǎng)站的用戶界面或?qū)@示和內(nèi)容區(qū)分開(kāi)來(lái)的。
由于CSS被廣泛地使用在幾乎所有網(wǎng)站上,所以讓我們花些時(shí)間來(lái)創(chuàng)建樣式表并確保它符合良好的標(biāo)準(zhǔn)。下面的技巧會(huì)極大地在開(kāi)發(fā)過(guò)程中幫助CSS初學(xué)者。
索引
本處的定義將幫助你和其他開(kāi)發(fā)者了解網(wǎng)站和CSS文件,還將幫助你們了解CSS文件中的內(nèi)容。索引部分知識(shí)一個(gè)格式化了的CSS注釋段落。
- 給出CSS文件的作者信息
- 定義網(wǎng)站的設(shè)計(jì)(列數(shù),靜態(tài)/動(dòng)態(tài))[columns, static/liquid]
- 持續(xù)跟蹤文件版本(當(dāng)文件有多個(gè)作者或未來(lái)需要有升級(jí)更新的時(shí)候非常有用)
[Page: ]
錨點(diǎn)
錨點(diǎn)就好像在同一個(gè)CSS文件中的書(shū)簽一樣,錨點(diǎn)使你清晰地瀏覽整個(gè)CSS文件按并且使它很有組織。
錨點(diǎn)需要在CSS的索引(上面提到的)處定義,因?yàn)镃SS沒(méi)有自己的錨點(diǎn)系統(tǒng),所以我在文檔中使用了一個(gè)簡(jiǎn)單的技巧定義錨點(diǎn)。
方法是用一個(gè)比較罕見(jiàn)的字符來(lái)定義注釋,當(dāng)你想找某個(gè)錨點(diǎn)時(shí),你就可以從索引處復(fù)制并查找錨點(diǎn)的定義符,并找到該錨點(diǎn)。
[Page: ]
重定義
重定義是用來(lái)覆蓋HTML默認(rèn)的標(biāo)簽樣式,把它們進(jìn)行重定義的方法。你是否見(jiàn)過(guò)這樣的CSS代碼,它只是想把那個(gè)特定的元素加上樣式!
CSS中一個(gè)非常美麗的用法是上下文選擇器,讓我們使用它:
[Page: ]
命名規(guī)則
一個(gè)很關(guān)鍵的因素將元素給出精確無(wú)誤并且干凈有效的名字,這將避免混亂并讓你更容易快捷地讀懂你的CSS。
[Page: ]
速寫(xiě)
CSS中的速寫(xiě)功能是你可以將許多同類型的屬性合并成一個(gè)的屬性。
CSS速寫(xiě)使開(kāi)發(fā)過(guò)程更簡(jiǎn)單并且讓你的CSS文件干凈、簡(jiǎn)短、可讀,下面是幾個(gè)例子:
[Page: ]
Sprites
將所有的背景圖片合并到一張并且使用背景定位來(lái)顯示不同的部分,這就是我們所說(shuō)的CSS Sprites。
CSS Sprites能夠減少HTTP請(qǐng)求的數(shù)量,節(jié)省帶寬,使得讀取更快。同時(shí)也可以避免圖像不穩(wěn)定現(xiàn)象(比如當(dāng)鼠標(biāo)經(jīng)過(guò)一張圖片時(shí)可以顯示另一張圖片的效果,后一張圖片將在慢速的因特網(wǎng)連接中等待半天才會(huì)出現(xiàn))。
CSS Sprites最佳并且最受歡迎的例子是蘋(píng)果公司網(wǎng)站上的菜單系統(tǒng):
[Page: ]
明確化
選擇器明確化是當(dāng)好幾個(gè)規(guī)則都可以被相同的元素使用時(shí),優(yōu)先使用哪一個(gè)的過(guò)程。
簡(jiǎn)單說(shuō)來(lái),每個(gè)CSS選擇器都有權(quán)重。選擇器的所有權(quán)重的總和決定了它在文檔中的屬性。當(dāng)CSS文檔很大,以至于你不知道元素哪個(gè)權(quán)重較大時(shí),明確化就能起到很大的幫助。
恩,明確化是CSS中一個(gè)較大的領(lǐng)域,以至于很難用幾句話解釋清楚,還是看例子吧:
[Page: ]
屬性重置
全局屬性重置確保一個(gè)網(wǎng)站在所有瀏覽器中顯示幾乎一樣。在每一個(gè)案例中,不同的瀏覽器給所有網(wǎng)站使用它們自己的默認(rèn)樣式設(shè)置集,這將使我們的網(wǎng)站在不同的瀏覽器中顯示不一樣。全局屬性重置將改正這種情況并讓你從絕對(duì)一致的基礎(chǔ)開(kāi)始建立網(wǎng)站。
我并不總是推薦使用CSS框架,但是CSS重置你還是需要用到的?,F(xiàn)在有許多不同的重置方法,從簡(jiǎn)單的到復(fù)雜的。
[Page: ]
Hacks
即便是一個(gè)完美的CSS,它也不能在所有瀏覽器中產(chǎn)生完全一致的顯示,每個(gè)瀏覽器有對(duì)CSS不同的解釋方法。總而言之,如果你需要你的網(wǎng)站在所有瀏覽器中保持一致,你不得不使用CSS Hacks。
使用CSS Hacks將減少CSS驗(yàn)證時(shí)產(chǎn)生的錯(cuò)誤,這一點(diǎn)我同意。要實(shí)現(xiàn)這點(diǎn),一個(gè)可選的方法是每個(gè)瀏覽器使用單一不同的CSS文件并通過(guò)在HTML中包含判定瀏覽器的標(biāo)簽來(lái)告訴瀏覽器應(yīng)該使用哪個(gè)特定的CSS。我經(jīng)常在我所有的項(xiàng)目中創(chuàng)建一個(gè)"fuck-ie.css" :) (譯者注:此處作者用臟話表達(dá)了他對(duì)IE的憤怒。如果翻譯成“和IE交配.css”,世界會(huì)不會(huì)和諧一些?)
使用這種方法后,你的“主CSS文件”將通過(guò)驗(yàn)證,與此同時(shí),"fuck-ie.css" 文件也會(huì)通過(guò)驗(yàn)證,但是只在IE瀏覽器中覆蓋“主CSS文件”。
[Page: ]
驗(yàn)證
在創(chuàng)建CSS的時(shí)候就驗(yàn)證它總是很必要的,這將確保你的CSS沒(méi)有錯(cuò)誤并且可以被所有瀏覽器正確地解釋。
W3C驗(yàn)證器是一個(gè)非常流行的在線CSS驗(yàn)證工具。
如果你有什么更多的技巧想加到本文中,請(qǐng)?jiān)谖恼略u(píng)論中分享他們,我們希望這能幫到你。