1. 程式人生 > >技在手,能在身,思在腦,從容過生活。

技在手,能在身,思在腦,從容過生活。

CSS 規則由兩個主要的部分構成:選擇器,以及一條或多條宣告:   

選擇器{

屬性:屬性值;

}

CSS 選擇器

選擇器 示例 示例說明 CSS版本
.class .intro 選擇所有class="intro"的元素 1
#id #firstname 選擇所有id="firstname"的元素 1
* * 選擇所有元素 2
element p 選擇所有

元素

1
element,element div,p 選擇所有元素和

元素

1
element element div p 選擇元素內的所有

元素

1
element>element div>p 選擇所有父級是元素的

元素

2
element+element div+p 選擇所有緊接著元素之後的

元素

2
[attribute] [target] 選擇所有帶有target屬性元素 2
[attribute=value] [target=-blank] 選擇所有使用target="-blank"的元素 2
[attribute~=value] [title~=flower] 選擇標題屬性包含單詞"flower"的所有元素 2
[attribute|=language] [lang|=en] 選擇一個lang屬性的起始值="EN"的所有元素 2
:link a:link 選擇所有未訪問連結 1
:visited a:visited 選擇所有訪問過的連結 1
:active a:active 選擇活動連結 1
:hover a:hover 選擇滑鼠在連結上面時 1
:focus input:focus 選擇具有焦點的輸入元素 2
:first-letter p:first-letter 選擇每一個

元素的第一個字母

1
:first-line p:first-line 選擇每一個

元素的第一行

1
:first-child p:first-child 指定只有當

元素是其父級的第一個子級的樣式。

2
:before p:before 在每個

元素之前插入內容

2
:after p:after 在每個

元素之後插入內容

2
:lang(language) p:lang(it) 選擇一個lang屬性的起始值="it"的所有

元素

2
element1~element2 p~ul 選擇p元素之後的每一個ul元素 3
[attribute^=value] a[src^="https"] 選擇每一個src屬性的值以"https"開頭的元素 3
[attribute$=value] a[src$=".pdf"] 選擇每一個src屬性的值以".pdf"結尾的元素 3
[attribute*=value] a[src*="runoob"] 選擇每一個src屬性的值包含子字串"runoob"的元素 3
:first-of-type p:first-of-type 選擇每個p元素是其父級的第一個p元素 3
:last-of-type p:last-of-type 選擇每個p元素是其父級的最後一個p元素 3
:only-of-type p:only-of-type 選擇每個p元素是其父級的唯一p元素 3
:only-child p:only-child 選擇每個p元素是其父級的唯一子元素 3
:nth-child(n) p:nth-child(2) 選擇每個p元素是其父級的第二個子元素 3
:nth-last-child(n) p:nth-last-child(2) 選擇每個p元素的是其父級的第二個子元素,從最後一個子項計數 3
:nth-of-type(n) p:nth-of-type(2) 選擇每個p元素是其父級的第二個p元素 3
:nth-last-of-type(n) p:nth-last-of-type(2) 選擇每個p元素的是其父級的第二個p元素,從最後一個子項計數 3
:last-child p:last-child 選擇每個p元素是其父級的最後一個子級。 3
:root :root 選擇文件的根元素 3
:empty p:empty 選擇每個沒有任何子級的p元素(包括文字節點) 3
:target #news:target 選擇當前活動的#news元素(包含該錨名稱的點選的URL) 3
:enabled input:enabled 選擇每一個已啟用的輸入元素 3
:disabled input:disabled 選擇每一個禁用的輸入元素 3
:checked input:checked 選擇每個選中的輸入元素 3
:not(selector) :not(p) 選擇每個並非p元素的元素 3
::selection ::selection 匹配元素中被使用者選中或處於高亮狀態的部分 3
:out-of-range :out-of-range 匹配值在指定區間之外的input元素 3
:in-range :in-range 匹配值在指定區間之內的input元素 3
:read-write :read-write 用於匹配可讀及可寫的元素 3
:read-only :read-only 用於匹配設定 "readonly"(只讀) 屬性的元素 3
:optional :optional 用於匹配可選的輸入元素 3
:required :required 用於匹配設定了 "required" 屬性的元素 3
:valid :valid 用於匹配輸入值為合法的元素 3
:invalid :invalid 用於匹配輸入值為非法的元素 3

 CSS屬性

