CSS 筆記速查

使用CSS

外部樣式表

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

文件內容：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

內部樣式表

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

內聯樣式

<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;} // 實質上就是*.important {color:red;}

ID選擇器

#intro {font-weight:bold;} // 實質上就是*#intro {font-weight:bold;}

屬性選擇器

*[title] {color:red;} // 包含title的所有元素
a[href][title] {color:red;} //同時有 href 和 title 屬性的 HTML 超鏈接的文本
a[] {color: red;} // 根據具體屬性值選擇,這種格式要求必須與屬性值完全匹配,引申見文中選擇器參考表格
a[] {color: red;} //多個屬性-值選擇器鏈接在一起來選擇

結合元素選擇器

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}

a標簽的實例

a:link {color: #FF0000}     /* 未訪問的鏈接 */
a:visited {color: #00FF00}  /* 已訪問的鏈接 */
a:hover {color: #FF00FF}    /* 鼠標移動到鏈接上 */
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;}

first-line

"first-line" 偽元素用于向文本的首行設置特殊樣式。

// p元素下的第一行，內容過長，瀏覽器自動換行的話自動換行的部分就已經不算第一行了
p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }

注釋："first-line" 偽元素只能用于塊級元素。
注釋：下面的屬性可應用于 "first-line" 偽元素：
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

first-color

"first-letter" 偽元素用于向文本的首字母設置特殊樣式：

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }
注釋："first-letter" 偽元素只能用于塊級元素。
注釋：下面的屬性可應用于 "first-letter" 偽元素：
font
color
background
margin
padding
border
text-decoration
vertical-align (僅當 float 為 none 時)
text-transform
line-height
float
clear

before 偽元素

":before" 偽元素可以在元素的內容前面插入新內容。
下面的例子在每個 <h1> 元素前面插入一幅圖片：

h1:before
  {
  content:url(logo.gif);
  }

:after 偽元素

":after" 偽元素可以在元素的內容之后插入新內容。
下面的例子在每個 <h1> 元素后面插入一幅圖片：

h1:after
  {
  content:url(logo.gif);
  }

選擇器參考表格

選擇器	描述
[attribute]	用于選取帶有指定屬性的元素。
[attribute=value]	用于選取帶有指定屬性和值的元素。
[attribute~=value]	用于選取屬性值中包含指定詞匯的元素。
[attribute	=value]	用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每個元素。
[attribute$=value]	匹配屬性值以指定值結尾的每個元素。
[attribute*=value]	匹配屬性值中包含指定值的每個元素。

CSS 樣式

屬性	描述	值
opacity	不透明度	value 規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）<br /><br />inherit
cursor	規定要顯示的光標的類型（形狀）。	default 默認光標（通常是一個箭頭）<br /><br />auto 默認。瀏覽器設置的光標。<br /><br />crosshair 光標呈現為十字線。<br /><br />pointer 光標呈現為指示鏈接的指針（一只手）<br /><br />move 此光標指示某對象可被移動。<br /><br />text 此光標指示文本。<br /><br />wait 此光標指示程序正忙（通常是一只表或沙漏）。<br /><br />help 此光標指示可用的幫助（通常是一個問號或一個氣球）。<br /><br />示例：`cursor:url('cursor.ico'),help;`<br /><br />更多屬性戳我　　查看演示戳我
resize	規定是否可由用戶對元素的尺寸進行調整。如果希望此屬性生效，需要設置元素的 overflow 屬性，值可以是 auto、hidden 或 scroll。	none 用戶無法調整元素的尺寸。<br /><br />both 用戶可調整元素的高度和寬度。<br /><br />horizontal 用戶可調整元素的寬度。<br /><br />vertical 用戶可調整元素的高度。

背景

