如何避免一些常見的CSS錯誤

如何避免一些常見的CSS錯誤

如今，CSS在成都網站設計公司" target="_blank">網站設計和開發過程中被廣泛使用。但是有許多人習慣于使用CSS的舊內聯CSS方法。除此之外，還有許多人沒有正確實現CSS或正確定義類。有幾個基本提示，每個人都應該知道，以使其正確。

全世界大多數網站設計師都使用CSS來增強網站的功能和呈現。但是，參與網站設計的人和其他任何地方的人都做得對嗎？為了確保你這么做，這里有一些你應該避免的CSS錯誤。

1、使用id：

特殊層次之一是你構建的選擇器類型：ids與類和標簽。舉個例子：

#my-link {color：red; }

.my-link {color：green;}

a {color：blue; }

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

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

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

2、長選擇器：

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

這個選擇器不僅使用id，而且它也很長。就像ids一樣，如果你使用長選擇器（深度超過三級），你就會增加特異性。因此，隨著定期維護和更新的發生，您將隨著時間的推移而復雜化問題。解決方案？不要寫長選擇器！對于我們之前的例子，有沒有理由單獨使用.logo是不夠的？可能不是。通常，您的選擇器應該只有兩個級別，或者最多三個。

3、內聯樣式：

內聯樣式是特異性錯誤，也違反了我們使用CSS的主要原因; 風格與結構分離。眾所周知，網站設計師停止使用表格進行布局并在外部樣式表中使用CSS，他們也停止將我們的樣式與我們的結構元素混合，并停止使用結構元素來生成樣式。

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

4、自上而下的CSS：

現在我們正在走出特異性，更多地討論可能已經進入工作流程的壞習慣。讓我們想象一下，一旦我們在HTML中編寫了基本結構，我們就收到了一個設計補償，并開始為它添加樣式。一些CSS的問題在于你可以告訴它是以自上而下的方式編寫的。這模仿HTML布局，而不是抽象設計元素，通常使用上下文的id，例如#header，＃content。這通常導致長選擇器并且代碼將非常粗略地進行調試和維護。可以通過從頁面中抽象設計組件來修復此CSS。這也有助于消除代碼中的冗余。

5、冗余/ DRY違規：

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

-有的標題{字體重量：粗體;}

-有些-其他標題{字體：重量：粗體; 紅色}

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

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

。有些-其他標題{顏色：紅;}

另一方面，你也可以使用它們的通用名稱，并添加一個修飾符類來與標題一起顯示它是不同的顏色：

標題

因此，如果我們做對了，就會有很多這樣的小滴頭，可以真正增強網站并優化性能。

當前題目：如何避免一些常見的CSS錯誤
本文網址：http://m.kartarina.com/news11/79511.html

成都網站建設公司_創新互聯，為您提供搜索引擎優化、企業建站、商城網站、微信小程序、定制開發、品牌網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