動畫屬性

屬性 描述 CSS
@keyframes 定義一個動畫,@keyframes定義的動畫名稱用來被animation-name所使用。 3
animation 複合屬性。檢索或設定物件所應用的動畫特效。 3
animation-name 檢索或設定物件所應用的動畫名稱 ,必須與規則@keyframes配合使用,因為動畫名稱由@keyframes定義 3
animation-duration 檢索或設定物件動畫的持續時間 3
animation-timing-function 檢索或設定物件動畫的過渡型別 3
animation-delay 檢索或設定物件動畫的延遲時間 3
animation-iteration-count 檢索或設定物件動畫的迴圈次數 3
animation-direction 檢索或設定物件動畫在迴圈中是否反向運動 3
animation-play-state 檢索或設定物件動畫的狀態 3

背景屬性

屬性 描述 CSS
background 複合屬性。設定物件的背景特性。 1
background-attachment 設定或檢索背景影象是隨物件內容滾動還是固定的。必須先指定background-image屬性。 1
background-color 設定或檢索物件的背景顏色。 1
background-image 設定或檢索物件的背景影象。 1
background-position 設定或檢索物件的背景影象位置。必須先指定background-image屬性。 1
background-repeat 設定或檢索物件的背景影象如何鋪排填充。必須先指定background-image屬性。 1
background-clip 指定物件的背景影象向外裁剪的區域。 3
background-origin S設定或檢索物件的背景影象計算background-position時的參考原點(位置)。 3
background-size 檢索或設定物件的背景影象的尺寸大小。 3

邊框(Border) 和 輪廓(Outline) 屬性

屬性 描述 CSS
border 複合屬性。設定物件邊框的特性。 1
border-bottom 複合屬性。設定物件底部邊框的特性。 1
border-bottom-color 設定或檢索物件的底部邊框顏色。
border-bottom-style 設定或檢索物件的底部邊框樣式。 1
border-bottom-width 設定或檢索物件的底部邊框寬度。 1
border-color 置或檢索物件的邊框顏色。 1
border-left 複合屬性。設定物件左邊邊框的特性。 1
border-left-color 設定或檢索物件的左邊邊框顏色。 1
border-left-style 設定或檢索物件的左邊邊框樣式。 1
border-left-width 設定或檢索物件的左邊邊框寬度。 1
border-right 複合屬性。設定物件右邊邊框的特性。 1
border-right-color 設定或檢索物件的右邊邊框顏色。 1
border-right-style 設定或檢索物件的右邊邊框樣式。 1
border-right-width 設定或檢索物件的右邊邊框寬度。 1
border-style 設定或檢索物件的邊框樣式。 1
border-top 複合屬性。設定物件頂部邊框的特性。 1
border-top-color 設定或檢索物件的頂部邊框顏色 1
border-top-style 設定或檢索物件的頂部邊框樣式。 1
border-top-width 設定或檢索物件的頂部邊框寬度。 1
border-width 設定或檢索物件的邊框寬度。 1
outline 複合屬性。設定或檢索物件外的線條輪廓。 2
outline-color 設定或檢索物件外的線條輪廓的顏色。 2
outline-style 設定或檢索物件外的線條輪廓的樣式。 2
outline-width 設定或檢索物件外的線條輪廓的寬度。 2
border-bottom-left-radius 設定或檢索物件的左下角圓角邊框。提供2個引數,2個引數以空格分隔,每個引數允許設定1個引數值,第1個引數表示水平半徑,第2個引數表示垂直半徑,如第2個引數省略,則預設等於第1個引數 3
border-bottom-right-radius 設定或檢索物件的右下角圓角邊框。 3
border-image 設定或檢索物件的邊框樣式使用影象來填充。 3
border-image-outset 規定邊框影象超過邊框的量。 3
border-image-repeat 規定影象邊框是否應該被重複(repeated)、拉伸(stretched)或鋪滿(rounded)。 3
border-image-slice 規定影象邊框的向內偏移。 3
border-image-source 規定要使用的影象,代替 border-style 屬性中設定的邊框樣式。 3
border-image-width 規定影象邊框的寬度。 3
border-radius 設定或檢索物件使用圓角邊框。 3
border-top-left-radius 定義左上角邊框的形狀。 3
border-top-right-radius 定義右上角邊框的形狀。 3
box-decoration-break 規定行內元素被折行 3
box-shadow 向方框新增一個或多個陰影。 3