屬性	描述	值
background	簡寫屬性，作用是將背景屬性設置在一個聲明中。	在一個聲明中設置所有背景屬性
background-attachment	背景圖像是否固定或者隨著頁面的其余部分滾動。	scroll(默認)<br /><br />fixed<br /><br />inherit
background-color	設置元素的背景顏色。	color_name(red）<br /><br />hex_number(#ff0000)<br /><br />rgb_number(rgb(255,0,0))<br /><br />transparent(默認，透明)<br /><br />inherit
background-image	把圖像設置為背景。	background-image: url(bg1.gif),url(bg2.gif)<br /><br />none(默認)<br /><br />inherit
background-position	設置背景圖像的起始位置。	top/center/bottom left/center/right<br /><br />x% y%<br /><br />xpos ypos<br /><br />【可以混合使用 % 和 position 值。】<br /><br />【默認0% 0%。僅規定一個值時，另一個默認為50%，即center】
background-repeat	設置背景圖像是否及如何重復。	repeat(默認)<br /><br />repeat-x<br /><br />repeat-y<br /><br />no-repeat<br /><br />inherit
background-size	規定背景圖像的尺寸	length(100px 50px)<br /><br />percentage(100% 100%)<br /><br />cover<br /><br />contain
background-origin	規定背景圖片的定位區域	padding-box<br /><br />border-box<br /><br />content-box
background-clip	規定背景的繪制區域	border-box<br /><br />padding-box<br /><br />content-box

邊框與輪廓

屬性	描述	值
border	在一個聲明中設置所有的邊框屬性。	border-width<br /><br />border-style<br /><br />border-color<br /><br />inherit<br /><br />示例： `border:5px solid red;`不能同分別設置四條邊款
border-color	設置四條邊框的顏色。	color_name(red）<br /><br />hex_number(#ff0000)<br /><br />rgb_number(rgb(255,0,0))<br /><br />transparent(默認，透明)<br /><br />inherit
border-style	設置四條邊框的樣式。	none 定義無邊框。<br /><br />hidden 與 "none" 相同。不過應用于表時除外，對于表，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	設置四條邊框的寬度。	thin 定義細的邊框。<br /><br />medium 默認值。定義中等的邊框。<br /><br />thick 定義粗的邊框。<br /><br />length 自定義邊框的寬度。<br /><br />inherit
border-top/right/bottom/left	在一個聲明中設置所有的上/右/下/左邊框屬性。	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	設置邊框的顏色。	見border-color
border-top/right/bottom/left-style	設置邊框的樣式。	見border-style
border-top/right/bottom/left-width	設置邊框的寬度。	見border-width
border-radius	簡寫屬性，設置所有四個 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	簡寫屬性，設置所有 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	規定用作邊框的圖片。	none 不使用圖像。<br /><br />image 圖像的路徑<br /><br />示例：`border-image-source: url(border.png);`
border-image-width	規定圖片邊框的寬度。從區域的上、右、下、左側向內的距離。	number 對應的 border-width 的倍數。<br /><br />% 參考邊框圖像區域的尺寸：區域的高度影響水平偏移，寬度影響垂直偏移。<br /><br />auto 寬度為對應的圖像切片的固有寬度。
border-image-outset	規定邊框圖像區域超出邊框的量。	length<br /><br />number對應的 border-width 的倍數。
border-image-slice	規定圖像邊框的向內偏移。	number 數字值，代表圖像中像素（如果是光柵圖像）或矢量坐標（如果是矢量圖像）。<br /><br />% 相對于圖像尺寸的百分比值：圖像的寬度影響水平偏移，高度影響垂直偏移。<br /><br />fill 保留邊框圖像的中間部分。
border-image-repeat	圖像邊框是否應平鋪、鋪滿或拉伸。	stretch 拉伸圖像來填充區域<br /><br />repeat 平鋪（重復）圖像來填充區域。<br /><br />round 類似repeat值。如果無法完整平鋪所有圖像，則對圖像進行縮放以適應區域。
outline	在一個聲明中設置所有的輪廓屬性。	outline-color<br /><br />outline-style<br /><br />outline-width<br /><br />inherit<br /><br />示例：`outline:#00FF00 dotted thick;`
outline-color	設置輪廓的顏色。	color_name(red）<br /><br />hex_number(#ff0000)<br /><br />rgb_number(rgb(255,0,0))<br /><br />invert(默認，顏色反轉（逆向的顏色）。使輪廓在不同背景顏色中都可見。)<br /><br />inherit
outline-style	設置輪廓的樣式。	none 默認，定義無輪廓。<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	設置輪廓的寬度。	thin 定義細的輪廓。<br /><br />medium 默認值。定義中等的輪廓。<br /><br />thick 定義粗的輪廓。<br /><br />length 自定義輪廓的寬度。<br /><br />inherit
outline-offset	對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓。	length 輪廓與邊框邊緣的距離。<br /><br />inherit
box-shadow	向方框添加一個或多個陰影。	h-shadow 必需。水平陰影的位置。允許負值。<br /><br />v-shadow 必需。垂直陰影的位置。允許負值。<br /><br />blur 可選。模糊距離。<br /><br />spread可選。陰影的尺寸。<br /><br />color 可選。陰影的顏色。請參閱 CSS 顏色值。<br /><br />inset 可選。將外部陰影 (outset) 改為內部陰影。<br /><br />戳我看效果

outline （輪廓）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。outline 屬性可設置元素周圍的輪廓線。

注釋：請始終在 border/outline-color 屬性之前聲明 border/outline-style 屬性。元素只有獲得邊框/輪廓以后才能改變其邊框/輪廓的顏色。

注釋：輪廓線不會占據空間，也不一定是矩形。

尺寸

屬性	描述	值
height	設置元素高度。	auto 默認。瀏覽器會計算出實際的高度。<br /><br />length<br /><br />% 基于包含它的塊級對象的百分比高度。<br /><br />inherit
width	設置元素寬度。	auto 默認。瀏覽器會計算出實際的寬度。<br /><br />length<br /><br />% 基于包含它的塊級對象的百分比寬度。<br /><br />inherit
max-height	設置元素的最大高度。	none 默認。定義對元素被允許的最大高度沒有限制。<br /><br />length<br /><br />% 定義基于包含它的塊級對象的百分比最大高度。<br /><br />inherit
max-width	設置元素的最大寬度。	none 默認。定義對元素被允許的最大寬度沒有限制。<br /><br />length<br /><br />% 定義基于包含它的塊級對象的百分比最大寬度。<br /><br />inherit
min-height	設置元素的最小高度。	length 定義元素的最小高度。默認值是 0。<br /><br />length<br /><br />%定義基于包含它的塊級對象的百分比最小高度。<br /><br />inherit
min-width	設置元素的最小寬度。	length 定義元素的最小寬度。默認取決于瀏覽器。<br /><br />length<br /><br />%定義基于包含它的塊級對象的百分比最小寬度。<br /><br />inherit

邊距屬性

內邊距屬性（Padding）

屬性	描述	值
padding	在一個聲明中設置所有內邊距屬性。	auto 瀏覽器計算<br /><br />length默認值是 0px。<br /><br />% 基于父元素的百分比。<br /><br />inherit
padding-top/right/bottom/left	設置元素的某內邊距。	length默認值是 0px。<br /><br />% 基于父元素的百分比。<br /><br />inherit

外邊距屬性（Margin）

屬性	描述	值
margin	在一個聲明中設置所有外邊距屬性。	auto 瀏覽器計算<br /><br />length默認值是 0px。<br /><br />% 基于父元素的百分比。<br /><br />inherit
margin-top/right/bottom/left	設置元素的某外邊距。	auto 瀏覽器計算<br /><br />length默認值是 0px。<br /><br />% 基于父元素的百分比。<br /><br />inherit

外邊距合并

外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。

合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

戳我看更多

定位（Positioning）布局定位，非地理定位

屬性	描述	值
position	規定元素的定位類型。	absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。<br /><br />relative 生成相對定位的元素，相對于其正常位置進行定位。<br /><br />fixed 生成絕對定位的元素，相對于瀏覽器窗口進行定位。<br /><br />static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。<br /><br />inherit
top/right/bottom/left	設置定位元素上/右/下/左外邊距邊界與其包含塊上/右/下/左邊界之間的偏移。	auto 默認。瀏覽器計算<br /><br />% 以包含元素的百分比計。可使用負值。<br /><br />length可使用負值。<br /><br />inherit
float	規定框是否應該浮動。	left<br /><br />right<br /><br />none 默認值。<br /><br />inherit
display	規定元素應該生成的框的類型。	none<br /><br />block<br /><br />inline<br /><br />inline-block<br /><br />更多屬性值戳我W3School
visibility	規定元素是否可見。會占據頁面上的空間。	visible 默認值。元素是可見的。<br /><br />hidden 元素是不可見的。<br /><br />collapse 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"。<br /><br />inherit
vertical-align	設置元素的垂直對齊方式。	baseline 默認。元素放置在父元素的基線上。<br /><br />sub 垂直對齊文本的下標<br /><br />super 垂直對齊文本的上標<br /><br />top 把元素的頂端與行中最高元素的頂端對齊<br /><br />middle 把此元素放置在父元素的中部。<br /><br />bottom 把元素的頂端與行中最低的元素的頂端對齊。<br /><br />text-top 把元素的頂端與父元素字體的頂端對齊<br /><br />text-bottom 把元素的底端與父元素字體的底端對齊。<br /><br />length<br /><br />% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。<br /><br />inherit
clip	剪裁絕對定位元素。	shape 設置元素的形狀。唯一合法的形狀值是：rect (top, right, bottom, left)<br /><br />auto 默認值。不應用任何剪裁。<br /><br />inherit<br /><br />實例：`clip:rect(0px,60px,200px,0px);`
z-index	設置元素的堆疊順序。	auto 默認。堆疊順序與父元素相等。<br /><br />number 設置元素的堆疊順序。<br /><br />inherit
overflow	規定當內容溢出元素框時發生的事情。	visible 默認值。內容不會被修剪，會呈現在元素框之外。<br /><br />hidden 內容會被修剪，并且其余內容是不可見的。<br /><br />scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。<br /><br />auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。<br /><br />inherit
overflow-x	如果內容溢出了元素內容區域，是否對內容的左/右邊緣進行裁剪。	visible 不裁剪內容，可能會顯示在內容框之外。<br /><br />hidden 裁剪內容 - 不提供滾動機制。<br /><br />scroll 裁剪內容 - 提供滾動機制。<br /><br />auto 如果溢出框，則應該提供滾動機制。<br /><br />no-display 如果內容不適合內容框，則刪除整個框。<br /><br />no-content 如果內容不適合內容框，則隱藏整個內容。
overflow-y	如果內容溢出了元素內容區域，是否對內容的上/下邊緣進行裁剪。	visible 不裁剪內容，可能會顯示在內容框之外。<br /><br />hidden 裁剪內容 - 不提供滾動機制。<br /><br />scroll 裁剪內容 - 提供滾動機制。<br /><br />auto 如果溢出框，則應該提供滾動機制。<br /><br />no-display 如果內容不適合內容框，則刪除整個框。<br /><br />no-content 如果內容不適合內容框，則隱藏整個內容。

表格屬性（Table）

屬性	描述	值
border-collapse	規定是否合并表格邊框。	separate 默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。<br /><br />collapse 如果可能，邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。<br /><br />inherit
border-spacing	規定相鄰單元格邊框之間的距離。	length length <br /><br />規定相鄰單元的邊框之間的距離。如果定義一個 length 參數，那么定義的是水平和垂直間距。如果定義兩個 length 參數，那么第一個設置水平間距，而第二個設置垂直間距。<br /><br />inherit
caption-side	規定表格標題的位置。	top 默認值。把表格標題定位在表格之上。<br /><br />bottom 把表格標題定位在表格之下。<br /><br />inherit<br /><br />戳我看示例
empty-cells	規定是否顯示表格中的空單元格上的邊框和背景。	hide 不在空單元格周圍繪制邊框。<br /><br />show 在空單元格周圍繪制邊框。默認。<br /><br />inherit
table-layout	設置用于表格的布局算法。	automatic 默認。列寬度由單元格內容設定。<br /><br />fixed 列寬由表格寬度和列寬度設定。<br /><br />inherit

列表屬性（List）

屬性	描述	值
list-style	在一個聲明中設置所有的列表屬性。	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	將圖象設置為列表項標記。	URL 圖像的路徑。<br /><br />none 默認。無圖形被顯示。<br /><br />inherit<br /><br />示例：`list-style-image:url("/i/arrow.gif");`
list-style-position	設置列表項標記的放置位置。	inside 列表項目標記放置在文本以內，且環繞文本根據標記對齊。<br /><br />outside 默認值。保持標記位于文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊。<br /><br />inherit
list-style-type	設置列表項標記的類型。	none 無標記<br /><br />disc 默認，實心圓。<br /><br />circle 空心圓<br /><br />square 實心方塊<br /><br />decimal 數字<br /><br />decimal-leading-zero 0開頭的數字標記。(01, 02, 03, 等。)<br /><br />lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)<br /><br />upper-roman 大寫羅馬數字(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 傳統的希伯來編號方式<br /><br />armenian 傳統的亞美尼亞編號方式<br /><br />georgian 傳統的喬治亞編號方式(an, ban, gan, 等。)<br /><br />cjk-ideographic 簡單的表意數字(測試顯示是一. 二. 三. 四. 五. ...)<br /><br />hiragana 標記是：a, i, u, e, o, ka, ki, 等。（日文片假名）<br /><br />katakana 標記是：A, I, U, E, O, KA, KI, 等。（日文片假名）<br /><br />hiragana-iroha 標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）<br /><br />katakana-iroha 標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

多列屬性（Multi-column）

屬性	描述	值
column-count	規定元素應該被分隔的列數。	number 元素內容將被劃分的最佳列數。【為什么是最佳？】<br /><br />auto 默認。由其他屬性決定列數，比如 "column-width"。
column-gap	規定列之間的間隔。	length 把列間的間隔設置為指定的長度。<br /><br />normal 規定列間間隔為一個常規的間隔。W3C 建議的值是 1em。
column-rule	設置所有 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	規定列之間規則的顏色。	color 規定顏色規則。
column-rule-style	規定列之間規則的樣式。	none 定義沒有規則。<br /><br />hidden 定義隱藏規則。<br /><br />dotted 定義點狀規則。<br /><br />dashed 定義虛線規則。<br /><br />solid 定義實線規則。<br /><br />double 定義雙線規則。<br /><br />groove 定義 3D grooved 規則。該效果取決于寬度和顏色值。<br /><br />ridge 定義 3D ridged 規則。該效果取決于寬度和顏色值。<br /><br />inset 定義 3D inset 規則。該效果取決于寬度和顏色值。<br /><br />outset 定義 3D outset 規則。該效果取決于寬度和顏色值。<br /><br />戳我看示例
column-rule-width	規定列之間規則的寬度。	thin 定義纖細規則。<br /><br />medium 定義中等規則。<br /><br />thick 定義寬厚規則。<br /><br />length 規定規則的寬度。<br /><br />戳我看示例
column-span	規定元素應該橫跨的列數。	1 元素應橫跨一列。<br /><br />all 元素應橫跨所有列。<br /><br />戳我看示例
column-width	規定列的寬度。	auto 由瀏覽器決定列寬。<br /><br />length 規定列的寬度。<br /><br />戳我看示例
columns	規定設置 column-width 和 column-count 的簡寫屬性。	column-width 列的寬度。<br /><br />column-count列數<br /><br />經測試，同時定義的話按照最終列數少的顯示

文本（Text）

屬性	描述	值
color	設置文本的顏色。	color_name(red）<br /><br />hex_number(#ff0000)<br /><br />rgb_number(rgb(255,0,0))<br /><br />inherit
direction	規定文本的方向 / 書寫方向。	ltr(默認，左到右)<br /><br />rtl(右到左)<br /><br />inherit<br /><br />具體需要再試一下，基本用不到。單句內的話語順序不變，感覺可以用于右對齊。
letter-spacing	設置字符間距。	normal(默認)<br /><br />length(2px/-0.5em/0等價于默認)<br /><br />inherit
line-height	設置行高。	normal(默認，一般為110%-120%)<br /><br />number：乘上文字本身高度(0黏在一塊/1)<br /><br />length(18px)<br /><br />%(0%/50%)<br /><br />inherit
text-align	規定文本的水平對齊方式。	left<br /><br />right<br /><br />center<br /><br />justify(兩端對齊，貌似不支持了)<br /><br />默認值：如果 direction 屬性是 ltr，則默認值是 left；如果 direction 是 rtl，則為 right。
text-decoration	規定添加到文本的裝飾效果。	none(默認)<br /><br />underline：定義文本下的一條線。<br /><br />overline：定義文本上的一條線。<br /><br />line-through:定義穿過文本下的一條線。<br /><br />blink:定義閃爍的文本。(棄用了吧)<br /><br />inherit
text-indent	規定文本塊首行的縮進。	length默認：0<br /><br />%：基于父元素寬度的百分比。<br /><br />inherit
text-transform	控制文本的大小寫。	none<br /><br />capitalize<br /><br />uppercase<br /><br />lowercase<br /><br />inherit
unicode-bidi	設置文本方向。	normal(默認)<br /><br />embed<br /><br />bidi-override<br /><br />initial<br /><br />inherit<br /><br />參考示例
white-space	規定如何處理元素中的空白。	normal 默認。空白會被瀏覽器忽略。<br /><br />pre 空白會被瀏覽器保留。<br /><br />nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 `<br>` 標簽為止。<br /><br />pre-wrap 保留空白符序列，但是正常地進行換行。<br /><br />pre-line 合并空白符序列，但是保留換行符。<br /><br />inherit
word-spacing	設置單詞間距。	normal<br /><br />length<br /><br />inherit
text-overflow	規定當文本溢出包含元素時發生的事情。	clip 修剪文本。(默認)<br /><br />ellipsis 顯示省略符號來代表被修剪的文本。<br /><br />string使用給定的字符串來代表被修剪的文本。（只有FF支持）
text-shadow	向文本添加陰影。	h-shadow 必需。水平陰影的位置。允許負值。<br /><br />v-shadow 必需。垂直陰影的位置。允許負值。<br /><br />blur 可選。模糊的距離。<br /><br />color 可選。陰影的顏色。<br /><br />示例：`5px 5px 10px #00FF00`
word-break	規定非中日韓文本的換行規則。	normal 使用瀏覽器默認的換行規則。<br /><br />break-all 允許在單詞內換行。<br /><br />keep-all 只能在半角空格或連字符處換行。
word-wrap	允許對長的不可分割的單詞進行分割并換行到下一行。	normal 只在允許的斷字點換行（瀏覽器保持默認處理）。<br /><br />break-word 在長單詞或 URL 地址內部進行換行。

字體（Font）

屬性	描述	值
font	在一個聲明中設置所有字體屬性。	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	規定文本的字體系列。	family-name<br /><br />generic-family<br /><br />inherit<br /><br />示例： `font-family:"Times New Roman",Georgia,Serif;`
font-size	規定文本的字體尺寸。	xx-small/x-small/small/medium(默認)/large/x-large/xx-large<br /><br />smaller 比父元素更小的尺寸。<br /><br />larger 比父元素更大的尺寸。<br /><br />length 一個固定的值。<br /><br />% 基于父元素的一個百分比值。<br /><br />inherit
font-style	規定文本的字體樣式。	normal(默認)<br /><br />italic(斜體)<br /><br />oblique(斜體)<br /><br />inherit
font-weight	規定字體的粗細。	normal <br /><br />bold<br /><br />bolder<br /><br />lighter<br /><br />100-900，必須是100的倍數。400是normal，700是bold。<br /><br />inherit<br /><br /><br /><br />
font-variant	規定是否以小型大寫字母的字體顯示文本。	normal(默認，標準)<br /><br />small-caps(小型大寫字母)<br /><br />inherit
font-size-adjust	為元素規定 aspect 值。	一臉懵逼,戳我看W3School

CSS3 字體 @font-face

更多參考W3School

在新的 @font-face 規則中，您必須首先定義字體的名稱（比如 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	簡寫屬性，用于在一個屬性中設置四個過渡屬性。	transition-property<br /><br />transition-duration<br /><br />transition-timing-function<br /><br />transition-delay<br /><br />實例
transition-property	規定應用過渡的 CSS 屬性的名稱。	none 沒有屬性會獲得過渡效果。<br /><br />all 所有屬性都將獲得過渡效果。<br /><br />property 定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。<br /><br />示例：`transitionProperty="width,height"`
transition-duration	定義過渡效果花費的時間。默認是 0。	time 規定完成過渡效果需要花費的時間（以秒或毫秒計）。<br /><br />示例：`transitionDuration="5s"`
transition-timing-function	規定過渡效果的時間曲線。默認是 "ease"。	linear 規定以相同速度開始至結束的過渡效果（cubic-bezier(0,0,1,1)）。<br /><br />ease 規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。<br /><br />ease-in 規定以慢速開始的過渡效果（cubic-bezier(0.42,0,1,1)）。<br /><br />ease-out 規定以慢速結束的過渡效果（cubic-bezier(0,0,0.58,1)）。<br /><br />ease-in-out 規定以慢速開始和結束的過渡效果（cubic-bezier(0.42,0,0.58,1)）。<br /><br />cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。
transition-delay	規定過渡效果何時開始。默認是 0。	time 規定在過渡效果開始之前需要等待的時間，以秒或毫秒計。

動畫 @keyframes

屬性	描述	值
@keyframes	規定動畫。	詳細內容見下面
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	規定 @keyframes 動畫的名稱。	keyframename 規定需要綁定到選擇器的 keyframe 的名稱。<br /><br />none 規定無動畫效果（可用于覆蓋來自級聯的動畫）。
animation-duration	規定動畫完成一個周期所花費的秒或毫秒。默認是 0。	time 規定完成動畫所花費的時間。默認值是 0，意味著沒有動畫效果
animation-timing-function	規定動畫的速度曲線。默認是 "ease"。	linear 動畫從頭到尾的速度是相同的。<br /><br />ease 默認。動畫以低速開始，然后加快，在結束前變慢。<br /><br />ease-in 動畫以低速開始。 <br /><br />ease-out 動畫以低速結束。<br /><br />ease-in-out 動畫以低速開始和結束。<br /><br />cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。
animation-delay	規定動畫何時開始。默認是 0。	time 定義動畫開始前等待的時間，以秒或毫秒計。
animation-iteration-count	規定動畫被播放的次數。默認是 1。	n 定義動畫播放次數的數值。<br /><br />infinite 規定動畫應該無限次播放。
animation-direction	規定動畫是否在下一周期逆向地播放。默認是 "normal"。	normal 默認值。動畫應該正常播放。<br /><br />alternate 動畫應該輪流反向播放。
animation-play-state	規定動畫是否正在運行或暫停。默認是 "running"。	paused 規定動畫已暫停。<br /><br />running 規定動畫正在播放。
animation-fill-mode	規定對象動畫時間之外的狀態。	none 不改變默認行為。<br /><br />forwards 當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。<br /><br />backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。<br /><br />both 向前和向后填充模式都被應用。

@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轉換

屬性	描述	值
transform	向元素應用 2D 或 3D 轉換。	戳我了解
backface-visibility	定義元素在不面對屏幕時是否可見。	visible 背面是可見的。<br /><br />hidden 背面是不可見的。
transform-origin	允許你改變被轉換元素的位置。默認值： 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	規定被嵌套元素如何在 3D 空間中顯示。該屬性必須與 transform 屬性一同使用。	flat 子元素將不保留其 3D 位置。<br /><br />preserve-3d 子元素將保留其 3D 位置。

內容生成（Generated Content）

屬性	描述	值
content	與 :before 以及 :after 偽元素配合使用，來插入生成內容。	見選擇器部分偽元素示例
counter-reset	創建或重置一個或多個計數器。	none 默認。不能對選擇器的計數器進行重置。<br /><br />id number :id 定義重置計數器的選擇器、id 或 class。 number 可設置此選擇器出現次數的計數器的值。可以是正數、零或負數。<br /><br />inherit
counter-increment	遞增或遞減一個或多個計數器。	none 默認。選擇器無計數器增量。<br /><br />id number :id 定義將增加計數的選擇器、id 或 class。 number 定義增量。可以是正數、零或者負數。<br /><br />inherit 規定應該從父元素繼承 counter-increment 屬性的值。
quotes	設置嵌套引用的引號類型。	none 規定 "content" 屬性的 "open-quote" 和 "close-quote" 的值不會產生任何引號。<br /><br />string string string string 定義要使用的引號。前兩個值規定第一級引用嵌套，后兩個值規定下一級引號嵌套。<br /><br />inherit

content 與 counter 結合的相關實例

請戳我W3School

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"

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

CSS 速查（幾乎涵蓋所有屬性，用時三天整理）