原文章** it技術擎 裡面有更豐富的資料
1、background
背景顏色：background-color
基本語法：background-color : transparent | color 背景影象：background-image
基本語法：background-image : none | url ( url ) 背景影象鋪排：background-repeat
基本語法：background-repeat : repeat | no-repeat | repeat-x | repeat-y 背景影象滾動還是固定：background-attachment
基本語法：background-attachment : scroll | fixed 背景影象位置：background-position
基本語法：background-position : length || length或 background-position : position || position length : 百分數 | 由浮點數字和單位識別符號組成的長度值。請參閱 長度單位
position : top | center | bottom | left | center | right 以上是經常用到的background屬性，大家一般都很熟悉，
其簡寫方式為：background : background-color || background-image || background-repeat || background-attachment || background-position 可是隨著css的發展css3中又引入了其他4個屬性： 背景的裁剪區域：background-clip
基本語法：background-clip ： border-box | padding-box | content-box | no-clip
border-box：從border區域向外裁剪背景。
padding-box：從padding區域向外裁剪背景。
content-box：從content區域向外裁剪背景。
no-clip：從border區域向外裁剪背景。 背景顯示區域：background-origin
基本語法：background-origin ： border | padding | content 設定背景大小：background-size
基本語法：background-size ：[ | | auto ] | cover | contain
多重背景background ： [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position] 例如：background: url(img/multiple-backgrounds.png) left top no-repeat, url(img/multiple-backgrounds.png) -320px bottom no-repeat, url(img/multiple-backgrounds.png) -640px top repeat-y;
終於完了！這麼多屬性怎麼簡寫呢？ 查了好多資料終於找到了，好東西就該拿出來分享：
其簡寫方式為：background: background-color||background-image||background-repeat||background-attachment||background-position / background-size||background-origin||background-clip;
注意裡面的反斜槓，font和border-radius裡簡寫方式使用的反斜槓的用法相似。主要是區別background-position和background-size
例如：background: red url(images/1.jpg) no-repeat scroll center center / 50% content-box content-box;
或者：background:red url(images/1.jpg) 0 0/20px 20px no-repeat,url(images/2.jpg) 50% 50%/contain no-repeat content-box green;
2、font
字型樣式：font-style
基本語法：font-style : normal | italic | oblique
設定文字是否為小型的大寫字母：font-variant
基本語法：font-variant : normal | small-caps
設定字型的粗細： font-weight
基本語法：font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |700 | 800 | 900
設定字型尺寸 ：font-size
基本語法：font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger |smaller | length
設定文字的字型名稱序列： font-family
基本語法：font-family : ncursive | fantasy | monospace | serif | sans-serif
其簡寫方式為：font-style || font-variant || font-weight || font-size /line-height || font-family
例如：font:italic small-caps bold 12px/1.5em arial,verdana;
3、margin & padding
以margin為例，padding相同
其簡寫方式為：margin:margin-top margin-right margin-bottom margin-left;
例如：margin:1px 1px 1px 1px;
4、border
邊框寬度：border-weight
基本語法：border-width :medium | thin | thick |length
邊框樣式：border-style
基本語法：
border-style :none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
邊框顏色： border-color
基本語法：border-width :color
其簡寫方式為：border : border-width || border-style || border-color
例如：border:1px solid #000;
5、outline
outline類似border，不同的是border會影響盒模型，而outline不會。
其簡寫方式為：outline : outline-width || outline-style || outline-color
例如：outline:1px solid red;
6、border-radius
右上角半徑：border-top-right-radius ,
右下角半徑：border-bottom-right-radius ,
左下角半徑：border-bottom-left-radius ,
左上角半徑：border-top-left-radius
當各個圓角半徑相同時其簡寫方式為：
border-radius ：border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius;
例如：border-radius:0 6px 6px 6px;一般簡寫為 border-radius:0 6px 6px;
當各個圓角半徑不同時其簡寫方式為：border-radius ： none | [ / ]?
例如：border-radius:0px 5px 10px 15px/20px 15px 10px 5px;按照上有下左的規律依次寫出每個角的兩條邊的半徑
css屬性標籤小結
css樣式的寫法格式 四種基礎選擇器 復合選擇器 偽類選擇器 文字樣式 屬性名稱 值font family 字型中文字型需要巢狀在引號內，多字型使用英文逗號 font size 字型大小number font weight 字型粗細 normal bold 100 900 font variant ...
CSS 字型屬性小結
font size 1 可使用css所有尺寸單位 px，em，rem，2 瀏覽器預設大小為16px font family 1 在行內設定樣式使用 單引號 引住 2 用選擇器設定樣式使用 雙引號 引住 3 預設字型為微軟雅黑 根據系統不同可能會出現偏差 4 當設定的字型沒有生效，則顯示預設字型，也可...
css浮動屬性簡介
css浮動屬性 1 浮動 顧名思義就是讓元素漂浮起來。且從我們的視角看去頁面並沒有發生任何變化。如圖所示 該圖為乙個網頁，我們直面看上去，是看不出頁面上是否有浮動的。但當我們從側面看上去時，浮動就很明顯了。如圖所示 很明顯的就能看出網頁部分1，網頁部分2是不浮動的，他們兩處在同乙個平面上。而網頁部分...