CSS樣式編寫的方法

歡迎大家在這裡學習CSS樣式編寫!下面是我們給大家整理出來的精彩內容。希望大家在這裡學習!

[selector]{

[property]:[value];

[<- Declaration ->]

}

< p>[選擇器]{

[屬性]:[值];

[<- 聲明 ->]

}

編寫 CSS 樣式時，我習慣遵守這些規則：

class 名稱以連字符(-)連接，除了下文提到的 BEM 命名法;

縮進 4 空格;

聲明拆分成多行;

聲明以相關性順序排列，而非字母順序;

有前綴的聲明適當縮進，從而對齊其值;

縮進樣式集從而反映 DOM;

保留最後一條聲明結尾的分號。

例如：

CSS Code復制內容到剪貼板

.widget{

padding:10px;

border:1px solid #BADA55;

background-color:#C0FFEE;

-webkit-border-radius:4px;

-moz-border-radius:4px;

border-radius:4px;

}

.widget-heading{

font-size:1.5rem;

line-height:1;

font-weight:bold;

color:#BADA55;

margin-right:-10px;

margin-left: -10px;

padding:0.25em;

}

我們可以發現，.widget-heading 是 .widget 的子元素，因為前者的樣式集比後者多縮進了一級。這樣通過縮進就可以讓開發者在閱讀代碼時快速獲取這樣的重要信息。

我們還可以發現 .widget-heading 的聲明是根據其相關性排列的：.widget-heading 是行間元素，所以我們先添加字體相關的樣式聲明，接下來是其它的。

以下是一個沒有拆分成多行的例子：

CSS Code復制內容到剪貼板

.t10 { width:10% }

.t20 { width:20% }

.t25 { width:25% } /* 1/4 */

.t30 { width:30% }

.t33 { width:33.333% } /* 1/3 */

.t40 { width:40% }

.t50 { width:50% } /* 1/2 */

.t60 { width:60% }

.t66 { width:66.666% } /* 2/3 */

.t70 { width:70% }

.t75 { width:75% } /* 3/4*/

.t80 { width:80% }

.t90 { width:90% }

好了，CSS樣式編寫內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦：

CSS實現文字部分變色的方法