CSS 一些原則

2021-09-01 03:15:19 字數 624 閱讀 6358

優化你的css

所謂高效的css就是讓瀏覽器在查詢style匹配的元素的時候盡量進行少的查詢,下面列出一些我們常見的寫css犯一些低效錯誤:

1、不要在id選擇器前使用標籤名

一般寫法:div#divbox

更好寫法:#divbox

解釋:因為id選擇器是唯一的,加上div反而增加不必要的css匹配。

2、不要在class選擇器前使用標籤名

一般寫法:span.red

更好寫法:.red

解釋:同第一條,但如果你定義了多個.red,而且在不同的元素下是樣式不一樣,則不能去掉,比如你css檔案中定義如下:

p.red

span.red

如果是這樣定義的就不要去掉,去掉後就會混淆,不過建議最好不要這樣寫

3、盡量少使用層級關係

一般寫法:#divboxp.red

更好寫法:.red

4、使用class代替層級關係

一般寫法:#divboxullia

更好寫法:.block

5、在css渲染效率中id和class的效率是基本相當的

class最在第一次載入中被快取,在層疊中會有更加好的效果,在根部元素採用id會具有更加好(id有微妙的速度優勢)。

css一些筆記

文章大部分借鑑 明凱部落格 中 在此宣告 css全稱 層疊樣式表 或 級聯樣式表 簡稱css樣式表。是對文字樣式的編輯語言。引入方法彙總如下 1 內聯樣式表 a.把樣式表規則放在 head 和 head 的中間,從而使樣式表對整個當前 html 頁面產生作用。b.直接插入方式,寫在hmtl 頁面中某...

CSS一些總結

1.display block 塊元素,預設寬度為100 可以設定元素的寬高,預設佔滿一行。塊元素包括div,h1 h6,form,table,ul,ol等 inline 行內元素,預設寬度為內容的寬度,width和height對inline元素無效,margin top和bottom對行內元素無效...

一些css樣式

1.color 顏色 2.font size 字型大小 3.font family 字型型號 4.font style 字型樣式 斜體等 5.font weight bold字型加粗 bolder更粗 6.text decoration underline下劃線 overline上劃線 none b...