CSS之元素
阿新 • • 發佈:2018-02-05
激活 back input 風格 sheet pla 情況下 轉行 --
CSSS書寫位置
- 內嵌式
<head>
<style type = "text/css">
****
</style>
</head>
- 外鏈式<寫在head裏>
<link rel="stylesheet" href="1.css">
- 行內樣式表
<h1 style="fontsize:30px;color=red">威武霸氣</h1>
三種寫法特點
- 內嵌式寫法,樣式只作用於當前文件,沒有真正實現結構表現分離。
- 外鏈式寫法,作用範圍是當前站點,誰調用誰生效,範圍廣,真正實現結構表現分離。
- 行內樣式表,作用範圍僅限於當前標簽,範圍小,結構表現混在一起。 (不推薦使用)
標簽分類(顯示樣式)
塊元素
典型代表:div,h1--h6,p,ul,li
特點:
- 獨占一行
- 可以設置寬高
- 嵌套下,子塊元素寬度(沒有定義情況下)和父親塊元素寬度默認一致
行內元素
典型代表:span,a,strong,em,del,ins
特點:
- 在一行上顯示
- 不能直接設置寬高
- 元素的寬和高就是內容撐開的寬高
行內塊元素(內聯元素)
典型代表:input,img
特點:
- 在一行上顯示
- 可以設置寬高
元素之間的轉換
- 塊元素轉行內元素
div,p{
display:inline;
}
- 行內元素轉塊元素
span{
display:block
}
- 塊和行內元素轉行內塊元素
div,a,span,strong{
display:inline-block
}
CSS三大特性
層疊性
當多個樣式作用於同一個(同一類)標簽時,樣式發生了沖突,總是執行後邊的代碼(後邊代碼層疊前邊的代碼)。和標簽調用選擇器的順序沒有關系。
繼承性
繼承性發生的前提是包含(嵌套關系)
- 文字顏色可以繼承
- 文字大小可以繼承
- 字體可以繼承
- 字體粗細可以繼承
- 文字風格可以繼承
行高可以繼承
總結:文字的所有屬性都可以繼承特殊情況
h系列不能繼承文字大小
a標簽不能繼承文字顏色
優先級
默認樣式<標簽選擇器<類選擇器<id選擇器<行內樣式<!important
優先級特點:
- 繼承的權重為0
- 權重會疊加
鏈接偽類
a:link {屬性:值} a{屬性:值}效果是一樣的
a:link{屬性:值;} 鏈接默認狀態
a:visited{屬性:值;} 鏈接訪問之後的狀態
a:hover{屬性:值;} 鼠標放到鏈接上顯示的狀態
a:active{屬性:值;} 鏈接激活的狀態
a:focus{屬性:值;} 獲取焦點
背景屬性
- background-color 背景顏色
- background-image 背景圖片
- Background-repeat repeat(默認) | no-repeat | repeat-x | repeat-y 背景平鋪
- Background-position left | right | center | top | bottom 背景定位
- Background-attachment 背景是否滾動 scroll | fixed
CSS之元素