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;} // 文檔中的每個(gè)元素都為紅色
類選擇器
.important {color:red;} // 實(shí)質(zhì)上就是*.important {color:red;}
ID選擇器
#intro {font-weight:bold;} // 實(shí)質(zhì)上就是*#intro {font-weight:bold;}
屬性選擇器
*[title] {color:red;} // 包含title的所有元素
a[href][title] {color:red;} //同時(shí)有 href 和 title 屬性的 HTML 超鏈接的文本
a[] {color: red;} // 根據(jù)具體屬性值選擇,這種格式要求必須與屬性值完全匹配,引申見(jiàn)文中選擇器參考表格
a[] {color: red;} //多個(gè)屬性-值選擇器鏈接在一起來(lái)選擇
結(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;} // 代表緊跟一個(gè)h1與一個(gè)p的p元素
偽類
偽類的語(yǔ)法：
selector : pseudo-class {property: value}
屬性|描述|CSS版本
--|--
:active|向被激活的元素添加樣式。|1
:focus|向擁有鍵盤輸入焦點(diǎn)的元素添加樣式。|2
:hover|當(dāng)鼠標(biāo)懸浮在元素上方時(shí)锅论，向元素添加樣式。|1
:link|向未被訪問(wèn)的鏈接添加樣式楣号。|1
:visited|向已被訪問(wèn)的鏈接添加樣式最易。|1
:first-child|向元素的第一個(gè)子元素添加樣式。|2
:lang|向帶有指定 lang 屬性的元素添加樣式炫狱。|2
a標(biāo)簽的實(shí)例
a:link {color: #FF0000} /* 未訪問(wèn)的鏈接 */
a:visited {color: #00FF00} /* 已訪問(wèn)的鏈接 */
a:hover {color: #FF00FF} /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
提示：在 CSS 定義中藻懒，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的视译。
提示：在 CSS 定義中嬉荆，a:active 必須被置于 a:hover 之后，才是有效的酷含。
first-child 偽類
p:first-child {font-weight: bold;} //一個(gè)p元素员寇，必須是其父元素的第一個(gè)子元素。
li:first-child {text-transform:uppercase;}
偽元素
偽元素的語(yǔ)法：
selector:pseudo-element {property:value;}
屬性|描述|CSS
--|--
:first-letter|向文本的第一個(gè)字母添加特殊樣式第美。|1
:first-line|向文本的首行添加特殊樣式蝶锋。|1
:before|在元素之前添加內(nèi)容。|2
:after|在元素之后添加內(nèi)容什往。|2
first-line
"first-line" 偽元素用于向文本的首行設(shè)置特殊樣式扳缕。
// p元素下的第一行，內(nèi)容過(guò)長(zhǎng)别威，瀏覽器自動(dòng)換行的話自動(dòng)換行的部分就已經(jīng)不算第一行了
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
注釋："first-line" 偽元素只能用于塊級(jí)元素躯舔。
注釋：下面的屬性可應(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" 偽元素只能用于塊級(jí)元素。
注釋：下面的屬性可應(yīng)用于 "first-letter" 偽元素：
font
color
background
margin
padding
border
text-decoration
vertical-align (僅當(dāng) float 為 none 時(shí))
text-transform
line-height
float
clear
before 偽元素
":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容省古。
下面的例子在每個(gè) <h1> 元素前面插入一幅圖片：
h1:before
{
content:url(logo.gif);
}
:after 偽元素
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容粥庄。
下面的例子在每個(gè) <h1> 元素后面插入一幅圖片：
h1:after
{
content:url(logo.gif);
}
選擇器參考表格
| 選擇器 | 描述 | |
|---|---|---|
| [attribute] | 用于選取帶有指定屬性的元素。 | |
| [attribute=value] | 用于選取帶有指定屬性和值的元素豺妓。 | |
| [attribute~=value] | 用于選取屬性值中包含指定詞匯的元素惜互。 | |
| [attribute | =value] | 用于選取帶有以指定值開(kāi)頭的屬性值的元素布讹，該值必須是整個(gè)單詞。 |
| [attribute^=value] | 匹配屬性值以指定值開(kāi)頭的每個(gè)元素训堆。 | |
| [attribute$=value] | 匹配屬性值以指定值結(jié)尾的每個(gè)元素描验。 | |
| [attribute*=value] | 匹配屬性值中包含指定值的每個(gè)元素。 |
CSS 樣式
| 屬性 | 描述 | 值 |
|---|---|---|
| opacity | 不透明度 | value 規(guī)定不透明度坑鱼。從 0.0 （完全透明）到 1.0（完全不透明）<br /><br />inherit |
| cursor | 規(guī)定要顯示的光標(biāo)的類型（形狀）膘流。 | default 默認(rèn)光標(biāo)（通常是一個(gè)箭頭）<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)指示某對(duì)象可被移動(dòng)。<br /><br />text 此光標(biāo)指示文本画恰。<br /><br />wait 此光標(biāo)指示程序正忙（通常是一只表或沙漏）彭谁。<br /><br />help 此光標(biāo)指示可用的幫助（通常是一個(gè)問(wèn)號(hào)或一個(gè)氣球）。<br /><br />示例：cursor:url('cursor.ico'),help;<br /><br />更多屬性戳我 查看演示戳我
|
| resize | 規(guī)定是否可由用戶對(duì)元素的尺寸進(jìn)行調(diào)整阐枣。 如果希望此屬性生效马靠，需要設(shè)置元素的 overflow 屬性奄抽，值可以是 auto蔼两、hidden 或 scroll。 | none 用戶無(wú)法調(diào)整元素的尺寸逞度。<br /><br />both 用戶可調(diào)整元素的高度和寬度额划。<br /><br />horizontal 用戶可調(diào)整元素的寬度。<br /><br />vertical 用戶可調(diào)整元素的高度档泽。 |
背景
| 屬性 | 描述 | 值 |
|---|---|---|
| background | 簡(jiǎn)寫屬性俊戳，作用是將背景屬性設(shè)置在一個(gè)聲明中。 | 在一個(gè)聲明中設(shè)置所有背景屬性 |
| background-attachment | 背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)馆匿。 | 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 值≡咧耄】<br /><br />【默認(rèn)0% 0%恃锉。僅規(guī)定一個(gè)值時(shí)，另一個(gè)默認(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 | 在一個(gè)聲明中設(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 定義無(wú)邊框州既。<br /><br />hidden 與 "none" 相同。不過(guò)應(yīng)用于表時(shí)除外瘟芝，對(duì)于表易桃，hidden 用于解決邊框沖突。<br /><br />dotted 定義點(diǎn)狀邊框锌俱。<br /><br />dashed 定義虛線晤郑。<br /><br />solid 定義實(shí)線。<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 | 在一個(gè)聲明中設(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è)置邊框的顏色圆到。 | 見(jiàn)border-color |
| border-top/right/bottom/left-style | 設(shè)置邊框的樣式。 | 見(jiàn)border-style |
| border-top/right/bottom/left-width | 設(shè)置邊框的寬度卑吭。 | 見(jiàn)border-width |
| border-radius | 簡(jiǎn)寫屬性芽淡，設(shè)置所有四個(gè) border-*-radius 屬性。 |
length 定義圓角的形狀豆赏。<br /><br />% 以百分比定義圓角的形狀挣菲。<br /><br />示例：border-radius:25px 20px 15px 10px;分別是左上，右上河绽，右下己单，左下。 |
| border-top-left-radius | 定義邊框左上角的形狀耙饰。 | 見(jiàn) border-radius |
| border-top-right-radius | 定義邊框右上角的形狀纹笼。 | 見(jiàn) border-radius |
| border-bottom-right-radius | 定義邊框右下角的形狀。 | 見(jiàn) border-radius |
| border-bottom-left-radius | 定義邊框左下角的形狀苟跪。 | 見(jiàn) border-radius |
| border-image | 簡(jiǎn)寫屬性廷痘，設(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 />講真，不會(huì)用笋额。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 對(duì)應(yīng)的 border-width 的倍數(shù)。<br /><br />% 參考邊框圖像區(qū)域的尺寸：區(qū)域的高度影響水平偏移淹真，寬度影響垂直偏移讶迁。<br /><br />auto 寬度為對(duì)應(yīng)的圖像切片的固有寬度。 |
| border-image-outset | 規(guī)定邊框圖像區(qū)域超出邊框的量核蘸。 | length<br /><br />number對(duì)應(yīng)的 border-width 的倍數(shù)巍糯。 |
| border-image-slice | 規(guī)定圖像邊框的向內(nèi)偏移。 | number 數(shù)字值客扎，代表圖像中像素（如果是光柵圖像）或矢量坐標(biāo)（如果是矢量圖像）祟峦。<br /><br />% 相對(duì)于圖像尺寸的百分比值：圖像的寬度影響水平偏移，高度影響垂直偏移虐唠。<br /><br />fill 保留邊框圖像的中間部分搀愧。 |
| border-image-repeat | 圖像邊框是否應(yīng)平鋪惰聂、鋪滿或拉伸疆偿。 | stretch 拉伸圖像來(lái)填充區(qū)域<br /><br />repeat 平鋪（重復(fù)）圖像來(lái)填充區(qū)域。<br /><br />round 類似repeat值搓幌。如果無(wú)法完整平鋪所有圖像杆故，則對(duì)圖像進(jìn)行縮放以適應(yīng)區(qū)域。 |
| outline | 在一個(gè)聲明中設(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)（逆向的顏色）拐揭。使輪廓在不同背景顏色中都可見(jiàn)撤蟆。)<br /><br />inherit |
| outline-style | 設(shè)置輪廓的樣式。 | none 默認(rèn)堂污，定義無(wú)輪廓家肯。<br /><br />dotted 定義點(diǎn)狀輪廓。<br /><br />dashed 定義虛線輪廓盟猖。<br /><br />solid 定義實(shí)線輪廓讨衣。<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 | 對(duì)輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓衷蜓。 | length 輪廓與邊框邊緣的距離累提。<br /><br />inherit |
| box-shadow | 向方框添加一個(gè)或多個(gè)陰影。 | h-shadow 必需磁浇。水平陰影的位置斋陪。允許負(fù)值。<br /><br />v-shadow 必需置吓。垂直陰影的位置无虚。允許負(fù)值。<br /><br />blur 可選衍锚。模糊距離友题。<br /><br />spread可選。陰影的尺寸戴质。<br /><br />color 可選度宦。陰影的顏色。請(qǐng)參閱 CSS 顏色值告匠。<br /><br />inset 可選戈抄。將外部陰影 (outset) 改為內(nèi)部陰影。<br /><br />戳我看效果 |
outline （輪廓）是繪制于元素周圍的一條線后专，位于邊框邊緣的外圍划鸽，可起到突出元素的作用。outline 屬性可設(shè)置元素周圍的輪廓線行贪。
注釋：請(qǐng)始終在 border/outline-color 屬性之前聲明 border/outline-style 屬性漾稀。元素只有獲得邊框/輪廓以后才能改變其邊框/輪廓的顏色模闲。
注釋：輪廓線不會(huì)占據(jù)空間，也不一定是矩形崭捍。
尺寸
| 屬性 | 描述 | 值 |
|---|---|---|
| height | 設(shè)置元素高度尸折。 | auto 默認(rèn)。瀏覽器會(huì)計(jì)算出實(shí)際的高度殷蛇。<br /><br />length<br /><br />% 基于包含它的塊級(jí)對(duì)象的百分比高度实夹。<br /><br />inherit |
| width | 設(shè)置元素寬度。 | auto 默認(rèn)粒梦。瀏覽器會(huì)計(jì)算出實(shí)際的寬度亮航。<br /><br />length<br /><br />% 基于包含它的塊級(jí)對(duì)象的百分比寬度。<br /><br />inherit |
| max-height | 設(shè)置元素的最大高度匀们。 | none 默認(rèn)缴淋。定義對(duì)元素被允許的最大高度沒(méi)有限制。<br /><br />length<br /><br />% 定義基于包含它的塊級(jí)對(duì)象的百分比最大高度泄朴。<br /><br />inherit |
| max-width | 設(shè)置元素的最大寬度重抖。 | none 默認(rèn)。定義對(duì)元素被允許的最大寬度沒(méi)有限制祖灰。<br /><br />length<br /><br />% 定義基于包含它的塊級(jí)對(duì)象的百分比最大寬度钟沛。<br /><br />inherit |
| min-height | 設(shè)置元素的最小高度。 | length 定義元素的最小高度局扶。默認(rèn)值是 0恨统。<br /><br />length<br /><br />%定義基于包含它的塊級(jí)對(duì)象的百分比最小高度。<br /><br />inherit |
| min-width | 設(shè)置元素的最小寬度三妈。 | length 定義元素的最小寬度畜埋。默認(rèn)取決于瀏覽器。<br /><br />length<br /><br />%定義基于包含它的塊級(jí)對(duì)象的百分比最小寬度沈跨。<br /><br />inherit |
邊距屬性
內(nèi)邊距屬性（Padding）
| 屬性 | 描述 | 值 |
|---|---|---|
| padding | 在一個(gè)聲明中設(shè)置所有內(nèi)邊距屬性由捎。 | auto 瀏覽器計(jì)算<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 | 在一個(gè)聲明中設(shè)置所有外邊距屬性。 | auto 瀏覽器計(jì)算<br /><br />length默認(rèn)值是 0px锭亏。<br /><br />% 基于父元素的百分比纠吴。<br /><br />inherit |
| margin-top/right/bottom/left | 設(shè)置元素的某外邊距。 | auto 瀏覽器計(jì)算<br /><br />length默認(rèn)值是 0px慧瘤。<br /><br />% 基于父元素的百分比戴已。<br /><br />inherit |
外邊距合并
外邊距合并指的是固该，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距糖儡。
合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者伐坏。
定位（Positioning）布局定位，非地理定位
| 屬性 | 描述 | 值 |
|---|---|---|
| position | 規(guī)定元素的定位類型握联。 | absolute 生成絕對(duì)定位的元素桦沉，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。<br /><br />relative 生成相對(duì)定位的元素金闽，相對(duì)于其正常位置進(jìn)行定位纯露。<br /><br />fixed 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位代芜。<br /><br />static 默認(rèn)值蓉坎。沒(méi)有定位那槽，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。<br /><br />inherit |
| top/right/bottom/left | 設(shè)置定位元素上/右/下/左外邊距邊界與其包含塊上/右/下/左邊界之間的偏移。 | auto 默認(rèn)璧眠。瀏覽器計(jì)算<br /><br />% 以包含元素的百分比計(jì)∪腊校可使用負(fù)值丁逝。<br /><br />length可使用負(fù)值。<br /><br />inherit |
| float | 規(guī)定框是否應(yīng)該浮動(dò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ī)定元素是否可見(jiàn)潮改。會(huì)占據(jù)頁(yè)面上的空間狭郑。 | visible 默認(rèn)值。元素是可見(jiàn)的汇在。<br /><br />hidden 元素是不可見(jiàn)的翰萨。<br /><br />collapse 當(dāng)在表格元素中使用時(shí)，此值可刪除一行或一列糕殉，但是它不會(huì)影響表格的布局亩鬼。被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用。如果此值被用在其他的元素上阿蝶，會(huì)呈現(xiàn)為 "hidden"雳锋。<br /><br />inherit |
| vertical-align | 設(shè)置元素的垂直對(duì)齊方式。 | baseline 默認(rèn)羡洁。元素放置在父元素的基線上玷过。<br /><br />sub 垂直對(duì)齊文本的下標(biāo)<br /><br />super 垂直對(duì)齊文本的上標(biāo)<br /><br />top 把元素的頂端與行中最高元素的頂端對(duì)齊<br /><br />middle 把此元素放置在父元素的中部。<br /><br />bottom 把元素的頂端與行中最低的元素的頂端對(duì)齊。<br /><br />text-top 把元素的頂端與父元素字體的頂端對(duì)齊<br /><br />text-bottom 把元素的底端與父元素字體的底端對(duì)齊辛蚊。<br /><br />length<br /><br />% 使用 "line-height" 屬性的百分比值來(lái)排列此元素粤蝎。允許使用負(fù)值。<br /><br />inherit |
| clip | 剪裁絕對(duì)定位元素袋马。 | shape 設(shè)置元素的形狀诽里。唯一合法的形狀值是：rect (top, right, bottom, left)<br /><br />auto 默認(rèn)值。不應(yīng)用任何剪裁飞蛹。<br /><br />inherit<br /><br />實(shí)例：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)容溢出元素框時(shí)發(fā)生的事情。 | visible 默認(rèn)值霉囚。內(nèi)容不會(huì)被修剪捕仔，會(huì)呈現(xiàn)在元素框之外。<br /><br />hidden 內(nèi)容會(huì)被修剪盈罐，并且其余內(nèi)容是不可見(jiàn)的榜跌。<br /><br />scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容盅粪。<br /><br />auto 如果內(nèi)容被修剪钓葫，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。<br /><br />inherit |
| overflow-x | 如果內(nèi)容溢出了元素內(nèi)容區(qū)域票顾，是否對(duì)內(nèi)容的左/右邊緣進(jìn)行裁剪础浮。 | visible 不裁剪內(nèi)容，可能會(huì)顯示在內(nèi)容框之外奠骄。<br /><br />hidden 裁剪內(nèi)容 - 不提供滾動(dòng)機(jī)制豆同。<br /><br />scroll 裁剪內(nèi)容 - 提供滾動(dòng)機(jī)制。<br /><br />auto 如果溢出框含鳞，則應(yīng)該提供滾動(dòng)機(jī)制影锈。<br /><br />no-display 如果內(nèi)容不適合內(nèi)容框，則刪除整個(gè)框蝉绷。<br /><br />no-content 如果內(nèi)容不適合內(nèi)容框鸭廷，則隱藏整個(gè)內(nèi)容。 |
| overflow-y | 如果內(nèi)容溢出了元素內(nèi)容區(qū)域潜必，是否對(duì)內(nèi)容的上/下邊緣進(jìn)行裁剪靴姿。 | visible 不裁剪內(nèi)容，可能會(huì)顯示在內(nèi)容框之外磁滚。<br /><br />hidden 裁剪內(nèi)容 - 不提供滾動(dòng)機(jī)制。<br /><br />scroll 裁剪內(nèi)容 - 提供滾動(dòng)機(jī)制。<br /><br />auto 如果溢出框垂攘，則應(yīng)該提供滾動(dòng)機(jī)制维雇。<br /><br />no-display 如果內(nèi)容不適合內(nèi)容框，則刪除整個(gè)框晒他。<br /><br />no-content 如果內(nèi)容不適合內(nèi)容框吱型，則隱藏整個(gè)內(nèi)容。 |
表格屬性（Table）
| 屬性 | 描述 | 值 |
|---|---|---|
| border-collapse | 規(guī)定是否合并表格邊框陨仅。 | separate 默認(rèn)值津滞。邊框會(huì)被分開(kāi)。不會(huì)忽略 border-spacing 和 empty-cells 屬性灼伤。<br /><br />collapse 如果可能触徐，邊框會(huì)合并為一個(gè)單一的邊框。會(huì)忽略 border-spacing 和 empty-cells 屬性狐赡。<br /><br />inherit |
| border-spacing | 規(guī)定相鄰單元格邊框之間的距離撞鹉。 | length length <br /><br />規(guī)定相鄰單元的邊框之間的距離。如果定義一個(gè) length 參數(shù)颖侄，那么定義的是水平和垂直間距鸟雏。如果定義兩個(gè) length 參數(shù)，那么第一個(gè)設(shè)置水平間距览祖，而第二個(gè)設(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 | 在一個(gè)聲明中設(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è)置為列表項(xiàng)標(biāo)記丙者。 | URL 圖像的路徑复斥。<br /><br />none 默認(rèn)。無(wú)圖形被顯示械媒。<br /><br />inherit<br /><br />示例：list-style-image:url("/i/arrow.gif");
|
| list-style-position | 設(shè)置列表項(xiàng)標(biāo)記的放置位置目锭。 | inside 列表項(xiàng)目標(biāo)記放置在文本以內(nèi)评汰，且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊。<br /><br />outside 默認(rèn)值痢虹。保持標(biāo)記位于文本的左側(cè)被去。列表項(xiàng)目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊奖唯。<br /><br />inherit |
| list-style-type | 設(shè)置列表項(xiàng)標(biāo)記的類型惨缆。 | none 無(wú)標(biāo)記<br /><br />disc 默認(rèn)，實(shí)心圓丰捷。<br /><br />circle 空心圓<br /><br />square 實(shí)心方塊<br /><br />decimal 數(shù)字<br /><br />decimal-leading-zero 0開(kāi)頭的數(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)的希伯來(lái)編號(hào)方式<br /><br />armenian 傳統(tǒng)的亞美尼亞編號(hào)方式<br /><br />georgian 傳統(tǒng)的喬治亞編號(hào)方式(an, ban, gan, 等少漆。)<br /><br />cjk-ideographic 簡(jiǎn)單的表意數(shù)字(測(cè)試顯示是 一. 二. 三. 四. 五. ...)<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è)置為指定的長(zhǎng)度。<br /><br />normal 規(guī)定列間間隔為一個(gè)常規(guī)的間隔负懦。W3C 建議的值是 1em筒捺。 |
| column-rule | 設(shè)置所有 column-rule-* 屬性的簡(jiǎn)寫屬性。 |
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 定義沒(méi)有規(guī)則颗品。<br /><br />hidden 定義隱藏規(guī)則肯尺。<br /><br />dotted 定義點(diǎn)狀規(guī)則沃缘。<br /><br />dashed 定義虛線規(guī)則。<br /><br />solid 定義實(shí)線規(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 的簡(jiǎn)寫屬性捉超。 | column-width 列的寬度。<br /><br />column-count列數(shù)<br /><br />經(jīng)測(cè)試唯绍，同時(shí)定義的話按照最終列數(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ī)定文本的方向 / 書(shū)寫方向。 | ltr(默認(rèn)况芒，左到右)<br /><br />rtl(右到左)<br /><br />inherit<br /><br />具體需要再試一下惜纸，基本用不到。單句內(nèi)的話語(yǔ)順序不變牛柒，感覺(jué)可以用于右對(duì)齊堪簿。 |
| letter-spacing | 設(shè)置字符間距。 | normal(默認(rèn))<br /><br />length(2px/-0.5em/0等價(jià)于默認(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ī)定文本的水平對(duì)齊方式。 | left<br /><br />right<br /><br />center<br /><br />justify(兩端對(duì)齊蛾魄，貌似不支持了)<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:定義穿過(guò)文本下的一條線朝氓。<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)』婷疲空白會(huì)被瀏覽器忽略橡庞。<br /><br />pre 空白會(huì)被瀏覽器保留。<br /><br />nowrap 文本不會(huì)換行印蔗，文本會(huì)在在同一行上繼續(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)文本溢出包含元素時(shí)發(fā)生的事情。 | clip 修剪文本颜曾。(默認(rèn))<br /><br />ellipsis 顯示省略符號(hào)來(lái)代表被修剪的文本纠拔。<br /><br />string使用給定的字符串來(lái)代表被修剪的文本。（只有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 | 允許對(duì)長(zhǎng)的不可分割的單詞進(jìn)行分割并換行到下一行。 | normal 只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）阔涉。<br /><br />break-word 在長(zhǎng)單詞或 URL 地址內(nèi)部進(jìn)行換行缆娃。 |
字體（Font）
| 屬性 | 描述 | 值 |
|---|---|---|
| font | 在一個(gè)聲明中設(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 一個(gè)固定的值。<br /><br />% 基于父元素的一個(gè)百分比值它碎。<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 元素使用字體幢码，請(qǐng)通過(guò) font-family 屬性來(lái)引用字體的名稱 (myFirstFont)：
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
過(guò)渡
| 屬性 | 描述 | 值 |
|---|---|---|
| transition | 簡(jiǎn)寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過(guò)渡屬性尖飞。 | transition-property<br /><br />transition-duration<br /><br />transition-timing-function<br /><br />transition-delay<br /><br />實(shí)例 |
| transition-property | 規(guī)定應(yīng)用過(guò)渡的 CSS 屬性的名稱症副。 | none 沒(méi)有屬性會(huì)獲得過(guò)渡效果。<br /><br />all 所有屬性都將獲得過(guò)渡效果政基。<br /><br />property 定義應(yīng)用過(guò)渡效果的 CSS 屬性名稱列表贞铣，列表以逗號(hào)分隔。<br /><br />示例：transitionProperty="width,height"
|
| transition-duration | 定義過(guò)渡效果花費(fèi)的時(shí)間沮明。默認(rèn)是 0辕坝。 |
time 規(guī)定完成過(guò)渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)）。<br /><br />示例：transitionDuration="5s"
|
| transition-timing-function | 規(guī)定過(guò)渡效果的時(shí)間曲線珊擂。默認(rèn)是 "ease"圣勒。 | linear 規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果（cubic-bezier(0,0,1,1)）费变。<br /><br />ease 規(guī)定慢速開(kāi)始，然后變快圣贸，然后慢速結(jié)束的過(guò)渡效果（cubic-bezier(0.25,0.1,0.25,1)）挚歧。<br /><br />ease-in 規(guī)定以慢速開(kāi)始的過(guò)渡效果（cubic-bezier(0.42,0,1,1)）吁峻。<br /><br />ease-out 規(guī)定以慢速結(jié)束的過(guò)渡效果（cubic-bezier(0,0,0.58,1)）。<br /><br />ease-in-out 規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果（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ī)定過(guò)渡效果何時(shí)開(kāi)始。默認(rèn)是 0义辕。 | time 規(guī)定在過(guò)渡效果開(kāi)始之前需要等待的時(shí)間傀蚌，以秒或毫秒計(jì)。 |
動(dòng)畫(huà) @keyframes
| 屬性 | 描述 | 值 |
|---|---|---|
| @keyframes | 規(guī)定動(dòng)畫(huà)窜醉。 | 詳細(xì)內(nèi)容見(jiàn)下面 |
| animation | 所有動(dòng)畫(huà)屬性的簡(jiǎn)寫屬性，除了 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 動(dòng)畫(huà)的名稱。 | keyframename 規(guī)定需要綁定到選擇器的 keyframe 的名稱嫁佳。<br /><br />none 規(guī)定無(wú)動(dòng)畫(huà)效果（可用于覆蓋來(lái)自級(jí)聯(lián)的動(dòng)畫(huà)）湿弦。 |
| animation-duration | 規(guī)定動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的秒或毫秒蔬充。默認(rèn)是 0罗标。 | time 規(guī)定完成動(dòng)畫(huà)所花費(fèi)的時(shí)間。默認(rèn)值是 0，意味著沒(méi)有動(dòng)畫(huà)效果 |
| animation-timing-function | 規(guī)定動(dòng)畫(huà)的速度曲線御板。默認(rèn)是 "ease"井濒。 | linear 動(dòng)畫(huà)從頭到尾的速度是相同的者甲。<br /><br />ease 默認(rèn)刽辙。動(dòng)畫(huà)以低速開(kāi)始，然后加快宰缤，在結(jié)束前變慢颂翼。<br /><br />ease-in 動(dòng)畫(huà)以低速開(kāi)始。 <br /><br />ease-out 動(dòng)畫(huà)以低速結(jié)束慨灭。<br /><br />ease-in-out 動(dòng)畫(huà)以低速開(kāi)始和結(jié)束朦乏。<br /><br />cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中自己的值⊙踔瑁可能的值是從 0 到 1 的數(shù)值呻疹。 |
| animation-delay | 規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始。默認(rèn)是 0筹陵。 | time 定義動(dòng)畫(huà)開(kāi)始前等待的時(shí)間刽锤，以秒或毫秒計(jì)。 |
| animation-iteration-count | 規(guī)定動(dòng)畫(huà)被播放的次數(shù)惶翻。默認(rèn)是 1姑蓝。 | n 定義動(dòng)畫(huà)播放次數(shù)的數(shù)值。<br /><br />infinite 規(guī)定動(dòng)畫(huà)應(yīng)該無(wú)限次播放吕粗。 |
| animation-direction | 規(guī)定動(dòng)畫(huà)是否在下一周期逆向地播放纺荧。默認(rèn)是 "normal"。 | normal 默認(rèn)值。動(dòng)畫(huà)應(yīng)該正常播放宙暇。<br /><br />alternate 動(dòng)畫(huà)應(yīng)該輪流反向播放输枯。 |
| animation-play-state | 規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停。默認(rèn)是 "running"占贫。 | paused 規(guī)定動(dòng)畫(huà)已暫停桃熄。<br /><br />running 規(guī)定動(dòng)畫(huà)正在播放。 |
| animation-fill-mode | 規(guī)定對(duì)象動(dòng)畫(huà)時(shí)間之外的狀態(tài)型奥。 | none 不改變默認(rèn)行為瞳收。<br /><br />forwards 當(dāng)動(dòng)畫(huà)完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）厢汹。<br /><br />backwards 在 animation-delay 所指定的一段時(shí)間內(nèi)螟深，在動(dòng)畫(huà)顯示之前，應(yīng)用開(kāi)始屬性值（在第一個(gè)關(guān)鍵幀中定義）烫葬。<br /><br />both 向前和向后填充模式都被應(yīng)用界弧。 |
@keyframes
語(yǔ)法：
@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需。定義動(dòng)畫(huà)的名稱搭综。
keyframes-selector 必需垢箕。動(dòng)畫(huà)時(shí)長(zhǎng)的百分比。
合法的值：
0-100%
from（與 0% 相同）
to（與 100% 相同）
css-styles 必需兑巾。一個(gè)或多個(gè)合法的 CSS 樣式屬性条获。
【實(shí)例】
@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 | 定義元素在不面對(duì)屏幕時(shí)是否可見(jiàn)闪朱。 | visible 背面是可見(jiàn)的月匣。<br /><br />hidden 背面是不可見(jiàn)的。 |
| 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 偽元素配合使用鲫惶，來(lái)插入生成內(nèi)容蜈首。 | 見(jiàn)選擇器部分偽元素示例 |
| counter-reset | 創(chuàng)建或重置一個(gè)或多個(gè)計(jì)數(shù)器。 | none 默認(rèn)。不能對(duì)選擇器的計(jì)數(shù)器進(jìn)行重置欢策。<br /><br />id number :id 定義重置計(jì)數(shù)器的選擇器吆寨、id 或 class。 number 可設(shè)置此選擇器出現(xiàn)次數(shù)的計(jì)數(shù)器的值踩寇∽那澹可以是正數(shù)、零或負(fù)數(shù)俺孙。<br /><br />inherit |
| counter-increment | 遞增或遞減一個(gè)或多個(gè)計(jì)數(shù)器辣卒。 | none 默認(rèn)。選擇器無(wú)計(jì)數(shù)器增量睛榄。<br /><br />id number :id 定義將增加計(jì)數(shù)的選擇器荣茫、id 或 class。 number 定義增量懈费〖坡叮可以是正數(shù)、零或者負(fù)數(shù)憎乙。<br /><br />inherit 規(guī)定應(yīng)該從父元素繼承 counter-increment 屬性的值票罐。 |
| quotes | 設(shè)置嵌套引用的引號(hào)類型。 | none 規(guī)定 "content" 屬性的 "open-quote" 和 "close-quote" 的值不會(huì)產(chǎn)生任何引號(hào)泞边。<br /><br />string string string string 定義要使用的引號(hào)该押。前兩個(gè)值規(guī)定第一級(jí)引用嵌套，后兩個(gè)值規(guī)定下一級(jí)引號(hào)嵌套阵谚。<br /><br />inherit |
content 與 counter 結(jié)合的相關(guān)實(shí)例
quotes實(shí)例
【代碼】
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"