css優化之簡寫規則

最近一直在研究效能，關於前端優化，其實css部分還是有很多的提公升空間。

其實自己寫過一篇關於相容性或者說規範的文章

今天其實想記錄的還是一些簡寫方面的東西：

顏色

--------其實顏色的表示法有很多

color:rgb(255,0,0);      //rgb表示法   r-red g-green b-blue      取值範圍0~255

color:rgb(100%,0%,0%);       //rgb百分比表示法

color:#ff0000;         //16進製表示法

color:#f00;       //短16進製表示法 屬於網路安全色

當然還有一些不是很常用的hsl和rgba,hsla表示法，簡單地說乙個hsl(色相，飽和度和亮度)。其他有興趣baidu

好了，所以今天第乙個優化的點就是關於顏色的縮寫。

//場景只是成對出現的3對 color:#00ffaa //可以換成color:#0fa

2.盒模型中的margin/padding/border（margin和padding差不多就不重複舉例）

//這個可能大家還是用的比較多的
margin:0 10px 2px 4px 
//等效(trbl原則)
//margin-top:0px;margin-right:10px;margin-bottom:2px;margin-left:4px;
//還有一種這樣的場景
margin:0 5px 0 5px; //你的0寫單位了嗎？呵呵
//等效margin:0 5px;

關於border，還是**一下：

//簡寫的原則1
border:1px solid #f00;
//等效的是
//border-width:1px;border-style:solid;border-color:#f00;
//簡寫的原則2
border-width:1px 2px 3px 4px;
//等效的是(還是trbl)
//border-top-width:1px;border-right-width:2px;border-bottom-width:3px;border-left-width:4px;
//下面有一種這樣的場景（這個可能很多人沒有在意過）：
//三邊有而一邊沒有(順序不能換----css讀取的順序是上到下，左到右)
border:1px solid #f00;border-top:none;

3.背景background這邊還是上圖吧，divcss5上的一張圖，話說我是多久以前上的這個網，不知道了，推薦推薦大家可以在裡面找個css的一些基礎知識。（ps:我不是打廣告的，只是交流學習）

有圖了應該很清楚了，不過還是補充一下：

background-attachment:scroll || fixed

scroll-------背景影象是隨著物件內容滾動的

fixed-------背景影象是固定的（預設值）

4.文字

font(還是選擇上圖，**於divcss5)

這個圖比較好,正好吧12px/1.5的問題也解釋了。而且這個比較常用，在設計整個**的style.css的其實你會這樣設定。

5.列表項

這個因為很多**會有這些ul+li的布局,一般你會寫ul,li

list-style: list-style-image || list-style-position || list-style-type

//場景
list-style:square outside url(***.png);
//等效
//list-style-type:square;list-style-type:outside;list-style-image:url(***.png);

css font簡寫規則

font family 字型系列宋體黑體等 font style 字型樣式 normal 正常 italic 斜體或oblique 傾斜 font variant 字型異體 normal 正常或small caps 小體大寫字母 font weight 字型粗細 normal 正常或bol...

css樣式中font屬性的簡寫規則

一字型屬性主要包括下面幾個 font family，font style，font variant，font weight，font size，font font family 字型族 arial times new roman 宋體黑體等 font style 字型樣式 normal 正常 ...

css優化之簡寫規則

css font簡寫規則

css樣式中font屬性的簡寫規則

css font的簡寫規則

相關推薦