盒子(Box) 屬性

屬性 描述 CSS
overflow-x 如果內容溢位了元素內容區域,是否對內容的左/右邊緣進行裁剪。 3
overflow-y 如果內容溢位了元素內容區域,是否對內容的上/下邊緣進行裁剪。 3
overflow-style 規定溢位元素的首選滾動方法。 3
rotation 圍繞由 rotation-point 屬性定義的點對元素進行旋轉。 3
rotation-point 定義距離上左邊框邊緣的偏移點。 3

顏色(Color) 屬性

屬性 描述 CSS
color-profile 允許使用源的顏色配置檔案的預設以外的規範 3
opacity 設定一個元素的透明度級別 3
rendering-intent 允許超過預設顏色配置檔案渲染意向的其他規範 3

內邊距(Padding) 屬性

屬性 說明 CSS
padding 在一個宣告中設定所有填充屬性 1
padding-bottom 設定元素的底填充 1
padding-left 設定元素的左填充 1
padding-right 設定元素的右填充 1
padding-top 設定元素的頂部填充 1

媒體頁面內容屬性

屬性 說明 CSS
bookmark-label 指定書籤的標籤 3
bookmark-level 指定了書籤級別 3
bookmark-target 指定了書籤連結的目標 3
float-offset 在相反的方向推動浮動元素,他們一直具有浮動 3
hyphenate-after 指定一個斷字的單詞斷字字元後的最少字元數 3
hyphenate-before 指定一個斷字的單詞斷字字元前的最少字元數 3
hyphenate-character 指定了當一個斷字發生時,要顯示的字串 3
hyphenate-lines 表示連續斷字的行在元素的最大數目 3
hyphenate-resource 外部資源指定一個逗號分隔的列表,可以幫助確定瀏覽器的斷字點 3
hyphens 設定如何分割單詞以改善該段的佈局 3
image-resolution 指定了正確的影象解析度 3
marks 將crop and/or cross標誌新增到文件 3
string-set 3

尺寸(Dimension) 屬性

屬性 描述 CSS
height 設定元素的高度 1
max-height 設定元素的最大高度 2
max-width 設定元素的最大寬度 2
min-height 設定元素的最小高度 2
min-width 設定元素的最小寬度 2
width 設定元素的寬度 1

彈性盒子模型(Flexible Box) 屬性(新)

屬性 說明 CSS
flex 複合屬性。設定或檢索彈性盒模型物件的子元素如何分配空間。 3
flex-grow 設定或檢索彈性盒的擴充套件比率。 3
flex-shrink 設定或檢索彈性盒的收縮比率。 3
flex-basis 設定或檢索彈性盒伸縮基準值。 3
flex-flow 複合屬性。設定或檢索彈性盒模型物件的子元素排列方式。 3
flex-direction 該屬性通過定義flex容器的主軸方向來決定felx子項在flex容器中的位置。 3
flex-wrap 該屬性控制flex容器是單行或者多行,同時橫軸的方向決定了新行堆疊的方向。 3
align-content 在彈性容器內的各項沒有佔用交叉軸上所有可用的空間時對齊容器內的各項(垂直)。 3
align-items 定義flex子項在flex容器的當前行的側軸(縱軸)方向上的對齊方式。 3
align-self 定義flex子項單獨在側軸(縱軸)方向上的對齊方式。 3
justify-content 設定或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。 3
order 設定或檢索彈性盒模型物件的子元素出現的順序。 3

