11.38 css三大特性
11.381 繼承性
1、定義：給某一個元素設置一些屬性，該元素的后代也可以使用，這個我們就稱之為繼承性
2、注意：
1、只有以color、font-、text-、line-開頭的屬性才可以繼承
2、a標簽的文字顏色和下划線是不能繼承別人的
3、h標簽的文字大小是不能繼承別人的，會改變，但是會在原來字體大小的基礎上改變
ps:打開瀏覽器審查元素可以看到一些inherited from...的屬性
3、應用場景：
通常基於繼承性統一設置網頁的文字顏色，字體，文字大小等樣式
11.382 層疊性
定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理沖突的一種能力，即如果有多個選擇器選中了同一個標簽那么會有覆蓋效果
注意：
1、層疊性只有在多個選擇器選中了同一個標簽，然后設置了相同的屬性，才會發生層疊性
11.383 優先級
1、定義：當多個選擇器選中同一個標簽，並且給同一個標簽設置相同的屬性時，如何層疊就由優先級來確定
2、優先級
整體優先級從高到底：行內樣式>嵌入樣式>外部樣式
1、大前提：直接選中 > 間接選中(即繼承而來的)
2、如果都是間接選中，那么離目標標簽比較近的優先級高，就近原則
3、如果都是直接選中，並且都是同類型的選擇器，那么寫在后面的優先級高
4、如果都是直接選中，並且是不同類型的選擇器，那么就會按照選擇器的優先級來層疊
#內聯>id > 類 > 標簽 > 通配符(也算直接選中) > 繼承 > 瀏覽器默認（即沒有設置任何屬性)
5、優先級之!important
!important方式來強制指定的屬性的優先級提升為最高，但是不推薦使用。因為大量使用!important的代碼是無法維護的。
注意：
1、!important只能用於直接選中，不能用於間接選中
2、!important只能用於提升被指定的屬性的優先級，其他屬性的優先級不會被提升
3、!important必須寫在屬性值分號的前面
11.39 字體屬性
1、font-weight：文字粗細(字重)
normal 默認值，標准粗細
bord 粗體
border 更粗
lighter 更細
100~900 設置具體粗細，400等同於normal，而700等同於bold
inherit 繼承父元素字體的粗細值
2、font-style：文字風格
normal 正常，默認就是正常
italic 傾斜
3、font-size：文字大小
一般是12px或13px或14px
注意：
1、通過font-size設置文字大小一定要帶單位，即一定要寫px
2、如果設置成inherit表示繼承父元素的字體大小值。
4、font-family：文字字體
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif #按照順序依次選取用戶可用的字體
常見字體：
serif 襯線字體
sans-serif 非襯線字體
中文：宋體，微軟雅黑，黑體
注意： 1、設置的字體必須是用戶電腦里已經安裝的字體，瀏覽器會使用它可識別的第一個值。 2、如果取值為中文，需要用單或雙引號擴起來
5、文字屬性簡寫
font-weight: bolder;
font-style: italic;
font-size: 50px;
font-family: 'serif','微軟雅黑';
簡寫為:
font: bolder italic 50px 'serif','微軟雅黑';
6、color：文字顏色
| 格式 | 描述 | |
|---|---|---|
| rgb | color：rgb(255,0,0); | 紅色：rgb(255,0,0) 綠色：rgb(0,255,0) 藍色：rgb(0,0,255) 黑色：rgb(0,0,0) # 所有都不亮 白色：rgb(255,255,255) # 所有都最亮 灰色：只要讓紅色/綠色/藍色的值都一樣就是灰色而且三個值越小越偏黑色越大越偏白色 |
| rgba | color：rgba(255,0,0,0.1); | rgba到css3中才推出，比起rgb多了一個a，a代表透明度 a取值0-1，取值越小，越透明 |
| 十六進制 | color: #FF0000; | #FF0000 其中FF代表R，00代表G，00代表B |
11.310 文本屬性
1、text-align：規定元素中的文本的水平對齊方式
| left | 左邊對齊 默認值 |
|---|---|
| right | 右對齊 |
| center | 居中對齊 |
| justify | 兩端對齊 |
2、text-decoration：文本裝飾
| none | 默認，定義標准的文本，通常用來去掉a標簽的下划線 |
|---|---|
| underline | 定義文本下的一條線。 |
| overline | 定義文本上的一條線。 |
| line-through | 定義穿過文本下的一條線。 |
| inherit | 繼承父元素的text-decoration屬性的值。 |
3、text-indent：首行縮進
#將段落的第一行縮進 32像素,16px;=1em; p {text-indent: 32px;} p {text-indent: 2em;}
4、line-height：行高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代選擇器</title> <style type="text/css"> p { width: 500px; height: 200px; text-align: center; line-height: 200px; } </style> </head> <body> <div> <p>hello英雄不問出處，流氓不論歲數</p> </div> </body> </html>
11.311 背景屬性
注意：沒有寬高的標簽，即便設置背景也無法顯示，即要求標簽是塊級標簽或行內塊級標簽
| background-color | 設置標簽的背景顏色的 |
rgb(0,255,0); rgba(0,255,0,0.1); #00ffff; |
|---|---|---|
| background-image | 設置標簽的背景圖片 | background-image: url("images/2.jpg");注意：如果圖片的大小小於標簽的大小，那么會自動在水平和垂直方向平鋪和填充 |
| background-size | 設置標簽的背景圖片的寬、高 | background-size: 300px 300px; background-size: 100% 100%; |
| inherit | 設置從父元素繼承background屬性值 | 以上背景屬性的值均可以設置為inherit，代表從父元素繼承background屬性 |
background-repeat：設置標簽的背景圖片的平鋪方式
background-repeat: repeat; #默認值，在垂直和水平方向都重復
background-repeat: no-repeat; #不重復，背景圖片將僅顯示一次
background-repeat: repeat-x; #背景圖片將在水平方向平鋪
background-repeat: repeat-y; #背景圖片將在垂直方向平鋪
應用：可以在服務端將一個大圖片截成小圖片，然后在客戶端基於平鋪屬性將小圖重復這樣用戶就以為是一張大圖，如此，既節省了流量提升了速度，又不影響用戶訪問例如很多網站的導航條都是用這種手法制作的
background-attachment：設置標簽的背景圖片在標簽中固定或隨着頁面滾動而滾動
background-attachment: scroll; #默認值，背景圖片會隨着滾動條的滾動而滾動
background-attachment: fixed; #不會隨着滾動條的滾動而滾動`
background-position：
前端的坐標系：圖片默認都是在盒子的左上角，background-position屬性，就是專門用於控制背景圖片的位置
background-position：水平方向的值，垂直方向的值
1、具體的方位名詞 水平方向：left，center，right 垂直方向：top，center，bottom
#如果只設置了一個關鍵詞，那么第二個值就是"center"
2、百分比 第一個值是水平位置，第二個值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。
#如果只設置了一個值，另一個值就是50%。
3、具體的像素 第一個值是水平位置，第二個值是垂直位置。 左上角是 0 0 單位是像素 (0px 0px) 或任何其他的 CSS 單位。
#如果只設置了一個值，另一個值就是50%。可以混合使用%和position值。
1、背景屬性縮寫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代選擇器</title> <style type="text/css"> div { width: 500px; height: 500px; /*background-color: red;*/ /*background-image: url("https://images.jpg");*/ /*background-repeat: no-repeat;*/ /*background-position: right bottom;*/ /*background-size: 100px 100px;*/ background: red url("https://images.jpg") no-repeat right bottom/100px 100px; } #背景屬性縮寫 </style> </head> <body> <div></div> </body> </html>
2、背景圖片和插入圖片的區別
1、背景圖片僅僅只是一個裝飾，不會占用位置，插入圖片會占用位置 2、背景圖片有定位屬性，可以很方便地控制圖片的位置，而插入圖片則不可以 3、插入圖片語義比背景圖片的語義要強，所以在企業開發中如果你的圖片想被搜索引擎收錄，那么推薦使用插入圖片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代選擇器</title> <style type="text/css"> .box1 { width: 200px; height: 200px; background-color: red; background-image: url("https://images.jpg"); background-repeat: no-repeat; background-position: right bottom; } .box2{ width: 300px; height: 300px; background-color: green; } </style> </head> <body> <div class="box1"> 1111111111111 </div> <div class="box2"> 22222222222222 <img src="https://images.jpg" alt=""> </div> </body> </html>
11.3111 rgba與opacity
rgba只能給背景設置透明度,不能給標簽、標簽的子標簽設置透明度，opacity可以給整個標簽設置透明度，包括標簽的子標簽以及標簽里的內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .c1 { width: 200px; height: 200px; background-color: rgba(0,0,0,0.65);#只能給背景設置透明度 # #opacity: 0.65; 改變整個標簽的透明度 } </style> </head> <body> <div class="c1">我是我啊啊啊啊</div> </body> </html>
如果想給背景圖片設置透明度，則必須使用opacity，因為背景圖片不能與背景顏色同時使用，如果同時使用，則背景顏色一直被背景圖片覆蓋，背景顏色不顯示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .c1 { height: 800px; background-image: url("https://images.jpg"); background-size:300px auto; opacity: 0.55; #改變整個標簽的透明度 } </style> </head> <body> <div class="c1"></div> </body> </html>