@規則設定區
@keyframes規則
keyframe選擇器
x % 選擇百分比: (套用至動畫整個過程的百分之x的時候,來指定此時候的樣式)
@font-face規則@import規則
選擇器設定區
通配(Universal Selectors)
全域選擇
全域選擇 (套用至HTML文件中所有的元素)
類型(Type Selectors)
根元素選擇
html (套用至HTML文件中唯一"html"標籤)
區域元素選擇
body (套用至HTML文件中唯一"body"標籤)
section (套用至HTML文件中所有"section"標籤)
nav (套用至HTML文件中所有"nav"標籤)
article (套用至HTML文件中所有"article"標籤)
aside (套用至HTML文件中所有"aside"標籤)
h1 (套用至HTML文件中所有"h1"標籤)
h2 (套用至HTML文件中所有"h2"標籤)
h3 (套用至HTML文件中所有"h3"標籤)
h4 (套用至HTML文件中所有"h4"標籤)
h5 (套用至HTML文件中所有"h5"標籤)
h6 (套用至HTML文件中所有"h6"標籤)
hgroup (套用至HTML文件中所有"hgroup"標籤)
header (套用至HTML文件中所有"header"標籤)
footer (套用至HTML文件中所有"footer"標籤)
address (套用至HTML文件中所有"address"標籤)
群組列表元素選擇
p (套用至HTML文件中所有"p"標籤)
hr (套用至HTML文件中所有"hr"標籤)
pre (套用至HTML文件中所有"pre"標籤)
blockquote (套用至HTML文件中所有"blockquote"標籤)
ol (套用至HTML文件中所有"ol"標籤)
ul (套用至HTML文件中所有"ul"標籤)
li (套用至HTML文件中所有"li"標籤)
dl (套用至HTML文件中所有"dl"標籤)
dt (套用至HTML文件中所有"dt"標籤)
dd (套用至HTML文件中所有"dd"標籤)
figure (套用至HTML文件中所有"figure"標籤)
figcaption (套用至HTML文件中所有"figcaption"標籤)
div (套用至HTML文件中所有"div"標籤)
文字階層元素選擇
a (套用至HTML文件中所有"a"標籤)
em (套用至HTML文件中所有"em"標籤)
strong (套用至HTML文件中所有"strong"標籤)
small (套用至HTML文件中所有"small"標籤)
s (套用至HTML文件中所有"s"標籤)
cite (套用至HTML文件中所有"cite"標籤)
q (套用至HTML文件中所有"q"標籤)
dfn (套用至HTML文件中所有"dfn"標籤)
abbr (套用至HTML文件中所有"abbr"標籤)
data (套用至HTML文件中所有"data"標籤)
time (套用至HTML文件中所有"time"標籤)
code (套用至HTML文件中所有"code"標籤)
var (套用至HTML文件中所有"var"標籤)
samp (套用至HTML文件中所有"samp"標籤)
kbd (套用至HTML文件中所有"kbd"標籤)
sup (套用至HTML文件中所有"sup"標籤)
sub (套用至HTML文件中所有"sub"標籤)
i (套用至HTML文件中所有"i"標籤)
b (套用至HTML文件中所有"b"標籤)
u (套用至HTML文件中所有"u"標籤)
mark (套用至HTML文件中所有"mark"標籤)
ruby (套用至HTML文件中所有"ruby"標籤)
rt (套用至HTML文件中所有"rt"標籤)
rp (套用至HTML文件中所有"rp"標籤)
bdi (套用至HTML文件中所有"bdi"標籤)
bdo (套用至HTML文件中所有"bdo"標籤)
span (套用至HTML文件中所有"span"標籤)
編訂元素選擇
del (套用至HTML文件中所有"del"標籤)
ins (套用至HTML文件中所有"ins"標籤)
內嵌元素選擇
img (套用至HTML文件中所有"img"標籤)
iframe (套用至HTML文件中所有"iframe"標籤)
embed (套用至HTML文件中所有"embed"標籤)
object (套用至HTML文件中所有"object"標籤)
param (套用至HTML文件中所有"param"標籤)
video (套用至HTML文件中所有"video"標籤)
audio (套用至HTML文件中所有"audio"標籤)
source (套用至HTML文件中所有"source"標籤)
track (套用至HTML文件中所有"track"標籤)
canvas (套用至HTML文件中所有"canvas"標籤)
map (套用至HTML文件中所有"map"標籤)
area (套用至HTML文件中所有"area"標籤)
表格元素選擇
table (套用至HTML文件中所有"table"標籤)
caption (套用至HTML文件中所有"caption"標籤)
colgroup (套用至HTML文件中所有"colgroup"標籤)
col (套用至HTML文件中所有"col"標籤)
tbody (套用至HTML文件中所有"tbody"標籤)
thead (套用至HTML文件中所有"thead"標籤)
tfoot (套用至HTML文件中所有"tfoot"標籤)
tr (套用至HTML文件中所有"tr"標籤)
td (套用至HTML文件中所有"td"標籤)
th (套用至HTML文件中所有"th"標籤)
表單元素選擇
form (套用至HTML文件中所有"form"標籤)
fieldset (套用至HTML文件中所有"fieldset"標籤)
legend (套用至HTML文件中所有"legend"標籤)
label (套用至HTML文件中所有"label"標籤)
input (套用至HTML文件中所有"input"標籤)
button (套用至HTML文件中所有"button"標籤)
select (套用至HTML文件中所有"select"標籤)
datalist (套用至HTML文件中所有"datalist"標籤)
optgroup (套用至HTML文件中所有"optgroup"標籤)
option (套用至HTML文件中所有"option"標籤)
textarea (套用至HTML文件中所有"textarea"標籤)
keygen (套用至HTML文件中所有"keygen"標籤)
output (套用至HTML文件中所有"output"標籤)
progress (套用至HTML文件中所有"progress"標籤)
meter (套用至HTML文件中所有"meter"標籤)
互動式元素選擇
details (套用至HTML文件中所有"details"標籤)
summary (套用至HTML文件中所有"summary"標籤)
command (套用至HTML文件中所有"command"標籤)
menu (套用至HTML文件中所有"menu"標籤)
屬性(Attribute Selectors)
純粹屬性選擇
[attr]
屬性名: (套用至HTML文件中含有上述屬性名稱的所有元素)
元素屬性選擇
E[attr]
元素名: 屬性名: (套用至HTML文件中所有含有上述屬性名稱的所有E元素;元素名稱請參考類型選擇器)
屬性值匹配選擇
E[attr=val]
元素名: 屬性名: 屬性值: 匹配方式:(套用至HTML文件中所有含有上述屬性名稱且屬性值部分或完全匹配val的所有E元素;元素名稱請參考類型選擇器)
"="匹配至屬性值完全等於val;"~="匹配至屬性值中有個單字為val,並且以空白分隔;"|="匹配至屬性值以val-開頭
"^="匹配至屬性值以val開頭的字串;"$="匹配至屬性值以val結尾的字串;"*="匹配至屬性值中有val的字串,不管位置在哪
類別(Class Selectors)
純粹類別選擇
.cla
類別名: (套用至HTML文件中所有類別名的值是上述的值的所有元素)
元素類別選擇
E.cla
元素名: 類別名: (套用至HTML文件中所有類別名的值是上述的值的所有E元素)
識別(ID Selectors)
純粹識別選擇
#id
識別名: (套用至HTML文件中所有識別名的值是上述的值的所有元素)
元素識別選擇
E#id
元素名: 識別名: (套用至HTML文件中所有識別名的值是上述的值的所有E元素)
鏈結偽類(Link Pseudo-Class Selectors)
link偽類選擇
E:link
元素名: (套用至HTML文件中尚未被瀏覽過的連結)
visited偽類選擇
E:visited
元素名: (套用至HTML文件中已經被瀏覽過的連結)
動態偽類(Dynamic Pseudo-Class Selectors)
active偽類選擇
E:active
元素名: (套用至HTML文件中的物件,此物件在被滑鼠點擊到放開這段時間的狀態)
hover偽類選擇
E:hover
元素名: (套用至HTML文件中的物件,此物件被游標移到其上但是尚未點擊的狀態)
focus偽類選擇
E:focus
元素名: (套用至HTML文件中獲得焦點的狀態)
focus/hover偽類選擇
E:focus:hover
元素名: (套用至HTML文件中獲得焦點且同時被游標定位的狀態)
目標偽類(Target Pseudo-Class Selectors)
target偽類選擇
E:target
元素名: (套用至HTML文件中書籤指向的目標對象元素)
語言偽類(Lang Pseudo-Class Selectors)
lang偽類選擇
E:lang(lang)
元素名: 語言名: (套用至HTML文件中以語言值lang寫成的特定元素E,即使元素E沒有lang屬性)
UI元素偽類(UI Elements Pseudo-Class Selectors)
enabled偽類選擇
E:enabled
元素名: (套用至HTML文件中可以用的狀態的元素E;包含:
定義href屬性的a/area/link元素;沒有被設定成disabled的button/input/select/textarea/option/command元素)
disabled偽類選擇
E:disabled
元素名: (套用至HTML文件中不可以用的狀態的元素E;包含:
被設定成disabled的button/input/select/textarea/option/command元素)
checked偽類選擇
E:checked
元素名: (套用至HTML文件中被勾選或選中狀態的元素E;包含:
type屬性為checkbox或radio且被選中的input元素;selected的option元素;checked的command元素)
indeterminate偽類選擇
E:indeterminate
元素名: (套用至HTML文件中任何一組單選框的任何一個選項沒有被選中時的狀態的元素E;當只要有一個選項被選中,樣式即取消
default偽類選擇
E:default
元素名: (套用至HTML文件中已經被設定成預設的checked/selected表單元素,即使勾選或不勾選都維持樣式
結構偽類(Structural Pseudo-Class Selectors)
nth-child偽類選擇
E:nth-child(an+b)
元素名: a(-1~50): b(-50~50):
(套用至HTML文件中指定的元素E,其父元素下從頭數起第b個開始的子代且是E元素,然後每經過a個的子代且是元素E,都會被套用;
當b=0,則每經過a的循環的子代且是元素E會被套用,如果a也=0,則沒有任何元素被套用;
當a=-1,則b的值必須為正,表示其親代元素下最一開始的b個子代元素且是E元素的會被套用;
當a=0,b的值必須為正,套用至親代元素下第b個子元素且是E元素會被套用)
nth-last-child偽類選擇
E:nth-last-child(an+b)
元素名: a(-1~50): b(-50~50):
(套用至HTML文件中指定的元素E,其父元素下從尾數起第b個開始的子代且是E元素,然後每經過a個的子代且是元素E,都會被套用;
當b=0,則每經過a的循環的子代且是元素E會被套用,如果a也=0,則沒有任何元素被套用;
當a=-1,則b的值必須為正,表示其親代元素下最一開始的b個子代元素且是E元素的會被套用;
當a=0,b的值必須為正,套用至親代元素下第b個子元素且是E元素會被套用)
nth-of-type偽類選擇
E:nth-of-type(an+b)
元素名: a(-1~50): b(-50~50):
(套用至HTML文件中指定的元素E,其父元素下從頭數起第b個開始的E元素,然後每經過a個的子代元素E,都會被套用;
當b=0,則每經過a的循環的子代元素E會被套用,如果a也=0,則沒有任何元素被套用;
當a=-1,則b的值必須為正,表示其親代元素下最一開始的b個子代E元素的會被套用;
當a=0,b的值必須為正,套用至親代元素下第b個子代E元素會被套用)
nth-last-of-type偽類選擇
E:nth-last-of-type(an+b)
元素名: a(-1~50): b(-50~50):
(套用至HTML文件中指定的元素E,其父元素下從尾數起第b個開始的E元素,然後每經過a個的子代元素E,都會被套用;
當b=0,則每經過a的循環的子代元素E會被套用,如果a也=0,則沒有任何元素被套用;
當a=-1,則b的值必須為正,表示其親代元素下最一開始的b個子代E元素的會被套用;
當a=0,b的值必須為正,套用至親代元素下第b個子代E元素會被套用)
first-child偽類選擇
E:first-child
元素名: (套用至HTML文件中指定的元素E,其親代元素下的第一個子代元素是E元素時套用,不是E元素就不能套用)
last-child偽類選擇
E:last-child
元素名: (套用至HTML文件中指定的元素E,其親代元素下的最後一個子代元素是E元素時套用,不是E元素就不能套用)
first-of-type偽類選擇
E:first-of-type
元素名: (套用至HTML文件中指定的元素E,其親代元素下的第一個子代E元素時套用)
last-of-type偽類選擇
E:last-of-type
元素名: (套用至HTML文件中指定的元素E,其親代元素下的最後一個子代E元素時套用)
only-child偽類選擇
E:only-child
元素名: (套用至HTML文件中指定的元素E,其親代元素下的唯一的子代且是E元素,不是E元素不能套用;
其選擇器效用等同於E:first-child:last-child,也同於E:nth-child(1):nth-last-child(1))
only-of-type偽類選擇
E:only-of-type
元素名: (套用至HTML文件中指定的元素E,其親代元素下的唯一的子代E元素;
其選擇器效用等同於E:first-of-type:last-of-type,也同於E:nth-of-type(1):nth-last-of-type(1))
empty偽類選擇
E:empty
元素名: (套用至HTML文件中指定的元素E,而這E元素沒有任何的子代元素)
反相偽類(Negation Pseudo-Class Selectors)
not偽類選擇
E:not(S1):not(S2)...
選擇以下範圍:
元素名:
但是排除以下範圍:
元素名: 類別名: 識別名:
(套用至選擇範圍E元素,但是排除以上所選擇的範圍S1,S2,S3,...)
偽元素(Pseudo-Element Selectors)
first-line偽元素選擇
E::first-line
元素名: (套用至HTML文件中指定的E元素段落的第一行)
first-letter偽元素選擇
E::first-letter
元素名: (套用至HTML文件中指定的E元素段落的第一行的第一個字)
before偽元素選擇
E::before
元素名: (套用至HTML文件中指定的E元素前面追加內容或改變樣式)
after偽元素選擇
E::after
元素名: (套用至HTML文件中指定的E元素後面追加內容或改變樣式)
結合子(Selectors Combinators)
後代元素結合子
S1 S2 ...
設定親代元素:
設定子代元素:
(套用至S1子代裡面的S2子代裡面的S3...,即使對任何的正整數n,Sn和Sn+1之間有隔著其他元素)
子代元素結合子
S1 > S2 ...
設定親代元素:
設定子代元素:
(套用至S1子代裡面的S2子代裡面的S3...,但是對任何的正整數n,Sn和Sn+1之間不能隔著其他元素)
同級相鄰元素結合子
S1 + S2 ...
設定同級元素參考:
設定相鄰元素:
(套用至和S1同級且緊跟在後的S2元素,然後隨後再後的S3....,注意只套用此情況一次)
同級相鄰連續元素結合子
S1 ~ S2 ...
設定同級元素參考:
設定相鄰元素:
(套用至和S1同級且緊跟在後的S2元素,然後隨後再後的S3....,注意套用此情況多次)
複雜選擇(Complex Selectors)
雜項選擇結合
Selectors1 com_op Selectors2 com_op Selectors3 ...
元素名:
類別名:
識別名:
屬性名: 屬性值: 屬性值匹配方式: = ~= |= ^= $= *=
無參數偽類:無參數偽元素:
nth-child()僞類 a(-1~50): b(-50~50):
nth-last-child()僞類 a(-1~50): b(-50~50):
nth-of-type()僞類 a(-1~50): b(-50~50):
nth-last-of-type()僞類 a(-1~50): b(-50~50):
lang()偽類 語言名:
結合子:後代 子代 相鄰同級 相鄰同級連續 單組選擇器結尾
產生以上所有選擇器的複雜組合,語法形式如下:
E1[attr1][attr2=va2]#id1.cla1:ps1:ps2::pc1::pc2 com_op E2.....
樣式設定區
文本(Text)
設定文本的文字顏色
hexa color model
選擇顏色:
(將文字的顏色設定成以上所選取的顏色)
預覽區文字
設定文本文字橫向排列的方向
ltr
(將文字的排列設定成從左邊排到右邊)
預覽區文字
rtl
(將文字的排列設定成從右邊排到左邊)
預覽區文字
設定文字英文字母或特殊字元的間距
normal
(將文字的字母或字元的間距調整成正常)
預覽區文字
x px
設定間距(1~100px):
(將文字的字母或字元的間距調整成上面的數值,單位是px)
預覽區文字
x em
設定間距(1~50em):
(將文字的字母或字元的間距調整成上面的數值,單位是em)
預覽區文字
設定段落中文字的行高
normal
(將文字的每一行行高設定成正常)
預覽區第1行
預覽區第2行
預覽區第3行
x multi
設定行高(0~50): (將文字的每一行行高調整成上面的數值,此為目前字體大小的x倍;例如:數值為2,行高則為目前字體大小的2倍)
預覽區第1行
預覽區第2行
預覽區第3行
x px
設定行高(0~500): (將文字的每一行行高調整成上面的數值,單位是px)
預覽區第1行
預覽區第2行
預覽區第3行
x cm
設定行高(0~300): (將文字的每一行行高調整成上面的數值,單位是cm)
預覽區第1行
預覽區第2行
預覽區第3行
x pt
設定行高(0~300): (將文字的每一行行高調整成上面的數值,單位是pt)
預覽區第1行
預覽區第2行
預覽區第3行
x pc
設定行高(0~300): (將文字的每一行行高調整成上面的數值,單位是pc)
預覽區第1行
預覽區第2行
預覽區第3行
x %
設定行高(0~500): (將文字的每一行行高調整成上面的數值,此為目前字體大小的x%;例如:數值為50%,行高則為目前字體大小的50%)
預覽區第1行
預覽區第2行
預覽區第3行
設定文本橫向的對齊方式
left
(設定文本的橫向對齊方式,每一行均靠左對齊)
預覽區第1行
預覽區第2行
預覽區第3行
right
(設定文本的橫向對齊方式,每一行均靠右對齊)
預覽區第1行
預覽區第2行
預覽區第3行
center
(設定文本的橫向對齊方式,每一行均置中對齊)
預覽區第1行
預覽區第2行
預覽區第3行
justify
(設定文本的橫向對齊方式,每一行的寬度均等)
預覽區第1行
預覽區第2行
預覽區第3行
設定文本文字裝飾直線
none
(設定文本每一行的裝飾,沒有裝飾)
預覽區文字
underline
(設定文本每一行的裝飾,底部加直線)
預覽區文字
overline
(設定文本每一行的裝飾,頂部加直線)
預覽區文字
line-through
(設定文本每一行的裝飾,穿越文字的直線)
預覽區文字
設定文本區塊的首行縮排的值
x px
設定縮排(0~500): (將元素內段落的首行的縮排為上面的值,單位為px)
預覽區第1行
預覽區第2行
預覽區第3行
x pt
設定縮排(0~300): (將元素內段落的首行的縮排為上面的值,單位為pt)
預覽區第1行
預覽區第2行
預覽區第3行
x pc
設定縮排(0~300): (將元素內段落的首行的縮排為上面的值,單位為pc)
預覽區第1行
預覽區第2行
預覽區第3行
x cm
設定縮排(0~300): (將元素內段落的首行的縮排為上面的值,單位為cm)
預覽區第1行
預覽區第2行
預覽區第3行
x em
設定縮排(0~300): (將元素內段落的首行的縮排為上面的值,單位為em)
預覽區第1行
預覽區第2行
預覽區第3行
x %
設定縮排(0~500): (將元素內段落的首行的縮排設定成其親代元素的寬度的x %)
預覽區第1行
預覽區第2行
預覽區第3行
設定文本的大小寫互相轉換
none
(將文本中的英文單字保持和原本的一樣)
The first paragraph of preview-area.
The second paragraph of preview-area.
capitalize
(將文本中的英文單字的第一個字母轉成大寫)
The first paragraph of preview-area.
The second paragraph of preview-area.
uppercase
(將文本中的英文單字每個字母轉成大寫)
The first paragraph of preview-area.
The second paragraph of preview-area.
lowercase
(將文本中的英文單字每個字母轉成小寫)
The first paragraph of preview-area.
The second paragraph of preview-area.
設定文本區塊的垂直方向對齊方式
baseline
(將物件垂直對齊到其親代元素的底線)
The first paragraph
of image in preview-area.
sub
(將物件垂直對齊到其親代元素的下標,使其成為其下標)
The first paragraph
super
(將物件垂直對齊到其親代元素的上標,使其成為其上標)
The first paragraph
top
(將物件垂直對齊到其親代物件BOX模型的最高處的線上)
The first paragraph
text-top
(將物件垂直對齊到其親代元素文本的最上面的線上)
The first paragraph
middle
(將物件垂直對齊到其親代元素垂直方向的中間線上)
The first paragraph
bottom
(將物件垂直對齊到其親代物件BOX模型的最低處的線上)
The first paragraph
text-bottom
(將物件垂直對齊到其親代元素文本的最下面的線上)
The first paragraph
x px
設定垂直對齊: (將物件垂直對齊其親代元素垂直方向的中間線為基準往上或往下的距離,單位為px)
The first paragraph
x cm
設定垂直對齊: (將物件垂直對齊其親代元素垂直方向的中間線為基準往上或往下的距離,單位為cm)
The first paragraph
x %
設定垂直對齊: (將物件垂直對齊其親代元素垂直方向的中間線為基準往上或往下的距離,單位為親代元素的行高的x %)
The first paragraph
設定文本的空白處理方式
normal
(設定文本中的所有空白都會被瀏覽器忽略)
這是 預覽區第一行 有許多空白
預覽區第二行 少許空白
pre
(設定文本中的所有空白都會被瀏覽器保留;類似HTML文件中<pre>標籤的處理方式)
這是 預覽區第一行 有許多空白
預覽區第二行 少許空白
nowrap
(設定文本不會換行,在同一行上繼續,直到遇到換行標籤<br>為止)
這是 預覽區第一行 有許多空白
預覽區第二行 少許空白
pre-wrap
(設定文本中的所有空白都會被瀏覽器保留,但是正常換行)
這是 預覽區第一行 有許多空白
預覽區第二行 少許空白
pre-line
(設定文本中的所有空白都會被瀏覽器忽略,但是保留換行標籤)
這是 預覽區第一行 有許多空白
預覽區第二行 少許空白
設定文本的中文文字或英文單字的間距
normal
(將文本的英文單字的間距設成正常)
This is the first paragraph of preview-area.
x px
設定間距(1~100px)
(將文本的英文單字的間距設成上面的值,單位是px)
This is the first paragraph of preview-area.
x em
設定間距(1~50em)
(將文本的英文單字的間距設成上面的值,單位是em)
This is the first paragraph of preview-area.
設定文本的標點符號位置(全部瀏覽器尚未支持)
none first last allow-end force-end
設定文本的標點符號的修飾(全部瀏覽器尚未支持)
none start end allow-end adjacent
設定文本的齊行來改變單字的距離(只有IE瀏覽器支持)
auto
(瀏覽器本身決定齊行的算法)
none
(禁用齊行表示文本)
inter-word
(增加或減少單字間的間距)
inter-ideograph
(用表意文本來排齊文本內容)
inter-cluster
(只對不包含內部間隔的特定語系內容進行排齊)
distribute
(分配方法,類似報紙的文本內容,唯獨最後一行不排齊)
kashida
(透過拉伸字符來排齊文本內容)
背景(Background)
設定背景圖片的附著方式
scroll
(設定背景圖片沿著元素範圍的捲動而移動)
fixed
(設定背景圖片固定在其原本的位置)
local
(設定背景圖片沿著元素內容的捲動而移動)
設定背景圖片後面的背景顏色
hexa color model
選擇顏色:
(將背景圖片後面的背景顏色設定成以上所選取的顏色)
預覽區文字
文字(Font)外框(Border)外廓(Outline)動畫(Animation)盒子模型(Box Model)顏色定義(Color Definition)媒體內容(Content Of Media)盒子尺寸(Dimension For Box)彈性盒(Flexible Box Model)內容生成(Generated Content)網格(Grid)超鏈結(Hyperlink)行內盒子(Inline Box)列表(List)外距(Margin)內容跑馬燈(Marquee)多欄版型(Multi-Columns)內距(Padding)換頁媒體(Paged Media)物件定位(Positioning)列印(Print)注釋排版(Ruby)聲音(Speech)表格(Table)平面及空間轉換(2D/3D-Transform)過渡動畫(Transition)用戶介面(User-Interface)