彈性盒子模型(Flexible Box) 屬性(舊)

屬性 說明 CSS
box-align 指定如何對齊一個框的子元素 3
box-direction 指定在哪個方向,顯示一個框的子元素 3
box-flex 指定一個框的子元素是否是靈活的或固定的大小 3
box-flex-group 指派靈活的元素到Flex組 3
box-lines 每當它在父框的空間執行時,是否指定將再上一個新的行列 3
box-ordinal-group 指定一個框的子元素的顯示順序 3
box-orient 指定一個框的子元素是否在水平或垂直方向應鋪設 3
box-pack 指定橫向盒在垂直框的水平位置和垂直位置 3

字型(Font) 屬性

屬性 說明 CSS
font 在一個宣告中設定所有字型屬性 1
font-family 規定文字的字體系列 1
font-size 規定文字的字型尺寸 1
font-style 規定文字的字型樣式 1
font-variant 規定文字的字型樣式 1
font-weight 規定字型的粗細 1
@font-face 一個規則,允許網站下載並使用其他超過"Web- safe"字型的字型 3
font-size-adjust 為元素規定 aspect 值 3
font-stretch 收縮或拉伸當前的字體系列 3

內容生成屬性(Generated Content Properties)

屬性 說明 CSS
content 與 :before 以及 :after 偽元素配合使用,來插入生成內容 2
counter-increment 遞增或遞減一個或多個計數器 2
counter-reset 建立或重置一個或多個計數器 2
quotes 設定巢狀引用的引號型別 2
crop 允許replaced元素只是作為一個物件代替整個物件的矩形區域 3
move-to Causes an element to be removed from the flow and reinserted at a later point in the document 3
page-policy 判定基於頁面的給定元素的適用於計數器的字串值 3

網格(Grid) 屬性

屬性 說明 CSS
grid-columns 指定在網格中每列的寬度 3
grid-rows 指定在網格中每列的高度 3

超連結(Hyperlink) 屬性

屬性 說明 CSS
target 簡寫屬性設定target-name, target-new,和target-position屬性 3
target-name 指定在何處開啟連結(目標位置) 3
target-new 指定是否有新的目標連結開啟一個新視窗或在現有視窗開啟新標籤 3
target-position 指定應該放置新的目標連結的位置 3

線框(Linebox) 屬性

屬性 說明 CSS
alignment-adjust 允許更精確的元素的對齊方式 3
alignment-baseline 其父級指定的內聯級別的元素如何對齊 3
baseline-shift 允許重新定位相對於dominant-baseline的dominant-baseline 3
dominant-baseline 指定scaled-baseline-table 3
drop-initial-after-adjust 設定下拉的主要連線點的初始對齊點 3
drop-initial-after-align 校準行內的初始行的設定就是具有首字母的框使用初級連線點 3
drop-initial-before-adjust 設定下拉的輔助連線點的初始對齊點 3
drop-initial-before-align 校準行內的初始行的設定就是具有首字母的框使用輔助連線點 3
drop-initial-size 控制區域性的首字母下沉 3
drop-initial-value 啟用一個下拉式的初步效果
inline-box-align 設定一個多行的內聯塊內的行具有前一個和後一個內聯元素的對齊 3
line-stacking 一個速記屬性設定line-stacking-strategy, line-stacking-ruby,和line-stacking-shift屬性 3
line-stacking-ruby 設定包含Ruby註釋元素的行對於塊元素的堆疊方法 3
line-stacking-shift 設定base-shift行中塊元素包含元素的堆疊方法 3
line-stacking-strategy 設定內部包含塊元素的堆疊線框的堆疊方法 3
text-height 行內框的文字內容區域設定block-progression維數 3

