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之元素