一.顯示模式分類
1.塊級標籤
- 獨佔一行顯示
- height、width、line-height、font、margin、padding可正常設值
- 元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致）
2. 行內元素
- 在同一行上顯示
- height、width、line-height、font、margin-top、mragin-bottom、padding-top、padding-bottom不能正常設值，但可用設置margin-left、margin-right、padding-left、padding-right
- 元素的寬度就是它包含的文字或圖片的寬度。
3. 行內塊元素(img,input等)：
- 在同一行上顯示
- 元素的寬度就是它包含的文字或圖片的寬度
- height、width、line-height、font、margin、padding可正常設值
- img標籤默認寬度是圖片的寬度，input寬度也有自己的默認寬度(比較特殊)
二.顯示模式轉換
1.轉換方式
- 行內元素→塊級元素(display:block;)
- 行內元素→行內塊元素(display:inline-block;)
- 塊級元素→行內元素(display:inline;)
- 塊級元素→行內塊元素(display:inline-block;)
- 行內塊元素→行級元素(display:block;)
2. 注意
- 行內塊元素XXX 行內元素 (無法轉換成功，行內塊元素轉換爲行內元素是沒必要的，只需不設置塊級特有的屬性那麼就是行內元素)
三.CSS特性
1.層疊性
-
介紹
- 在權重相同的情況下，在同一個標籤中樣式發生衝突，後面定義樣式會將前面定義的樣式給覆蓋掉
-
注意
-
只跟定義的順序有關，與調用的順序無關
-
如果外部樣式引用在內嵌樣式
<style>標籤後，也會把<style>中衝突的樣式覆蓋掉(但實際開發中link標籤引用外部樣式都會在
-
2. 權重
-
比較
- 瀏覽器默認樣式<繼承樣式<通配符(*)<標籤選擇器<類選擇器|僞類選擇器|屬性選擇器<ID選擇器<行內樣式<!important
-
注意
- 權重可以疊加(不能越級)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 假如ID選擇器爲A等級、類選擇器爲B等級、標籤選擇器爲C等級 */
/* 權重從大到小排序 */
/* 當權重一樣時，會發生層疊 */
/* 先比較最高權重A的數量，當A數量一致再比較B數量，如果B數量一致就比較C數量，直接比較出結果爲止 */
#container div.box p.content {} /* 1A2B2C */
#container .box p.content {} /* 1A2B1C */
#container div.box .content {} /* 1A2B1C */
#container .box .content {} /* 1A2B */
#container .content {} /* 1A1B */
.container .box .content {} /* 3B */
.container .box p {} /* 2B1C */
</style>
</head>
<body>
<div id="container">
<div class="box">
<p class="content"></p>
</div>
</div>
</body>
</html>
3.繼承性-
- 介紹：在默認情況下，如果子元素沒有設置樣式，那麼該子元素會受父元素的樣式影響
- 可繼承的屬性：color、text-系列、font-系列、line-系列、cursor
- 特殊例子（某些可繼承的屬性在個別標籤中無法正常繼承）
- h1~h6：自帶font-size的em值、font-weight:bold
- a：自帶color值
四.僞類
1.L V H A(以a標籤爲例)
-
a:link
- 設置標籤的默認樣式
- 建議用a{}代替
-
a:vistited
- 設置標籤被訪問過後的樣式(a標籤被點擊後)
- 只能設置有關顏色的樣式
-
a:hover
- 設置鼠標懸停在標籤上時的樣式
-
a:active
- 設置標籤被激活時的樣式(鼠標移到a標籤上，按住鼠標左鍵不放)
2. 注意
- 以上4個僞類必須按照 L V H A 順序寫
- :hover可以單獨使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link {
color: black;
text-decoration: none;
font-size: 16px;
}
a:visited {
color: black;
}
a:hover {
color: yellowgreen;
}
a:active {
color: red;
}
</style>
</head>
<body>
<a href="#">超鏈接</a>
</body>
</html>
3.其他僞類
-
選擇器:focus{}
- 當標籤獲取焦點時設置該標籤的樣式
-
:empty{}
- 查找內容爲空的標籤(不能帶空格，編輯器中標籤不能換行)
-
:not(選擇器)
- 排除選擇器中的元素
-
選擇器:target
*● 當點擊某個a標籤跳轉到選擇器所選中的標籤時，改變所選中標籤的樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 當輸入獲得焦點時，把背景顏色變爲灰色 */
input:focus {
background-color: gray;
}
/* 查找沒有two類樣式並且沒有內容的div標籤，並設置其樣式 */
div:not(.two):empty {
width: 200px;
height: 100px;
background-color: pink;
}
/* 當點擊某個a標籤跳轉到id值爲one的元素時，該元素背景顏色變爲黃色 */
.one:target {
background-color: yellow;
}
</style>
</head>
<body>
<input>
<br>
<a href="#one">跳轉</a>
<div class="one" id="one"></div>
<div></div>
</body>
</html>
五.背景(background)
1.backgrund-color
- 背景顏色,默認值爲透明transparent
2. backgrund-image
- 背景圖片,使用url(圖片路徑) 引用圖片
3. backgrund-repeat
- 背景圖片平鋪方式
- repeat 默認值橫向和縱向都平鋪
- no-repeat 不平鋪
- repeat-x 橫向平鋪
- repeat-y 縱向平鋪
4.backgrund-position
- 背景圖片相對於容器的位置,默認左上角(值left|right|top|bottom|center)
- 當背景圖片位置設置一個值的時候，第二個默認值是center
- 當設置背景圖片位置出現具體數字，第一個值代表水平方向，第二個值代表垂直方向
- 當容器大小大於圖片時是指定圖片在容器中顯示的位置
- 當容器小於圖片時，可以指定圖片哪部分在容器中顯示，常用於精靈圖裁剪(第3、4點原理一樣，可以把容器放大了思考)
5. 精靈圖裁剪與logo常用做法例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精靈圖裁剪</title>
<style type="text/css">
.logo {
display: block;
width: 87px;
height: 35px;
/* 第一個值負數表示背景圖片往左移動，正數往右移動 */
/* 第二個值負數表示背景圖片往上移動，正數往下移動 */
background: url(qq.png) no-repeat -349px -110px;
/* logo超鏈接內容移除,大網站都是用這種方法做logo */
/*原理：正數的縮進，文字會往右移動，即使縮進很多像素也會自動換行在頁面中顯示，
而負數的縮進就會往左移動，設置超多像素後就會在那一行超出瀏覽器可視區域，達到隱藏的效果
*/
/* 通過把內容溢出容器(方法好多)，再用overflow:hidden;也可以移除超鏈接內容,*/
text-indent: -10000px;
}
</style>
</head>
<body>
<a class="logo" href="#">搜索網</a>
</body>
</html>