列表(List) 屬性

屬性 說明 CSS
list-style 在一個宣告中設定所有的列表屬性 1
list-style-image 將圖象設定為列表項標記 1
list-style-position 設定列表項標記的放置位置 1
list-style-type 設定列表項標記的型別 1

外邊距(Margin) 屬性

屬性 說明 CSS
margin 在一個宣告中設定所有外邊距屬性 1
margin-bottom 設定元素的下外邊距 1
margin-left 設定元素的左外邊距 1
margin-right 設定元素的右外邊距 1
margin-top 設定元素的上外邊距 1

字幕(Marquee) 屬性

屬性 說明 CSS
marquee-direction 設定內容移動的方向 3
marquee-play-count 設定內容移動多少次 3
marquee-speed 設定內容滾動的速度有多快 3
marquee-style 設定內容移動的樣式 3

多列(Multi-column) 屬性

屬性 說明 CSS
column-count 指定元素應該分為的列數 3
column-fill 指定如何填充列 3
column-gap 指定列之間的差距 3
column-rule 對於設定所有column-rule-*屬性的簡寫屬性 3
column-rule-color 指定列之間的顏色規則 3
column-rule-style 指定列之間的樣式規則 3
column-rule-width 指定列之間的寬度規則 3
column-span 指定元素應該跨越多少列 3
column-width 指定列的寬度 3
columns 縮寫屬性設定列寬和列數 3

頁面媒體(Paged Media) 屬性

屬性 思念 CSS
fit 如果其寬度和高度屬性都不是auto給出一個提示,如何大規模替換元素 3
fit-position 判定方框內物件的對齊方式 3
image-orientation 指定使用者代理適用於影象中的向右或順時針方向的旋轉 3
page 指定一個元素應顯示的頁面的特定型別 3
size 指定含有BOX的頁面內容的大小和方位 3

定位(Positioning) 屬性

屬性 說明 CSS
bottom 設定定位元素下外邊距邊界與其包含塊下邊界之間的偏移 2
clear 規定元素的哪一側不允許其他浮動元素 1
clip 剪裁絕對定位元素 2
cursor 規定要顯示的游標的型別(形狀) 2
display 規定元素應該生成的框的型別 1
float 規定框是否應該浮動 1
left 設定定位元素左外邊距邊界與其包含塊左邊界之間的偏移 2
overflow 規定當內容溢位元素框時發生的事情 2
position 規定元素的定位型別 2
right 設定定位元素右外邊距邊界與其包含塊右邊界之間的偏移 2
top 設定定位元素的上外邊距邊界與其包含塊上邊界之間的偏移 2
visibility 規定元素是否可見 2
z-index 設定元素的堆疊順序 2

分頁(Print) 屬性

屬性 說明 CSS
orphans 設定當元素內部發生分頁時必須在頁面底部保留的最少行數 2
page-break-after 設定元素後的分頁行為 2
page-break-before 設定元素前的分頁行為 2
page-break-inside 設定元素內部的分頁行為 2
widows 設定當元素內部發生分頁時必須在頁面頂部保留的最少行數 2

Ruby 屬性

屬性 說明 CSS
ruby-align 控制Ruby文字和Ruby基礎內容相對彼此的文字對齊方式 3
ruby-overhang 當Ruby文字超過Ruby的基礎寬,確定ruby文字是否允許區域性懸置任意相鄰的文字,除了自己的基礎 3
ruby-position 它的base控制Ruby文字的位置 3
ruby-span 控制annotation 元素的跨越行為 3

語音(Speech) 屬性

