如何避免一些常見(jiàn)的CSS錯(cuò)誤

如今，CSS在成都網(wǎng)站設(shè)計(jì)公司" target="_blank">網(wǎng)站設(shè)計(jì)和開(kāi)發(fā)過(guò)程中被廣泛使用。但是有許多人習(xí)慣于使用CSS的舊內(nèi)聯(lián)CSS方法。除此之外，還有許多人沒(méi)有正確實(shí)現(xiàn)CSS或正確定義類。有幾個(gè)基本提示，每個(gè)人都應(yīng)該知道，以使其正確。

全世界大多數(shù)網(wǎng)站設(shè)計(jì)師都使用CSS來(lái)增強(qiáng)網(wǎng)站的功能和呈現(xiàn)。但是，參與網(wǎng)站設(shè)計(jì)的人和其他任何地方的人都做得對(duì)嗎？為了確保你這么做，這里有一些你應(yīng)該避免的CSS錯(cuò)誤。

1、使用id：

特殊層次之一是你構(gòu)建的選擇器類型：ids與類和標(biāo)簽。舉個(gè)例子：

#my-link {color：red; }

.my-link {color：green;}

a {color：blue; }

使用第一個(gè)是三個(gè)中最具體的（id）。由于每個(gè)頁(yè)面只能使用一次ID，因此它會(huì)獲勝。檢查以下示例：

假設(shè)沒(méi)有其他風(fēng)格，文字的顏色是什么？因此，該文本將在網(wǎng)站上顯示為紅色。遵循CSS特異性，它是下一個(gè)最具體的風(fēng)格是類。在代碼中使用id的問(wèn)題是我們很少看到上面的示例，在給定項(xiàng)目上有一個(gè)id或類或標(biāo)記選擇器。ID通常用于上下文中：

#header a {border：2px dashed＃000; }

2、長(zhǎng)選擇器：

#header #title .left-side img.logo（不透明度：0.5）

這個(gè)選擇器不僅使用id，而且它也很長(zhǎng)。就像ids一樣，如果你使用長(zhǎng)選擇器（深度超過(guò)三級(jí)），你就會(huì)增加特異性。因此，隨著定期維護(hù)和更新的發(fā)生，您將隨著時(shí)間的推移而復(fù)雜化問(wèn)題。解決方案？不要寫長(zhǎng)選擇器！對(duì)于我們之前的例子，有沒(méi)有理由單獨(dú)使用.logo是不夠的？可能不是。通常，您的選擇器應(yīng)該只有兩個(gè)級(jí)別，或者最多三個(gè)。

3、內(nèi)聯(lián)樣式：

內(nèi)聯(lián)樣式是特異性錯(cuò)誤，也違反了我們使用CSS的主要原因; 風(fēng)格與結(jié)構(gòu)分離。眾所周知，網(wǎng)站設(shè)計(jì)師停止使用表格進(jìn)行布局并在外部樣式表中使用CSS，他們也停止將我們的樣式與我們的結(jié)構(gòu)元素混合，并停止使用結(jié)構(gòu)元素來(lái)生成樣式。

從特異性的角度來(lái)看，內(nèi)聯(lián)樣式只能被重要標(biāo)志覆蓋。通常，這意味著如果有人在該元素上編寫樣式并使用重要標(biāo)記，則他們這樣做是作為被動(dòng)而非主動(dòng)的行為。

4、自上而下的CSS：

現(xiàn)在我們正在走出特異性，更多地討論可能已經(jīng)進(jìn)入工作流程的壞習(xí)慣。讓我們想象一下，一旦我們?cè)贖TML中編寫了基本結(jié)構(gòu)，我們就收到了一個(gè)設(shè)計(jì)補(bǔ)償，并開(kāi)始為它添加樣式。一些CSS的問(wèn)題在于你可以告訴它是以自上而下的方式編寫的。這模仿HTML布局，而不是抽象設(shè)計(jì)元素，通常使用上下文的id，例如#header，＃content。這通常導(dǎo)致長(zhǎng)選擇器并且代碼將非常粗略地進(jìn)行調(diào)試和維護(hù)?？梢酝ㄟ^(guò)從頁(yè)面中抽象設(shè)計(jì)組件來(lái)修復(fù)此CSS。這也有助于消除代碼中的冗余。

5、冗余/ DRY違規(guī)：

冗余意味著你傾向于重復(fù)你所做的事情（就CSS而言）。通常在網(wǎng)絡(luò)編程和各種編程中都會(huì)理解，如果你重復(fù)自己，你就是在浪費(fèi)時(shí)間，因此就是格言，DRY（不要重復(fù)自己）。這同樣適用于CSS。舉個(gè)例子：

-有的標(biāo)題{字體重量：粗體;}

-有些-其他標(biāo)題{字體：重量：粗體; 紅色}

我們可以將這些組合在一起

.some-title，some-other-title {font-weight：bold;}

。有些-其他標(biāo)題{顏色：紅;}

另一方面，你也可以使用它們的通用名稱，并添加一個(gè)修飾符類來(lái)與標(biāo)題一起顯示它是不同的顏色：

標(biāo)題

因此，如果我們做對(duì)了，就會(huì)有很多這樣的小滴頭，可以真正增強(qiáng)網(wǎng)站并優(yōu)化性能。

當(dāng)前題目：如何避免一些常見(jiàn)的CSS錯(cuò)誤
本文網(wǎng)址：http://jinyejixie.com/news11/79511.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、企業(yè)建站、商城網(wǎng)站、微信小程序、定制開(kāi)發(fā)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)