詳細說明CSS層疊樣式表
- 高洛峰原創
- 2017-03-14 15:56:052261瀏覽
========================
CSS層疊樣式表
= =======================
命名規則：使用字母、數字或底線和減號構成，不要以數字開頭
一、css的語法
------------------ -----------
格式： 選擇器{屬性:值;屬性:值;屬性:值;....}
# 其中選擇者也叫選擇詞
# CSS中註解：/* ... */
#二、在HTML中如何使用css樣式（html中嵌入css的方式）;
--------------------- -------------------------------
1. 內聯方式（行內樣式）
就是在HTML的標籤中使用style屬性來設定css樣式
格式： <html標籤 style="屬性:值;屬性:值;...."> ;被修飾的內容
font-family:隸書">在HTML中如何使用css樣式
特點：僅作用於本標籤。
2. 內部方式（內嵌樣式）
就是在head標籤中使用標籤來設定css樣式
格式：
# 特點：作用於目前整個頁面 # 3. 外部導入方式（外部鏈入） 3.1 （建議）就是在head標籤中使用標籤導入一個css文件，在作用於本頁面，實現css樣式設定 格式： 3.2 也可以使用import在style標籤中導入css檔。 如： # 特點：作用於整個網站 他們的優先權：當樣式衝突時，就是採用就近原則，是值css屬性離被修飾的內容最近的為主。
若沒有樣式衝突則採用疊加效果。 三、**css2的選擇子：----------------- ----------------------------------------------# 1. html選擇子（標籤選擇器）
就是把html標籤當作選擇子使用 如p{....} 網頁中所有p標籤採用此樣式 h2{....} 網頁中所有h2標籤採用此樣式 2.class類別選擇子(使用點.將自訂名稱（類別名稱）定義的選擇符號)
定義： .類別名稱{樣式....} 其他選擇符名.類別名稱{樣式....} 使用：html屬性]
4. 關聯選擇符（包含選擇符） 格式： 選擇符1 選擇符2 選擇符3 ...{樣式....}# 例如： table a{....} /*table標籤裡的a標籤才採用此樣式*/ h1 p{color:red} /*只有h1標籤中的p標籤才採用此樣式*/ 5. 組合選擇符（選擇符組） 格式： 選擇符1,選擇符2,選擇符3 ...{樣式....} h3,h4,h5,#one,.one{color:green;} /*h3、h4和h5都採用此樣式*/ 6.偽類別選(偽元素) 擇符：
格式：標籤名稱:偽類別名稱{樣式....}a:link {color: #FF0000; text-decoration: none} /* 未存取的連結*/
a:visited {color: #00FF00; text-decoration: none} /* 已存取的連結*/
a:hover {color: #FF00FF; text-decoration: underline} /* 滑鼠在連結上*/
a:active {color: #0000FF; text-decoration: underline} /* 啟動連結*/
## 7 .屬性選擇器：
... # 8.其他偽 # ... 四、 CSS3中的選擇者（了解）—－－－－－－－－－－四、 CSS3中的選擇者（了解）－－－－－－－－－－－－－－－－－－－－）－－－－ —————————————————————————————— 1. 關係選擇器： div> p 選擇所有作為div元素的子元素p div+p 選擇緊貼在div元素之後p元素 div~p 選擇div元素後面的所有兄弟元素p 2. 屬性選擇器： [attribute]選擇具有attribute屬性的元素。 [attribute=value]選擇具有attribute屬性且屬性值等於value的元素。 [attribute~=value]選擇具有attribute屬性且屬性值為一用空格分隔的字詞列表，其中一個等於value的元素。[attribute|=value]選擇具有att屬性且屬性值為以val開頭並以連接符號"-"分隔的字串
的E元素。 [attibute^=value]符合具有attribute屬性、且值以valule開頭的E元素 [attribute$=value]符合具有attribute屬性、且值以value結尾的E元素 [attribute*=value]符合具有attribute屬性、且值中含有value的E元素# ::first-letter
設定物件
內的第一個字元的樣式。 ::first-line
設定物件內的第一行的樣式。:before
設定在物件前（依據物件樹的邏輯結構）所發生的內容。:after
設定在物件後（依據物件樹的邏輯結構）發生的內容。
(language)符合使用特殊語言的E元素。 :element1~element2:
:first-of-type符合同型別中的第一個同級兄弟元素
:last-of-type
符合同類型中的最後一個同級兄弟元素 :only-of-type匹配同類型中的唯一的一個同級兄弟元素
:only-child匹配父元素僅有的一個子元素
:nth-child(n)匹配父元素的第n個子元素 :nth-last-child(n)匹配同類型中的倒數第n個同級兄弟元素
:last-child()符合父元素的最後一個子元素
:root符合元素在文件的根元素。在HTML中，根元素永遠是HTML
:empty符合沒有任何子元素（包括text節點）的元素
4. *狀態
偽類選擇器
:link 設定
a在未被存取前的樣式。
:visited 設定超連結a在其連結位址已被存取過時的樣式
:active 設定元素在被使用者啟動（在滑鼠點選與釋放之間發生的
事件###）時的樣式###### *:hover 設定元素在其滑鼠停留時的樣式###### *###:focus### 設定元素在其取得焦點時的樣式###### :target 符合相關URL指向的E元素###### :enabled 符合使用者介面上處於可用狀態的元素###### :disabled 符合使用者介面上處於停用狀態的元素# ##### :checked 符合使用者介面上處於選取狀態的元素###### :not(selector)符合不含selector選擇符的元素###### ::selection 設定物件被選擇時的樣式############### ###### 5. 其他偽類別選擇器###### E:not(s) ： {attribute}###符合所有不符合簡單選擇子s的元素E
p:not(.bg) {background-color:#00FF00;}
#五、CSS常用的屬性：
----------------------------- -------------------------------------------------- --------
1. color顏色屬性：
a. HSL顏色: 透過對色調(H)、飽和度(S)、亮度(L)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色.
background-color: hsl(240,100%,50%);color:white; b . HSLA顏色: 色調(H)、飽和度(S)、亮度(L)、透明度(A)；
background-color: hsla(0,100%,50%,0.2);
*c. RGB顏色: 紅(R)、綠(G)、藍(B)三個顏色通道的變化
background-color: rgba(200,100,0);
d. RGBA顏色: 紅(R)、綠(G)、藍(B)、透明度(A) background-color: rgba(0,0,0,0.5);
*e.
圖片*font-size: 字體大小：20px，60%基於父物件的百分比取值 *font-family： 字體：宋體，Arial
font-style： normal正常；italic 斜體；oblique傾斜的字體
*
font-weight： 字體加粗：bold
font-variant
: small-caps 小型的大寫字母字體
font-stretch: [了解]文字的拉伸是相對於瀏覽器顯示的字體的正常寬度（大部分瀏覽器不支援）。
3. 文字屬性： text-indent: 首行縮排：text-indent:30px;
text-overflow： 文字的溢出是否使用省略標記（...）。 clip|ellipsis（顯示省略標記）
*
text-align: 文字的位置：
leftcenter
righttext-transform：物件中的文字的大小寫：capitalize(首字母)|uppercase大寫|lowercase小寫
# *text -decoration: 字體畫線：none無、underline下畫線，line-through貫穿線 text-decoration-line：[了解]文字裝飾線條的位置（瀏覽器不相容）
*text-shadow: 文字的文字是否有陰影及模糊效果
vertical-align
white-space:nowrap; /*強制在同一行內顯示所有文字*/
*
letter-spacing: 文字或字母的間距
word-spacingline-height
border:寬度樣式顏色;
border-color
;
border-style
; 邊框樣式：solid實現，dotted點狀線，dashed虛線
border-width
:
border-left-color;
border-left-style; border-left-width:
# . ..
## # 5. ###背景屬性###:background###### *background-color: 背景顏色###### *###background-image###: 背景圖片###### # *###background-repeat###：是否重複，如何重複?(平鋪)###background-attachment： 是否固定背景，
scroll:預設值。 背景圖像是隨物件內容捲動
fixed: 背景圖像固定
## #
background -size: 背景大小，如background-size:100px 140px;
多層背景： background:url(test1.jpg) no-repeat scroll 10px 20px,url(test1.jpg) no-repeat scroll 10px 20px,url( test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;
#
background-origin:content-##
background-origin##：content-#box,contentbox,content-content-content box;:padding-box,padding-box,padding-box; background-size:50px 60px,50px 60px,50px 60px;
6. *內補白（內補丁） padding： 擷取或設定物件四邊的內部邊距,如padding:10px; padding :5px 10px;padding-top
： 擷取或設定物件頂邊的內部邊距： 擷取或設定對象右邊的內部邊距：擷取或設定物件下邊的內部邊距： 擷取或設定對象左邊的內部邊距 7. *外補白（外補丁）margin
： 檢索或設定物件四邊的外延邊距,如margin:10px; margin:5px auto;： 檢索或設定物件頂邊的外延邊距： 檢索或設定物件右邊的外延邊距： 檢索或設定物件下邊的外延邊距: 檢索或設定物件左邊的外延邊距 8. Position定位 *position: 定位方式：absolute(絕對定位
) 、fixed(固定)（relative定位參考，可對內部相對absolute定位）*z-index
: 層疊順序，值越大越在上方。*top: 檢索或設定物件與其最近一個定位的父物件頂部相關的位置
right: 檢索或設定物件與其最近一個定位的父物件右邊相關的位置bottom: 檢索或設定物件與其最近一個定位的父物件下邊相關的位置 *left: 檢索或設定物件與其最近一個定位的父物件左邊相關的位置 # 9. Layout佈局 *
display
： 是否及如何顯示：none隱藏，block區塊狀顯示...* float
: 指出了物件是否及如何浮動:值none | left | right *clear
：清除浮動：none | left | right | both兩側 visibility
：設定或檢索是否顯示物件。 visible|hidden|collapse。與display屬性不同，此屬性為隱藏的物件保留其佔據的實體空間
# clip: 檢索或設定物件的視覺區域
。區域外的部分是透明的。 rect(上-右-下-左)如：clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20.
*overflow: 超出隱藏：hidden，visible：不剪下內容overflow-x
：內容超過其指定寬度時如何管理內容: visible | hidden | scroll | auto：內容超過其指定高度時如何管理內容 10.Flexible Box 彈性盒子(了解見手冊)box-orient: 設定或檢索彈性盒模型物件的子元素的排列方式。 horizontal(水平)|vertical(縱向)
box-pack 設定或擷取彈性盒模型物件的子元素的對齊方式。
box-align 設定或檢索彈性盒模型物件的子元素的對齊方式。
box-flex 設定或檢索彈性盒模型物件的子元素如何分配其剩餘空間。
box-flex-group 設定或擷取彈性盒模型物件的子元素的所屬群組。
box-ordinal-group 設定或擷取彈性盒模型物件的子元素的顯示順序。
box-direction 設定或檢索彈性盒模型物件的子元素的排列順序是否反轉。
box-lines 設定或擷取彈性盒模型物件的子元素是否可以換行顯示。
11. 使用者介面 User Interface
*cursor 滑鼠指標採用何種系統預先定義的遊標形狀。 pointer小手，url自訂
zoom 設定或擷取物件的縮放比例： normal|5倍|200%百分比
box-sizing 設定或擷取物件的盒子模型組成模式。 content-box | border-box
content-box： padding和border不包含在定義的width和height之內。
border-box： padding和border被包含在定義的width和height之內。
resize 設定或檢索物件的區域是否允許使用者縮放，調節元素尺寸大小。
none： 不允許使用者調整元素大小。
both： 使用者可以調整元素的寬度和高度。
horizontal： 使用者可以調整元素的寬度
vertical： 使用者可以調整元素的高度。
outline 複合屬性：設定或擷取物件外的線條輪廓
outline-width 設定或擷取物件外的線條輪廓的寬度
outline-style 設定或擷取物件外的線條輪廓的樣式
outline-color 設定或擷取物件外的線條輪廓的顏色
outline-offset 設定或檢索物件外的線條輪廓偏移位置的數值
nav-index 設定或檢索物件的導航順序。
nav-up 設定或檢索物件的導覽方向。
nav-right 設定或檢索物件的導覽方向。
12. 多欄Multi-column
columns 設定或擷取物件的列數和每列的寬度
column-width 設定或檢索物件每列的寬度
column-count 設定或檢索物件的列數
column-gap 設定或擷取物件的列與列之間的間隙
column-rule 設定或檢索物件的列與列之間的邊框
column-rule-width 設定或擷取物件的列與列之間的邊框厚度
column -rule-style 設定或擷取物件的列與列之間的邊框樣式
column-rule-color 物件的列與列之間的邊框顏色
column-span 物件元素是否橫跨所有列
column-fill 物件所有列的高度是否統一
column-break-before 物件之前是否斷行
column-break -after 物件之後是否斷行
column-break-inside 物件內部是否斷行
13. 表格相關屬性：
table-layout 設定或檢索表格的佈局演算法
border-collapse 設定或檢索表格的行和單元格的邊是合併在一起還是依照標準的HTML樣式分開 separate | collapse
border-spacing 設定或檢索當表格邊框獨立時，行和單元格的邊框在橫向和縱向上的間距
caption-side 設定或檢索表格的caption物件是在表格的那一邊 top | right | bottom | left
empty-cell 設定或檢索當表格的當單元格無內容時，是否顯示該單元格的邊框 hide | show
# 14. 過渡Transition:
transition 檢索或設定對象變換時的過渡效果
#transition-property 檢索或設定物件中的參與過渡的屬性
transition-duration 檢索或設定物件過渡的持續時間
transition-timing-function 檢索或設定物件中過渡的類型
transition-delay 檢索或設定物件延遲過渡的時間
15. 動畫 Animation
animation 檢索或設定物件所套用的動畫特效
animation-name 檢索或設定物件所套用的動畫名稱
animation-duration 擷取或設定物件動畫的持續時間
# animation- timing-function 檢索或設定物件動畫的過渡類型
animation-delay 檢索或設定物件動畫延遲的時間
animation-iteration-count 檢索或設定物件動畫的循環次數
animation-direction 檢索或設定物件動畫是否在循環中反向運動
animation-play-state 檢索或設定物件動畫的狀態
# animation- fill-mode 檢索或設定物件動畫時間以外的狀態
16. 2D變換 2D Transform:
transform 檢索或設定物件的變換
transform-origin 檢索或設定物件中的變換所參考的原點
17. Media Queries Properties媒體查詢
# width 定義輸出裝置中的頁面可見區域寬度
height 定義輸出裝置中的頁面可見區域高度
device-width 定義輸出裝置的螢幕可見寬度
# device-height 定義輸出裝置的螢幕可見高度
orientation 定義'height'是否大於或等於'width'。值portrait代表是，landscape代表否
aspect-ratio 定義'width'與'height'的比值
device-aspect-ratio 定義'device-width '與'device-height'的比率。如常見的顯示器比率：4/3, 16/9, 16/10
device-aspect-ratio 定義'device-width'與'device-height'的比值。如常見的顯示器比率：4/3, 16/9, 16/10
color 定義每一組輸出裝置的彩色原件個數。如果不是彩色設備，則值等於0
color-index 定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0
monochrome 定義在一個單色框架緩衝區中每個像素包含的單色原件個數。如果不是單色設備，則數值等於0
resolution 定義設備的解析度。如：96dpi, 300dpi, 118dpcm
scan 定義電視類別裝置的掃描工序
grid 用來查詢輸出裝置是否使用柵格或點陣。只有1和0才是有效值，1代表是，0代表否
以上是詳細說明CSS層疊樣式表的詳細內容。更多資訊請關注PHP中文網其他相關文章！