CSS複合選擇器,標籤的顯示模式,行高,背景,css三大特性
CSS複合選擇器
複合選擇器作用:更準確精細的選擇目標元素標籤,複合選擇器是由兩個或者多個基礎選擇器,通過不同的方式組合而成
後代選擇器
後代選擇器也成爲包含選擇器
作用:用來選擇元素或者子元素的子孫後代
其他寫法就是吧外層標籤寫在前面,內層標籤寫在後面,中間用空格隔開,先寫父親爺爺,在寫兒子孫子
父級 子級(屬性:屬性值;屬性:屬性值:}
交集選擇器
交集選擇器是由兩個選擇器組成,找到的標籤必須滿足:既有標籤一的特點,也有標籤二的特點
語法:h3.class{color:red}其中第一個爲標籤選擇器,第二個爲class選擇器,兩個選擇器之間不能有空格.
並集選擇器
作用:如果某些選擇器定義相同的樣式,就可以利用並集選擇器,可以讓代碼簡潔
並集選擇器(css選擇器分組)是哥哥選擇器通過,連接而成的,通常員工與集體聲明
語法:.class,h3{color:red;font-size:25px;}任何選擇器都可以作爲並集選擇器的一部分
記憶技巧:並集選擇器通常用於集體聲明,逗號隔開,所有選擇器都會執行後面樣式,逗號可以理解爲和的意思
eg:.one,p,#test{color:red;}表示類名爲one和p標籤和id爲test的這三個選擇器都會執行顏色爲紅色
鏈接僞類選擇器
僞類選擇器寫法: :linl{}
作用:用於向某些選擇器添加特殊的效果,比如給鏈接添加特殊效果,比如可以選擇第一個,第n個元素
因爲僞類選擇器很多,比如鏈接僞類,結構僞類.
鏈接僞類:
a:link{} //未訪問的鏈接
a:visited//已訪問的鏈接
a:hover//鼠標移動到連接上
a:active//選定的鏈接
注意:寫的時候,他們的殊勳儘量不要顛倒,按照lvha的順序,否則可能引起錯誤
複合選擇器的總結
| 選擇器 | 作用 | 特徵 | 使用情況 | 隔開符號及用法 |
|---|---|---|---|---|
| 後代選擇器 | 用來選擇元素後代 | 是選擇所有的子孫後代 | 較多 | 符號是空格.nava a |
| 子代選擇器 | 選擇最近一級元素 | 只選親兒子 | 較少 | 符號是> .nav>p |
| 交集選擇器 | 選擇兩個標籤交集的部分 | 既是又是 | 較少 | 沒有符號 p.one |
| 並集選擇器 | 選擇某些相同樣式的選擇器 | 可以用於集體聲明 | 較多 | 符號是逗號 .nav,header |
| 鏈接僞類選擇器 | 給鏈接更改狀態 | 較多 | 重點記住a{}和a:hover{} |
標籤顯示模式(display)
1:塊級元素
常見的額塊級元素有h1~h6,p,div,ul,ol,li,等.
塊級元素的特點:
獨佔一行
高度,寬度,外邊距以及內邊距都可以控制
寬度默認是容器(父級)的寬度
是一個容器級盒子,裏面可以放行內或者塊級元素,但注意p,h1~h6,dt屬於文字標籤不能放其他塊級元素
2:行內元素
常見的行內元素有a,strong,b,em,i,del,s,ins,u,span
行內元素的特點:
相鄰行內元素在一行上,一行可以顯示多個
高寬直接設置是無效的(寬度爲內容的長短)
默認寬度就是內容的寬度
行內元素只能容納文本或者其他行內元素
注意:
鏈接裏面不能再放鏈接
特殊情況a裏面可以放塊級元素,但是給a轉換一下塊級模式最安全.
3:行內塊元素
在行內塊元素中有幾個特殊的標籤img,input,td可以對他們設置寬度高度個對齊屬性,
行內塊元素的特點:
和相鄰行內元素(行內塊)在一行上,但是之間會有空隙,一行可以顯示多個.
默認寬度就是它本身內容的寬度
高度,行高,外邊距以及內邊距都可以控制
三種模式總結
| 元素模式 | 元素排序 | 設置樣式 | 默認寬度 | 包含 |
|---|---|---|---|---|
| 塊級元素 | 一行只能放一個塊級元素 | 可以設置高度寬度 | 容器的100% | 容器可以包含任何標籤 |
| 行內元素 | 一行可以放多個行內元素 | 不可以直接設置高度和寬度 | 他本身內容的寬度 | 容納文本或其他行內元素 |
| 行內塊元素 | 一行方多個行內塊元素 | 可以設置寬度和高度 | 它本身內容的寬度 |
標籤顯示模式轉換
塊轉行:display:inline;
行內專塊:display:block;
塊,行內元素轉換爲行內塊:display:inline-block;
行高那些事(line-height)
一個行高是有四條線(頂線,中線,基線,底線)組成,因爲是四條線故此是三個區域分別爲上距離,內容距離個地距離
行高和高度的三種關係:
1:行高等於高度文字會垂直居中
2:行高大於高度文字會偏下
3:行高小於高度文字會偏上
理解文字的行高等於盒子高度文字會垂直居中:
CSS背景(background)
背景顏色
語法;background-color:顏色值;默認是transparent透明的
背景圖片
background-image:none|url(url)
eg:background-image:url(images/1.png)//不需要加引號
背景平鋪
background-repeat:repeat|no-repeat|repeat-x|repeat-y
repeat:背景圖像在縱向和橫向上平鋪(默認的)
no-repeat:背景圖像不平鋪
repeat-x:背景圖像在橫向上平鋪
repeat-y:背景圖像在縱向上平鋪
背景位置(重點)
語法:background-position:length||length background-position:position||position
eg:background-position:x座標 y座標
水平居中:background-position:center center
參數:length->百分數|有浮點數和單位標識符組成的長度值
position->top|center|botton|left|center|right方位詞
注意:
必須先指定background-image屬性
position後面是x座標和y座標,可以施一公方位詞或者精準單位
如果只指定了一個方位詞,另一個默認居中 50%
如果只指定一個數值,那麼該數值用於x座標,另一個默認爲y座標,默認居中
如果指定兩個值,兩個值都是方位名字,則兩個值前後順序無關,比如left,top和top,left效果一樣
如果指定兩個值,精確單位和方位名字混合使用,則第一個值是x座標,第二個值是y座標
背景附着
背景附着就是解釋背景是滾動的還是固定的
語法:background-attachment:scroll|fixed
參數:scroll:背景圖像是隨對象內容滾動的.fixed背景圖像固定
背景簡寫
background:屬性的值的書寫順序官方並沒有強制標準的,爲了可讀性建議大家書寫如下
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
background:transparent url(image.png) repeat-y scroll center top;
背景透明
background:rgba(0,0,0,0.3)
最後一個參數是:alpha透明度取值範圍0~1
我們習慣把0.3的0省略掉,這樣寫background:rgba(0,0,0,.3)
注意:背景半透明是指盒子背景半透明,盒子內容分不受影響.
背景總結
| 屬性 | 作用 | 值 |
|---|---|---|
| background-color | 背景顏色 | 預定義的顏色值/十六進制RGB代碼 |
| background-image | 背景圖片 | url(圖片路徑) |
| background-repeat | 背景平鋪 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分別是x和y座標,切記如果有精確數值單位,則必須按照先x後y的寫法 |
| background-attachment | 背景固定還是滾動 | scroll/fixed |
| 背景簡寫 | 更簡單 | 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置 他們沒有順序 |
| 背景透明 | 讓盒子半透明 | background:rgba(0,0,0,.3);後面必須四個值 |
CSS三大特性:層疊性,繼承性,優先級
層疊性
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
color: red;
}
a{
color: green;
}
</style>
</head>
<body>
<a href="http://xiaomi.com" class="y">網站首頁</a>
</body>
效果爲:綠色
繼承性
作用:降低複雜性
text-,font-,line-這些元素開頭的可以繼承,以及color屬性
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>
<p>網站首頁</p>
</div>
</body>
效果:文字爲紅色
優先級(重點)
權重計算公式
!impnort(無窮大)>行內(1,0,0,0)>id(0,1,0,0)>類(0,0,1,0)>標籤(0,0,0,1)>繼承(0,0,0,0)
eg:.class{color:red !import}
繼承權重是0.
如果選中了,那麼誰權重大聽誰得
如果沒有選中,那麼權重是0,因爲繼承的權重是0
注意:有兩個特殊標籤鏈接和h標題,他們瀏覽器有自己默認的方式,繼承的權重爲0,所以我們還是要單獨給鏈接和標題一個樣式
權重疊加
.class a{}//類選擇器的權重0,0,1,0+標籤選擇器的權重0,0,0,1=0,0,1,1
看一下代碼瞭解權重優先級:因爲.nav p權重爲0,0,1,1而.p1權重爲0,0,1,0因爲這種寫法不能給p1渲染顏色最簡單的寫法是.nav .p1{color:yellow}權重爲0,0,2,0因此p1會爲黃色
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav p{
color: red;
}
.p1{
color: yellow;
}
</style>
</head>
<body>
<div class="nav">
<p class="p1">網站首頁</p>
<p>網站底部</p>
</div>
</body>
注意:0,0,0,5+0,0,0,5=0,0,0,10所以不會存在10個標籤要不一個類權重高的問題
看一下代碼說出最終顏色
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{/*給到p標籤的權重爲0*/
color: red;
}
p{/*給到p標籤的權重爲0,0,0,1*/
color: yellow;
}
/*因爲demo沒有選p標籤,所以繼承的權重爲0 */
.demo{/*給到p標籤的權重爲0*/
color: blue;
}
</style>
</head>
<body>
<div class="demo">
<p>繼承的權重爲0</p>
</div>
</body>
結果爲:黃色
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{/*給到p標籤的權重爲0*/
color: red;
}
p{/*給到p標籤的權重爲0,0,0,1*/
color: yellow;
}
/*因爲demo沒有選p標籤,所以繼承的權重爲0 */
.demo p{/*給到p標籤的權重爲0,0,1,1*/
color: blue;
}
</style>
</head>
<body>
<div class="demo">
<p>繼承的權重爲0</p>
</div>
</body>
結果爲:藍色