屬性 說明 CSS
mark 縮寫屬性設定mark-before和mark-after屬性 3
mark-after 允許命名的標記連線到音訊流 3
mark-before 允許命名的標記連線到音訊流 3
phonemes 指定包含文字的相應元素中的一個音標發音 3
rest 一個縮寫屬性設定rest-before和rest-after屬性 3
rest-after 一個元素的內容講完之後,指定要休息一下或遵守韻律邊界 3
rest-before 一個元素的內容講完之前,指定要休息一下或遵守韻律邊界 3
voice-balance 指定了左,右聲道之間的平衡 3
voice-duration 指定應採取呈現所選元素的內容的長度 3
voice-pitch 指定平均說話的聲音的音調(頻率) 3
voice-pitch-range 指定平均間距的變化 3
voice-rate 控制語速 3
voice-stress 指示著重力度 3
voice-volume 語音合成是指波形輸出幅度 3

表格(Table) 屬性

屬性 說明 CSS
border-collapse 規定是否合併表格邊框 2
border-spacing 規定相鄰單元格邊框之間的距離 2
caption-side 規定表格標題的位置 2
empty-cells 規定是否顯示錶格中的空單元格上的邊框和背景 2
table-layout 設定用於表格的佈局演算法 2

文字(Text) 屬性

屬性 說明 CSS
color 設定文字的顏色 1
direction 規定文字的方向 / 書寫方向 2
letter-spacing 設定字元間距 1
line-height 設定行高 1
text-align 規定文字的水平對齊方式 1
text-decoration 規定新增到文字的裝飾效果 1
text-indent 規定文字塊首行的縮排 1
text-transform 控制文字的大小寫 1
unicode-bidi 2
vertical-align 設定元素的垂直對齊方式 1
white-space 設定怎樣給一元素控制元件留白 1
word-spacing 設定單詞間距 1
text-emphasis 向元素的文字應用重點標記以及重點標記的前景色。 1
hanging-punctuation 指定一個標點符號是否可能超出行框 3
punctuation-trim 指定一個標點符號是否要去掉 3
text-align-last 當 text-align 設定為 justify 時,最後一行的對齊方式。 3
text-justify 當 text-align 設定為 justify 時指定分散對齊的方式。 3
text-outline 設定文字的輪廓。 3
text-overflow 指定當文字溢位包含的元素,應該發生什麼 3
text-shadow 為文字新增陰影 3
text-wrap 指定文字換行規則 3
word-break 指定非CJK文字的斷行規則 3
word-wrap 設定瀏覽器是否對過長的單詞進行換行。 3

2D/3D 轉換屬性

屬性 說明 CSS
transform 適用於2D或3D轉換的元素 3
transform-origin 允許您更改轉化元素位置 3
transform-style 3D空間中的指定如何巢狀元素 3
perspective 指定3D元素是如何檢視透檢視 3
perspective-origin 指定3D元素底部位置 3
backface-visibility 定義一個元素是否應該是可見的,不對著螢幕時 3

過渡(Transition) 屬性

屬性 說明 CSS
transition 此屬性是 transition-property、transition-duration、transition-timing-function、transition-delay 的簡寫形式。 3
transition-property 設定用來進行過渡的 CSS 屬性。 3
transition-duration 設定過渡進行的時間長度。 3
transition-timing-function 設定過渡進行的時序函式。 3
transition-delay 指定過渡開始的時間。 3

使用者外觀(User-interface) 屬性

屬性 說明 CSS
appearance 定義元素的外觀樣式 3
box-sizing 允許您為了適應區域以某種方式定義某些元素 3
icon 為元素指定圖示 3
nav-down 指定使用者按向下鍵時向下導航的位置 3
nav-index 指定導航(tab)順序。 3
nav-left 指定使用者按向左鍵時向左導航的位置 3
nav-right 指定使用者按向右鍵時向左導航的位置 3
nav-up 指定使用者按向上鍵時向上導航的位置a 3
outline-offset 設定輪廓框架在 border 邊緣外的偏移 3
resize 定義元素是否可以改變大小 3