CSS 筆記速查
使用CSS
外部樣式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
文件內(nèi)容：
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
內(nèi)部樣式表
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
內(nèi)聯(lián)樣式
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>
選擇器
元素選擇器
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
選擇器分組
h1,h2,h3,h4,h5,h6 {
color: green;
}
通配符選擇器
* {color:red;} // 文檔中的每個元素都為紅色
類選擇器
.important {color:red;} // 實質(zhì)上就是*.important {color:red;}
ID選擇器
#intro {font-weight:bold;} // 實質(zhì)上就是*#intro {font-weight:bold;}
屬性選擇器
*[title] {color:red;} // 包含title的所有元素
a[href][title] {color:red;} //同時有 href 和 title 屬性的 HTML 超鏈接的文本
a[] {color: red;} // 根據(jù)具體屬性值選擇,這種格式要求必須與屬性值完全匹配,引申見文中選擇器參考表格
a[] {color: red;} //多個屬性-值選擇器鏈接在一起來選擇
結(jié)合元素選擇器
p.important {color:red;} //類名為important的p元素
后代選擇器
h1 em {color:red;}
子元素選擇器
h1 > strong {color:red;} //選擇只作為 h1 元素子元素的 strong 元素
相鄰兄弟選擇器
h1 + p {margin-top:50px;} //緊跟h1元素的p元素,中間不允許有其他元素,即二者為相鄰兄弟
h1 + p + p {margin-top:50px;} // 代表緊跟一個h1與一個p的p元素
偽類
偽類的語法：
selector : pseudo-class {property: value}
屬性|描述|CSS版本
--|--
:active|向被激活的元素添加樣式。|1
:focus|向擁有鍵盤輸入焦點的元素添加樣式。|2
:hover|當(dāng)鼠標(biāo)懸浮在元素上方時，向元素添加樣式。|1
:link|向未被訪問的鏈接添加樣式。|1
:visited|向已被訪問的鏈接添加樣式。|1
:first-child|向元素的第一個子元素添加樣式。|2
:lang|向帶有指定 lang 屬性的元素添加樣式。|2
a標(biāo)簽的實例
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標(biāo)移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
提示：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。
first-child 偽類
p:first-child {font-weight: bold;} //一個p元素，必須是其父元素的第一個子元素。
li:first-child {text-transform:uppercase;}
偽元素
偽元素的語法：
selector:pseudo-element {property:value;}
屬性|描述|CSS
--|--
:first-letter|向文本的第一個字母添加特殊樣式。|1
:first-line|向文本的首行添加特殊樣式。|1
:before|在元素之前添加內(nèi)容。|2
:after|在元素之后添加內(nèi)容。|2
first-line
"first-line" 偽元素用于向文本的首行設(shè)置特殊樣式。
// p元素下的第一行，內(nèi)容過長，瀏覽器自動換行的話自動換行的部分就已經(jīng)不算第一行了
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
注釋："first-line" 偽元素只能用于塊級元素。
注釋：下面的屬性可應(yīng)用于 "first-line" 偽元素：
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
first-color
"first-letter" 偽元素用于向文本的首字母設(shè)置特殊樣式：
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
注釋："first-letter" 偽元素只能用于塊級元素。
注釋：下面的屬性可應(yīng)用于 "first-letter" 偽元素：
font
color
background
margin
padding
border
text-decoration
vertical-align (僅當(dāng) float 為 none 時)
text-transform
line-height
float
clear
before 偽元素
":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容。
下面的例子在每個 <h1> 元素前面插入一幅圖片：
h1:before
{
content:url(logo.gif);
}
:after 偽元素
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
下面的例子在每個 <h1> 元素后面插入一幅圖片：
h1:after
{
content:url(logo.gif);
}
選擇器參考表格
| 選擇器 | 描述 | |
|---|---|---|
| [attribute] | 用于選取帶有指定屬性的元素。 | |
| [attribute=value] | 用于選取帶有指定屬性和值的元素。 | |
| [attribute~=value] | 用于選取屬性值中包含指定詞匯的元素。 | |
| [attribute | =value] | 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。 |
| [attribute^=value] | 匹配屬性值以指定值開頭的每個元素。 | |
| [attribute$=value] | 匹配屬性值以指定值結(jié)尾的每個元素。 | |
| [attribute*=value] | 匹配屬性值中包含指定值的每個元素。 |
CSS 樣式
| 屬性 | 描述 | 值 |
|---|---|---|
| opacity | 不透明度 | value 規(guī)定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）<br /><br />inherit |
| cursor | 規(guī)定要顯示的光標(biāo)的類型（形狀）。 | default 默認(rèn)光標(biāo)（通常是一個箭頭）<br /><br />auto 默認(rèn)。瀏覽器設(shè)置的光標(biāo)。<br /><br />crosshair 光標(biāo)呈現(xiàn)為十字線。<br /><br />pointer 光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）<br /><br />move 此光標(biāo)指示某對象可被移動。<br /><br />text 此光標(biāo)指示文本。<br /><br />wait 此光標(biāo)指示程序正忙（通常是一只表或沙漏）。<br /><br />help 此光標(biāo)指示可用的幫助（通常是一個問號或一個氣球）。<br /><br />示例：cursor:url('cursor.ico'),help;<br /><br />更多屬性戳我 查看演示戳我
|
| resize | 規(guī)定是否可由用戶對元素的尺寸進(jìn)行調(diào)整。 如果希望此屬性生效，需要設(shè)置元素的 overflow 屬性，值可以是 auto、hidden 或 scroll。 | none 用戶無法調(diào)整元素的尺寸。<br /><br />both 用戶可調(diào)整元素的高度和寬度。<br /><br />horizontal 用戶可調(diào)整元素的寬度。<br /><br />vertical 用戶可調(diào)整元素的高度。 |
背景
| 屬性 | 描述 | 值 |
|---|---|---|
| background | 簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中。 | 在一個聲明中設(shè)置所有背景屬性 |
| background-attachment | 背景圖像是否固定或者隨著頁面的其余部分滾動。 | scroll(默認(rèn))<br /><br />fixed<br /><br />inherit |
| background-color | 設(shè)置元素的背景顏色。 | color_name(red）<br /><br />hex_number(#ff0000)<br /><br />rgb_number(rgb(255,0,0))<br /><br />transparent(默認(rèn)，透明)<br /><br />inherit |
| background-image | 把圖像設(shè)置為背景。 | background-image: url(bg1.gif),url(bg2.gif)<br /><br />none(默認(rèn))<br /><br />inherit |
| background-position | 設(shè)置背景圖像的起始位置。 | top/center/bottom left/center/right<br /><br />x% y%<br /><br />xpos ypos<br /><br />【可以混合使用 % 和 position 值?！?lt;br /><br />【默認(rèn)0% 0%。僅規(guī)定一個值時，另一個默認(rèn)為50%，即center】 |
| background-repeat | 設(shè)置背景圖像是否及如何重復(fù)。 | repeat(默認(rèn))<br /><br />repeat-x<br /><br />repeat-y<br /><br />no-repeat<br /><br />inherit |
| background-size | 規(guī)定背景圖像的尺寸 | length(100px 50px)<br /><br />percentage(100% 100%)<br /><br />cover<br /><br />contain |
| background-origin | 規(guī)定背景圖片的定位區(qū)域 | padding-box<br /><br />border-box<br /><br />content-box |
| background-clip | 規(guī)定背景的繪制區(qū)域 | border-box<br /><br />padding-box<br /><br />content-box |
邊框與輪廓
| 屬性 | 描述 | 值 |
|---|---|---|
| border | 在一個聲明中設(shè)置所有的邊框?qū)傩浴?/td> |
border-width<br /><br />border-style<br /><br />border-color<br /><br />inherit<br /><br />示例： border:5px solid red;不能同分別設(shè)置四條邊款 |
| border-color | 設(shè)置四條邊框的顏色。 | color_name(red）<br /><br />hex_number(#ff0000)<br /><br />rgb_number(rgb(255,0,0))<br /><br />transparent(默認(rèn)，透明)<br /><br />inherit |
| border-style | 設(shè)置四條邊框的樣式。 | none 定義無邊框。<br /><br />hidden 與 "none" 相同。不過應(yīng)用于表時除外，對于表，hidden 用于解決邊框沖突。<br /><br />dotted 定義點狀邊框。<br /><br />dashed 定義虛線。<br /><br />solid 定義實線。<br /><br />double 定義雙線。雙線的寬度等于 border-width 的值。<br /><br />groove 定義3D凹槽邊框。效果取決于 border-color 的值。<br /><br />ridge 定義3D壟狀邊框。效果取決于 border-color 的值。<br /><br />inset 定義3D inset 邊框。效果取決于 border-color 的值。<br /><br />outset 定義 3D outset 邊框。效果取決于 border-color 的值。<br /><br />inherit<br /><br />戳我看效果 |
| border-width | 設(shè)置四條邊框的寬度。 | thin 定義細(xì)的邊框。<br /><br />medium 默認(rèn)值。定義中等的邊框。<br /><br />thick 定義粗的邊框。<br /><br />length 自定義邊框的寬度。<br /><br />inherit |
| border-top/right/bottom/left | 在一個聲明中設(shè)置所有的上/右/下/左邊框?qū)傩浴?/td> | border-top/right/bottom/left-width<br /><br />border-top/right/bottom/left-style<br /><br />border-top/right/bottom/left-color<br /><br />inherit |
| border-top/right/bottom/left-color | 設(shè)置邊框的顏色。 | 見border-color |
| border-top/right/bottom/left-style | 設(shè)置邊框的樣式。 | 見border-style |
| border-top/right/bottom/left-width | 設(shè)置邊框的寬度。 | 見border-width |
| border-radius | 簡寫屬性，設(shè)置所有四個 border-*-radius 屬性。 |
length 定義圓角的形狀。<br /><br />% 以百分比定義圓角的形狀。<br /><br />示例：border-radius:25px 20px 15px 10px;分別是左上，右上，右下，左下。 |
| border-top-left-radius | 定義邊框左上角的形狀。 | 見 border-radius |
| border-top-right-radius | 定義邊框右上角的形狀。 | 見 border-radius |
| border-bottom-right-radius | 定義邊框右下角的形狀。 | 見 border-radius |
| border-bottom-left-radius | 定義邊框左下角的形狀。 | 見 border-radius |
| border-image | 簡寫屬性，設(shè)置所有 border-image-* 屬性。 |
border-image-source<br /><br />border-image-slice<br /><br />border-image-width<br /><br />border-image-outset<br /><br />border-image-repeat<br /><br />示例：border-image:url(border.png) 30 30 round;<br /><br />講真，不會用。W3School戳我
|
| border-image-source | 規(guī)定用作邊框的圖片。 | none 不使用圖像。<br /><br />image 圖像的路徑<br /><br />示例：border-image-source: url(border.png);
|
| border-image-width | 規(guī)定圖片邊框的寬度。從區(qū)域的上、右、下、左側(cè)向內(nèi)的距離。 | number 對應(yīng)的 border-width 的倍數(shù)。<br /><br />% 參考邊框圖像區(qū)域的尺寸：區(qū)域的高度影響水平偏移，寬度影響垂直偏移。<br /><br />auto 寬度為對應(yīng)的圖像切片的固有寬度。 |
| border-image-outset | 規(guī)定邊框圖像區(qū)域超出邊框的量。 | length<br /><br />number對應(yīng)的 border-width 的倍數(shù)。 |
| border-image-slice | 規(guī)定圖像邊框的向內(nèi)偏移。 | number 數(shù)字值，代表圖像中像素（如果是光柵圖像）或矢量坐標(biāo)（如果是矢量圖像）。<br /><br />% 相對于圖像尺寸的百分比值：圖像的寬度影響水平偏移，高度影響垂直偏移。<br /><br />fill 保留邊框圖像的中間部分。 |
| border-image-repeat | 圖像邊框是否應(yīng)平鋪、鋪滿或拉伸。 | stretch 拉伸圖像來填充區(qū)域<br /><br />repeat 平鋪（重復(fù)）圖像來填充區(qū)域。<br /><br />round 類似repeat值。如果無法完整平鋪所有圖像，則對圖像進(jìn)行縮放以適應(yīng)區(qū)域。 |
| outline | 在一個聲明中設(shè)置所有的輪廓屬性。 |
outline-color<br /><br />outline-style<br /><br />outline-width<br /><br />inherit<br /><br />示例：outline:#00FF00 dotted thick;
|
| outline-color | 設(shè)置輪廓的顏色。 | color_name(red）<br /><br />hex_number(#ff0000)<br /><br />rgb_number(rgb(255,0,0))<br /><br />invert(默認(rèn)，顏色反轉(zhuǎn)（逆向的顏色）。使輪廓在不同背景顏色中都可見。)<br /><br />inherit |
| outline-style | 設(shè)置輪廓的樣式。 | none 默認(rèn)，定義無輪廓。<br /><br />dotted 定義點狀輪廓。<br /><br />dashed 定義虛線輪廓。<br /><br />solid 定義實線輪廓。<br /><br />double 定義雙線輪廓。雙線的寬度等于 outline-width 的值。<br /><br />groove 定義3D凹槽輪廓。效果取決于 outline-color 的值。<br /><br />ridge 定義3D壟狀輪廓。效果取決于 outline-color 的值。<br /><br />inset 定義3D inset 輪廓。效果取決于 outline-color 的值。<br /><br />outset 定義 3D outset 輪廓。效果取決于 outline-color 的值。<br /><br />inherit<br /><br />戳我看效果 |
| outline-width | 設(shè)置輪廓的寬度。 | thin 定義細(xì)的輪廓。<br /><br />medium 默認(rèn)值。定義中等的輪廓。<br /><br />thick 定義粗的輪廓。<br /><br />length 自定義輪廓的寬度。<br /><br />inherit |
| outline-offset | 對輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓。 | length 輪廓與邊框邊緣的距離。<br /><br />inherit |
| box-shadow | 向方框添加一個或多個陰影。 | h-shadow 必需。水平陰影的位置。允許負(fù)值。<br /><br />v-shadow 必需。垂直陰影的位置。允許負(fù)值。<br /><br />blur 可選。模糊距離。<br /><br />spread可選。陰影的尺寸。<br /><br />color 可選。陰影的顏色。請參閱 CSS 顏色值。<br /><br />inset 可選。將外部陰影 (outset) 改為內(nèi)部陰影。<br /><br />戳我看效果 |
outline （輪廓）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。outline 屬性可設(shè)置元素周圍的輪廓線。
注釋：請始終在 border/outline-color 屬性之前聲明 border/outline-style 屬性。元素只有獲得邊框/輪廓以后才能改變其邊框/輪廓的顏色。
注釋：輪廓線不會占據(jù)空間，也不一定是矩形。
尺寸
| 屬性 | 描述 | 值 |
|---|---|---|
| height | 設(shè)置元素高度。 | auto 默認(rèn)。瀏覽器會計算出實際的高度。<br /><br />length<br /><br />% 基于包含它的塊級對象的百分比高度。<br /><br />inherit |
| width | 設(shè)置元素寬度。 | auto 默認(rèn)。瀏覽器會計算出實際的寬度。<br /><br />length<br /><br />% 基于包含它的塊級對象的百分比寬度。<br /><br />inherit |
| max-height | 設(shè)置元素的最大高度。 | none 默認(rèn)。定義對元素被允許的最大高度沒有限制。<br /><br />length<br /><br />% 定義基于包含它的塊級對象的百分比最大高度。<br /><br />inherit |
| max-width | 設(shè)置元素的最大寬度。 | none 默認(rèn)。定義對元素被允許的最大寬度沒有限制。<br /><br />length<br /><br />% 定義基于包含它的塊級對象的百分比最大寬度。<br /><br />inherit |
| min-height | 設(shè)置元素的最小高度。 | length 定義元素的最小高度。默認(rèn)值是 0。<br /><br />length<br /><br />%定義基于包含它的塊級對象的百分比最小高度。<br /><br />inherit |
| min-width | 設(shè)置元素的最小寬度。 | length 定義元素的最小寬度。默認(rèn)取決于瀏覽器。<br /><br />length<br /><br />%定義基于包含它的塊級對象的百分比最小寬度。<br /><br />inherit |
邊距屬性
內(nèi)邊距屬性（Padding）
| 屬性 | 描述 | 值 |
|---|---|---|
| padding | 在一個聲明中設(shè)置所有內(nèi)邊距屬性。 | auto 瀏覽器計算<br /><br />length默認(rèn)值是 0px。<br /><br />% 基于父元素的百分比。<br /><br />inherit |
| padding-top/right/bottom/left | 設(shè)置元素的某內(nèi)邊距。 | length默認(rèn)值是 0px。<br /><br />% 基于父元素的百分比。<br /><br />inherit |
外邊距屬性（Margin）
| 屬性 | 描述 | 值 |
|---|---|---|
| margin | 在一個聲明中設(shè)置所有外邊距屬性。 | auto 瀏覽器計算<br /><br />length默認(rèn)值是 0px。<br /><br />% 基于父元素的百分比。<br /><br />inherit |
| margin-top/right/bottom/left | 設(shè)置元素的某外邊距。 | auto 瀏覽器計算<br /><br />length默認(rèn)值是 0px。<br /><br />% 基于父元素的百分比。<br /><br />inherit |
外邊距合并
外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。
合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
定位（Positioning）布局定位，非地理定位
| 屬性 | 描述 | 值 |
|---|---|---|
| position | 規(guī)定元素的定位類型。 | absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進(jìn)行定位。<br /><br />relative 生成相對定位的元素，相對于其正常位置進(jìn)行定位。<br /><br />fixed 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。<br /><br />static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。<br /><br />inherit |
| top/right/bottom/left | 設(shè)置定位元素上/右/下/左外邊距邊界與其包含塊上/右/下/左邊界之間的偏移。 | auto 默認(rèn)。瀏覽器計算<br /><br />% 以包含元素的百分比計?？墒褂秘?fù)值。<br /><br />length可使用負(fù)值。<br /><br />inherit |
| float | 規(guī)定框是否應(yīng)該浮動。 | left<br /><br />right<br /><br />none 默認(rèn)值。<br /><br />inherit |
| display | 規(guī)定元素應(yīng)該生成的框的類型。 | none<br /><br />block<br /><br />inline<br /><br />inline-block<br /><br />更多屬性值戳我W3School |
| visibility | 規(guī)定元素是否可見。會占據(jù)頁面上的空間。 | visible 默認(rèn)值。元素是可見的。<br /><br />hidden 元素是不可見的。<br /><br />collapse 當(dāng)在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據(jù)的空間會留給其他內(nèi)容使用。如果此值被用在其他的元素上，會呈現(xiàn)為 "hidden"。<br /><br />inherit |
| vertical-align | 設(shè)置元素的垂直對齊方式。 | baseline 默認(rèn)。元素放置在父元素的基線上。<br /><br />sub 垂直對齊文本的下標(biāo)<br /><br />super 垂直對齊文本的上標(biāo)<br /><br />top 把元素的頂端與行中最高元素的頂端對齊<br /><br />middle 把此元素放置在父元素的中部。<br /><br />bottom 把元素的頂端與行中最低的元素的頂端對齊。<br /><br />text-top 把元素的頂端與父元素字體的頂端對齊<br /><br />text-bottom 把元素的底端與父元素字體的底端對齊。<br /><br />length<br /><br />% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負(fù)值。<br /><br />inherit |
| clip | 剪裁絕對定位元素。 | shape 設(shè)置元素的形狀。唯一合法的形狀值是：rect (top, right, bottom, left)<br /><br />auto 默認(rèn)值。不應(yīng)用任何剪裁。<br /><br />inherit<br /><br />實例：clip:rect(0px,60px,200px,0px);
|
| z-index | 設(shè)置元素的堆疊順序。 | auto 默認(rèn)。堆疊順序與父元素相等。<br /><br />number 設(shè)置元素的堆疊順序。<br /><br />inherit |
| overflow | 規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情。 | visible 默認(rèn)值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。<br /><br />hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。<br /><br />scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。<br /><br />auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。<br /><br />inherit |
| overflow-x | 如果內(nèi)容溢出了元素內(nèi)容區(qū)域，是否對內(nèi)容的左/右邊緣進(jìn)行裁剪。 | visible 不裁剪內(nèi)容，可能會顯示在內(nèi)容框之外。<br /><br />hidden 裁剪內(nèi)容 - 不提供滾動機(jī)制。<br /><br />scroll 裁剪內(nèi)容 - 提供滾動機(jī)制。<br /><br />auto 如果溢出框，則應(yīng)該提供滾動機(jī)制。<br /><br />no-display 如果內(nèi)容不適合內(nèi)容框，則刪除整個框。<br /><br />no-content 如果內(nèi)容不適合內(nèi)容框，則隱藏整個內(nèi)容。 |
| overflow-y | 如果內(nèi)容溢出了元素內(nèi)容區(qū)域，是否對內(nèi)容的上/下邊緣進(jìn)行裁剪。 | visible 不裁剪內(nèi)容，可能會顯示在內(nèi)容框之外。<br /><br />hidden 裁剪內(nèi)容 - 不提供滾動機(jī)制。<br /><br />scroll 裁剪內(nèi)容 - 提供滾動機(jī)制。<br /><br />auto 如果溢出框，則應(yīng)該提供滾動機(jī)制。<br /><br />no-display 如果內(nèi)容不適合內(nèi)容框，則刪除整個框。<br /><br />no-content 如果內(nèi)容不適合內(nèi)容框，則隱藏整個內(nèi)容。 |
表格屬性（Table）
| 屬性 | 描述 | 值 |
|---|---|---|
| border-collapse | 規(guī)定是否合并表格邊框。 | separate 默認(rèn)值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。<br /><br />collapse 如果可能，邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。<br /><br />inherit |
| border-spacing | 規(guī)定相鄰單元格邊框之間的距離。 | length length <br /><br />規(guī)定相鄰單元的邊框之間的距離。如果定義一個 length 參數(shù)，那么定義的是水平和垂直間距。如果定義兩個 length 參數(shù)，那么第一個設(shè)置水平間距，而第二個設(shè)置垂直間距。<br /><br />inherit |
| caption-side | 規(guī)定表格標(biāo)題的位置。 | top 默認(rèn)值。把表格標(biāo)題定位在表格之上。<br /><br />bottom 把表格標(biāo)題定位在表格之下。<br /><br />inherit<br /><br />戳我看示例 |
| empty-cells | 規(guī)定是否顯示表格中的空單元格上的邊框和背景。 | hide 不在空單元格周圍繪制邊框。<br /><br />show 在空單元格周圍繪制邊框。默認(rèn)。<br /><br />inherit |
| table-layout | 設(shè)置用于表格的布局算法。 | automatic 默認(rèn)。列寬度由單元格內(nèi)容設(shè)定。<br /><br />fixed 列寬由表格寬度和列寬度設(shè)定。<br /><br />inherit |
列表屬性（List）
| 屬性 | 描述 | 值 |
|---|---|---|
| list-style | 在一個聲明中設(shè)置所有的列表屬性。 |
list-style-type<br /><br />list-style-position<br /><br />list-style-image<br /><br />示例：list-style:square inside url('/i/arrow.gif');<br /><br />inherit |
| list-style-image | 將圖象設(shè)置為列表項標(biāo)記。 | URL 圖像的路徑。<br /><br />none 默認(rèn)。無圖形被顯示。<br /><br />inherit<br /><br />示例：list-style-image:url("/i/arrow.gif");
|
| list-style-position | 設(shè)置列表項標(biāo)記的放置位置。 | inside 列表項目標(biāo)記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對齊。<br /><br />outside 默認(rèn)值。保持標(biāo)記位于文本的左側(cè)。列表項目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對齊。<br /><br />inherit |
| list-style-type | 設(shè)置列表項標(biāo)記的類型。 | none 無標(biāo)記<br /><br />disc 默認(rèn)，實心圓。<br /><br />circle 空心圓<br /><br />square 實心方塊<br /><br />decimal 數(shù)字<br /><br />decimal-leading-zero 0開頭的數(shù)字標(biāo)記。(01, 02, 03, 等。)<br /><br />lower-roman 小寫羅馬數(shù)字(i, ii, iii, iv, v, 等。)<br /><br />upper-roman 大寫羅馬數(shù)字(I, II, III, IV, V, 等。)<br /><br />lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)<br /><br />upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)<br /><br />lower-greek 小寫希臘字母(alpha, beta, gamma, 等。)lower-latin 小寫拉丁字母(a, b, c, d, e, 等。)<br /><br />upper-latin 大寫拉丁字母(A, B, C, D, E, 等。)<br /><br />hebrew 傳統(tǒng)的希伯來編號方式<br /><br />armenian 傳統(tǒng)的亞美尼亞編號方式<br /><br />georgian 傳統(tǒng)的喬治亞編號方式(an, ban, gan, 等。)<br /><br />cjk-ideographic 簡單的表意數(shù)字(測試顯示是 一. 二. 三. 四. 五. ...)<br /><br />hiragana 標(biāo)記是：a, i, u, e, o, ka, ki, 等。（日文片假名）<br /><br />katakana 標(biāo)記是：A, I, U, E, O, KA, KI, 等。（日文片假名）<br /><br />hiragana-iroha 標(biāo)記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）<br /><br />katakana-iroha 標(biāo)記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） |
多列屬性（Multi-column）
| 屬性 | 描述 | 值 |
|---|---|---|
| column-count | 規(guī)定元素應(yīng)該被分隔的列數(shù)。 | number 元素內(nèi)容將被劃分的最佳列數(shù)。【為什么是最佳？】<br /><br />auto 默認(rèn)。由其他屬性決定列數(shù)，比如 "column-width"。 |
| column-gap | 規(guī)定列之間的間隔。 | length 把列間的間隔設(shè)置為指定的長度。<br /><br />normal 規(guī)定列間間隔為一個常規(guī)的間隔。W3C 建議的值是 1em。 |
| column-rule | 設(shè)置所有 column-rule-* 屬性的簡寫屬性。 |
column-rule-width<br /><br />column-rule-style<br /><br />column-rule-color<br /><br />示例：column-rule:3px outset #ff00ff;
|
| column-rule-color | 規(guī)定列之間規(guī)則的顏色。 | color 規(guī)定顏色規(guī)則。 |
| column-rule-style | 規(guī)定列之間規(guī)則的樣式。 | none 定義沒有規(guī)則。<br /><br />hidden 定義隱藏規(guī)則。<br /><br />dotted 定義點狀規(guī)則。<br /><br />dashed 定義虛線規(guī)則。<br /><br />solid 定義實線規(guī)則。<br /><br />double 定義雙線規(guī)則。<br /><br />groove 定義 3D grooved 規(guī)則。該效果取決于寬度和顏色值。<br /><br />ridge 定義 3D ridged 規(guī)則。該效果取決于寬度和顏色值。<br /><br />inset 定義 3D inset 規(guī)則。該效果取決于寬度和顏色值。<br /><br />outset 定義 3D outset 規(guī)則。該效果取決于寬度和顏色值。<br /><br />戳我看示例 |
| column-rule-width | 規(guī)定列之間規(guī)則的寬度。 | thin 定義纖細(xì)規(guī)則。<br /><br />medium 定義中等規(guī)則。<br /><br />thick 定義寬厚規(guī)則。<br /><br />length 規(guī)定規(guī)則的寬度。<br /><br />戳我看示例 |
| column-span | 規(guī)定元素應(yīng)該橫跨的列數(shù)。 | 1 元素應(yīng)橫跨一列。<br /><br />all 元素應(yīng)橫跨所有列。<br /><br />戳我看示例 |
| column-width | 規(guī)定列的寬度。 | auto 由瀏覽器決定列寬。<br /><br />length 規(guī)定列的寬度。<br /><br />戳我看示例 |
| columns | 規(guī)定設(shè)置 column-width 和 column-count 的簡寫屬性。 | column-width 列的寬度。<br /><br />column-count列數(shù)<br /><br />經(jīng)測試，同時定義的話按照最終列數(shù)少的顯示 |
文本（Text）
| 屬性 | 描述 | 值 |
|---|---|---|
| color | 設(shè)置文本的顏色。 | color_name(red）<br /><br />hex_number(#ff0000)<br /><br />rgb_number(rgb(255,0,0))<br /><br />inherit |
| direction | 規(guī)定文本的方向 / 書寫方向。 | ltr(默認(rèn)，左到右)<br /><br />rtl(右到左)<br /><br />inherit<br /><br />具體需要再試一下，基本用不到。單句內(nèi)的話語順序不變，感覺可以用于右對齊。 |
| letter-spacing | 設(shè)置字符間距。 | normal(默認(rèn))<br /><br />length(2px/-0.5em/0等價于默認(rèn))<br /><br />inherit |
| line-height | 設(shè)置行高。 | normal(默認(rèn)，一般為110%-120%)<br /><br />number：乘上文字本身高度(0黏在一塊/1)<br /><br />length(18px)<br /><br />%(0%/50%)<br /><br />inherit |
| text-align | 規(guī)定文本的水平對齊方式。 | left<br /><br />right<br /><br />center<br /><br />justify(兩端對齊，貌似不支持了)<br /><br />默認(rèn)值：如果 direction 屬性是 ltr，則默認(rèn)值是 left；如果 direction 是 rtl，則為 right。 |
| text-decoration | 規(guī)定添加到文本的裝飾效果。 | none(默認(rèn))<br /><br />underline：定義文本下的一條線。<br /><br />overline：定義文本上的一條線。<br /><br />line-through:定義穿過文本下的一條線。<br /><br />blink:定義閃爍的文本。(棄用了吧)<br /><br />inherit |
| text-indent | 規(guī)定文本塊首行的縮進(jìn)。 | length默認(rèn)：0<br /><br />%：基于父元素寬度的百分比。<br /><br />inherit |
| text-transform | 控制文本的大小寫。 | none<br /><br />capitalize<br /><br />uppercase<br /><br />lowercase<br /><br />inherit |
| unicode-bidi | 設(shè)置文本方向。 | normal(默認(rèn))<br /><br />embed<br /><br />bidi-override<br /><br />initial<br /><br />inherit<br /><br />參考示例 |
| white-space | 規(guī)定如何處理元素中的空白。 | normal 默認(rèn)。空白會被瀏覽器忽略。<br /><br />pre 空白會被瀏覽器保留。<br /><br />nowrap 文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。<br /><br />pre-wrap 保留空白符序列，但是正常地進(jìn)行換行。<br /><br />pre-line 合并空白符序列，但是保留換行符。<br /><br />inherit |
| word-spacing | 設(shè)置單詞間距。 | normal<br /><br />length<br /><br />inherit |
| text-overflow | 規(guī)定當(dāng)文本溢出包含元素時發(fā)生的事情。 | clip 修剪文本。(默認(rèn))<br /><br />ellipsis 顯示省略符號來代表被修剪的文本。<br /><br />string使用給定的字符串來代表被修剪的文本。（只有FF支持） |
| text-shadow | 向文本添加陰影。 |
h-shadow 必需。水平陰影的位置。允許負(fù)值。<br /><br />v-shadow 必需。垂直陰影的位置。允許負(fù)值。<br /><br />blur 可選。模糊的距離。<br /><br />color 可選。陰影的顏色。<br /><br />示例：5px 5px 10px #00FF00
|
| word-break | 規(guī)定非中日韓文本的換行規(guī)則。 | normal 使用瀏覽器默認(rèn)的換行規(guī)則。<br /><br />break-all 允許在單詞內(nèi)換行。<br /><br />keep-all 只能在半角空格或連字符處換行。 |
| word-wrap | 允許對長的不可分割的單詞進(jìn)行分割并換行到下一行。 | normal 只在允許的斷字點換行（瀏覽器保持默認(rèn)處理）。<br /><br />break-word 在長單詞或 URL 地址內(nèi)部進(jìn)行換行。 |
字體（Font）
| 屬性 | 描述 | 值 |
|---|---|---|
| font | 在一個聲明中設(shè)置所有字體屬性。 | font-style<br /><br />font-variant<br /><br />font-weight<br /><br />font-size/line-height<br /><br />font-family<br /><br />caption<br /><br />icon<br /><br />menu<br /><br />message-box<br /><br />small-caption<br /><br />status-bar |
| font-family | 規(guī)定文本的字體系列。 |
family-name<br /><br />generic-family<br /><br />inherit<br /><br />示例： font-family:"Times New Roman",Georgia,Serif;
|
| font-size | 規(guī)定文本的字體尺寸。 | xx-small/x-small/small/medium(默認(rèn))/large/x-large/xx-large<br /><br />smaller 比父元素更小的尺寸。<br /><br />larger 比父元素更大的尺寸。<br /><br />length 一個固定的值。<br /><br />% 基于父元素的一個百分比值。<br /><br />inherit |
| font-style | 規(guī)定文本的字體樣式。 | normal(默認(rèn))<br /><br />italic(斜體)<br /><br />oblique(斜體)<br /><br />inherit |
| font-weight | 規(guī)定字體的粗細(xì)。 | normal <br /><br />bold<br /><br />bolder<br /><br />lighter<br /><br />100-900，必須是100的倍數(shù)。400是normal，700是bold。<br /><br />inherit<br /><br /><br /><br /> |
| font-variant | 規(guī)定是否以小型大寫字母的字體顯示文本。 | normal(默認(rèn)，標(biāo)準(zhǔn))<br /><br />small-caps(小型大寫字母)<br /><br />inherit |
| font-size-adjust | 為元素規(guī)定 aspect 值。 | 一臉懵逼,戳我看W3School |
CSS3 字體 @font-face
在新的 @font-face 規(guī)則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。
如需為 HTML 元素使用字體，請通過 font-family 屬性來引用字體的名稱 (myFirstFont)：
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
過渡
| 屬性 | 描述 | 值 |
|---|---|---|
| transition | 簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性。 | transition-property<br /><br />transition-duration<br /><br />transition-timing-function<br /><br />transition-delay<br /><br />實例 |
| transition-property | 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。 | none 沒有屬性會獲得過渡效果。<br /><br />all 所有屬性都將獲得過渡效果。<br /><br />property 定義應(yīng)用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。<br /><br />示例：transitionProperty="width,height"
|
| transition-duration | 定義過渡效果花費(fèi)的時間。默認(rèn)是 0。 |
time 規(guī)定完成過渡效果需要花費(fèi)的時間（以秒或毫秒計）。<br /><br />示例：transitionDuration="5s"
|
| transition-timing-function | 規(guī)定過渡效果的時間曲線。默認(rèn)是 "ease"。 | linear 規(guī)定以相同速度開始至結(jié)束的過渡效果（cubic-bezier(0,0,1,1)）。<br /><br />ease 規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。<br /><br />ease-in 規(guī)定以慢速開始的過渡效果（cubic-bezier(0.42,0,1,1)）。<br /><br />ease-out 規(guī)定以慢速結(jié)束的過渡效果（cubic-bezier(0,0,0.58,1)）。<br /><br />ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果（cubic-bezier(0.42,0,0.58,1)）。<br /><br />cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值。 |
| transition-delay | 規(guī)定過渡效果何時開始。默認(rèn)是 0。 | time 規(guī)定在過渡效果開始之前需要等待的時間，以秒或毫秒計。 |
動畫 @keyframes
| 屬性 | 描述 | 值 |
|---|---|---|
| @keyframes | 規(guī)定動畫。 | 詳細(xì)內(nèi)容見下面 |
| animation | 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 | animation-name<br /><br />animation-duration<br /><br />animation-timing-function<br /><br />animation-delay<br /><br />animation-iteration-count<br /><br />animation-direction |
| animation-name | 規(guī)定 @keyframes 動畫的名稱。 | keyframename 規(guī)定需要綁定到選擇器的 keyframe 的名稱。<br /><br />none 規(guī)定無動畫效果（可用于覆蓋來自級聯(lián)的動畫）。 |
| animation-duration | 規(guī)定動畫完成一個周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。 | time 規(guī)定完成動畫所花費(fèi)的時間。默認(rèn)值是 0，意味著沒有動畫效果 |
| animation-timing-function | 規(guī)定動畫的速度曲線。默認(rèn)是 "ease"。 | linear 動畫從頭到尾的速度是相同的。<br /><br />ease 默認(rèn)。動畫以低速開始，然后加快，在結(jié)束前變慢。<br /><br />ease-in 動畫以低速開始。 <br /><br />ease-out 動畫以低速結(jié)束。<br /><br />ease-in-out 動畫以低速開始和結(jié)束。<br /><br />cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中自己的值。可能的值是從 0 到 1 的數(shù)值。 |
| animation-delay | 規(guī)定動畫何時開始。默認(rèn)是 0。 | time 定義動畫開始前等待的時間，以秒或毫秒計。 |
| animation-iteration-count | 規(guī)定動畫被播放的次數(shù)。默認(rèn)是 1。 | n 定義動畫播放次數(shù)的數(shù)值。<br /><br />infinite 規(guī)定動畫應(yīng)該無限次播放。 |
| animation-direction | 規(guī)定動畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。 | normal 默認(rèn)值。動畫應(yīng)該正常播放。<br /><br />alternate 動畫應(yīng)該輪流反向播放。 |
| animation-play-state | 規(guī)定動畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"。 | paused 規(guī)定動畫已暫停。<br /><br />running 規(guī)定動畫正在播放。 |
| animation-fill-mode | 規(guī)定對象動畫時間之外的狀態(tài)。 | none 不改變默認(rèn)行為。<br /><br />forwards 當(dāng)動畫完成后，保持最后一個屬性值（在最后一個關(guān)鍵幀中定義）。<br /><br />backwards 在 animation-delay 所指定的一段時間內(nèi)，在動畫顯示之前，應(yīng)用開始屬性值（在第一個關(guān)鍵幀中定義）。<br /><br />both 向前和向后填充模式都被應(yīng)用。 |
@keyframes
語法：
@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需。定義動畫的名稱。
keyframes-selector 必需。動畫時長的百分比。
合法的值：
0-100%
from（與 0% 相同）
to（與 100% 相同）
css-styles 必需。一個或多個合法的 CSS 樣式屬性。
【實例】
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
2D/3D轉(zhuǎn)換
| 屬性 | 描述 | 值 |
|---|---|---|
| transform | 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。 | 戳我了解 |
| backface-visibility | 定義元素在不面對屏幕時是否可見。 | visible 背面是可見的。<br /><br />hidden 背面是不可見的。 |
| transform-origin | 允許你改變被轉(zhuǎn)換元素的位置。默認(rèn)值： 50% 50% 0 | x-axis定義視圖被置于 X 軸的何處。可能的值：left/center/right/length/%<br /><br />y-axis 定義視圖被置于 Y 軸的何處。可能的值：top/center/bottom/length/%<br /><br />z-axis 定義視圖被置于 Z 軸的何處。可能的值： length<br /><br />戳我看示例 |
| transform-style | 規(guī)定被嵌套元素如何在 3D 空間中顯示。該屬性必須與 transform 屬性一同使用。 | flat 子元素將不保留其 3D 位置。<br /><br />preserve-3d 子元素將保留其 3D 位置。 |
內(nèi)容生成（Generated Content）
| 屬性 | 描述 | 值 |
|---|---|---|
| content | 與 :before 以及 :after 偽元素配合使用，來插入生成內(nèi)容。 | 見選擇器部分偽元素示例 |
| counter-reset | 創(chuàng)建或重置一個或多個計數(shù)器。 | none 默認(rèn)。不能對選擇器的計數(shù)器進(jìn)行重置。<br /><br />id number :id 定義重置計數(shù)器的選擇器、id 或 class。 number 可設(shè)置此選擇器出現(xiàn)次數(shù)的計數(shù)器的值?？梢允钦龜?shù)、零或負(fù)數(shù)。<br /><br />inherit |
| counter-increment | 遞增或遞減一個或多個計數(shù)器。 | none 默認(rèn)。選擇器無計數(shù)器增量。<br /><br />id number :id 定義將增加計數(shù)的選擇器、id 或 class。 number 定義增量?？梢允钦龜?shù)、零或者負(fù)數(shù)。<br /><br />inherit 規(guī)定應(yīng)該從父元素繼承 counter-increment 屬性的值。 |
| quotes | 設(shè)置嵌套引用的引號類型。 | none 規(guī)定 "content" 屬性的 "open-quote" 和 "close-quote" 的值不會產(chǎn)生任何引號。<br /><br />string string string string 定義要使用的引號。前兩個值規(guī)定第一級引用嵌套，后兩個值規(guī)定下一級引號嵌套。<br /><br />inherit |
content 與 counter 結(jié)合的相關(guān)實例
quotes實例
【代碼】
q:lang(en)
{
quotes: '"' '"' "'" "'";
}
<html lang="en">
<head>
</head>
<body>
<p><q>This is a <q>big</q> quote</q></p>
</body>
</html>
【輸出】
"This is a 'big' quote"