2019-04-08 分類: 網(wǎng)站建設(shè)
如何避免一些常見的CSS錯誤
如今,CSS在成都網(wǎng)站設(shè)計(jì)公司" target="_blank">網(wǎng)站設(shè)計(jì)和開發(fā)過程中被廣泛使用。但是有許多人習(xí)慣于使用CSS的舊內(nèi)聯(lián)CSS方法。除此之外,還有許多人沒有正確實(shí)現(xiàn)CSS或正確定義類。有幾個基本提示,每個人都應(yīng)該知道,以使其正確。
全世界大多數(shù)網(wǎng)站設(shè)計(jì)師都使用CSS來增強(qiáng)網(wǎng)站的功能和呈現(xiàn)。但是,參與網(wǎng)站設(shè)計(jì)的人和其他任何地方的人都做得對嗎?為了確保你這么做,這里有一些你應(yīng)該避免的CSS錯誤。
1、使用id:
特殊層次之一是你構(gòu)建的選擇器類型:ids與類和標(biāo)簽。舉個例子:
#my-link {color:red; }
.my-link {color:green;}
a {color:blue; }
使用第一個是三個中最具體的(id)。由于每個頁面只能使用一次ID,因此它會獲勝。檢查以下示例:
假設(shè)沒有其他風(fēng)格,文字的顏色是什么?因此,該文本將在網(wǎng)站上顯示為紅色。遵循CSS特異性,它是下一個最具體的風(fēng)格是類。在代碼中使用id的問題是我們很少看到上面的示例,在給定項(xiàng)目上有一個id或類或標(biāo)記選擇器。ID通常用于上下文中:
#header a {border:2px dashed#000; }
2、長選擇器:
#header #title .left-side img.logo(不透明度:0.5)
這個選擇器不僅使用id,而且它也很長。就像ids一樣,如果你使用長選擇器(深度超過三級),你就會增加特異性。因此,隨著定期維護(hù)和更新的發(fā)生,您將隨著時間的推移而復(fù)雜化問題。解決方案?不要寫長選擇器!對于我們之前的例子,有沒有理由單獨(dú)使用.logo是不夠的?可能不是。通常,您的選擇器應(yīng)該只有兩個級別,或者最多三個。
3、內(nèi)聯(lián)樣式:
內(nèi)聯(lián)樣式是特異性錯誤,也違反了我們使用CSS的主要原因; 風(fēng)格與結(jié)構(gòu)分離。眾所周知,網(wǎng)站設(shè)計(jì)師停止使用表格進(jìn)行布局并在外部樣式表中使用CSS,他們也停止將我們的樣式與我們的結(jié)構(gòu)元素混合,并停止使用結(jié)構(gòu)元素來生成樣式。
從特異性的角度來看,內(nèi)聯(lián)樣式只能被重要標(biāo)志覆蓋。通常,這意味著如果有人在該元素上編寫樣式并使用重要標(biāo)記,則他們這樣做是作為被動而非主動的行為。
4、自上而下的CSS:
現(xiàn)在我們正在走出特異性,更多地討論可能已經(jīng)進(jìn)入工作流程的壞習(xí)慣。讓我們想象一下,一旦我們在HTML中編寫了基本結(jié)構(gòu),我們就收到了一個設(shè)計(jì)補(bǔ)償,并開始為它添加樣式。一些CSS的問題在于你可以告訴它是以自上而下的方式編寫的。這模仿HTML布局,而不是抽象設(shè)計(jì)元素,通常使用上下文的id,例如#header,#content。這通常導(dǎo)致長選擇器并且代碼將非常粗略地進(jìn)行調(diào)試和維護(hù)。可以通過從頁面中抽象設(shè)計(jì)組件來修復(fù)此CSS。這也有助于消除代碼中的冗余。
5、冗余/ DRY違規(guī):
冗余意味著你傾向于重復(fù)你所做的事情(就CSS而言)。通常在網(wǎng)絡(luò)編程和各種編程中都會理解,如果你重復(fù)自己,你就是在浪費(fèi)時間,因此就是格言,DRY(不要重復(fù)自己)。這同樣適用于CSS。舉個例子:
-有的標(biāo)題{字體重量:粗體;}
-有些-其他標(biāo)題{字體:重量:粗體; 紅色}
我們可以將這些組合在一起
.some-title,some-other-title {font-weight:bold;}
。有些-其他標(biāo)題{顏色:紅;}
另一方面,你也可以使用它們的通用名稱,并添加一個修飾符類來與標(biāo)題一起顯示它是不同的顏色:
因此,如果我們做對了,就會有很多這樣的小滴頭,可以真正增強(qiáng)網(wǎng)站并優(yōu)化性能。
當(dāng)前題目:如何避免一些常見的CSS錯誤
本文網(wǎng)址:http://m.rwnh.cn/news11/79511.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、企業(yè)建站、商城網(wǎng)站、微信小程序、定制開發(fā)、品牌網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容