一照筑、CSS復合選擇器
復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標簽瘦陈。
1.1 后代選擇器
普通選擇器通過空格層級遞進,最后一個選擇器下的匹配標簽都會被選中凝危。
例子：
<style>
/* 標簽p1和p2內的字體都被設置為紅色 */
div div p{
color: red;
}
</style>
...
<div>
<div>
<p>我是標簽p1。</p>
<p>我是標簽p2晨逝。</p>
</div>
</div>
注意:
- 對于要修改的樣式,采用后代選擇器時寫法應為:div div p,而不應該寫成:div div,雖然效果相同蛾默，但是是錯誤寫法。一旦頁面復雜,其他相似結構很可能也會被設置捉貌。所以必須采用第一種寫法支鸡。
- 后代選擇器與子代選擇器不同,不需要嚴格的層級嵌套關系,也就是說可以跨標簽層級指定冬念。無論跨多少個標簽,只要滿足樣式中指定的選擇器順序就生效。
1.2 子代選擇器
普通選擇器通過">"符號層級遞進,最后一個選擇器下的匹配標簽都會被選中牧挣。
例子：
注意：
- 子代選擇器必須按照嵌套層級依次定位,不允許跳躍
<style>
/* 標簽p1和p2內的字體都被設置為紅色 */
div>div>p{
color: red;
}
</style>
...
<div>
<div>
<p>我是標簽p1刘急。</p>
<p>我是標簽p2。</p>
</div>
</div>
1.3 并集選擇器
普通選擇器通過","并列的標簽都會被選中浸踩。
例子：
<style>
/* 標簽p1和p2和p3和p4內的字體都被設置為紅色 */
div,span{
color: red;
}
</style>
...
<div>
<p>我是標簽p1叔汁。</p>
<p>我是標簽p2。</p>
</div>
<span>
<p>我是標簽p3检碗。</p>
<p>我是標簽p4据块。</p>
</span>
1.4 交集選擇器
"標簽名.類名"。用的相對來說比較少,不太建議使用折剃。
例子：
<style>
/* 設置p標簽為紅色 */
p.demo {
color: red;
}
</style>
<p class="demo">我是demo</p>
1.5綜合練習
不修改一下代碼的情況下,完成以下任務另假。
<body>
<!-- 主導航欄 -->
<div class="nav">
<ul>
<li><a href="#">公司首頁</a></li>
<li><a href="#">公司簡介</a></li>
<li><a href="#">公司產品</a></li>
<li>
<a href="#">聯(lián)系我們</a>
<ul>
<li><a href="#">公司郵箱</a></li>
<li><a href="#">公司電話</a></li>
</ul>
</li>
</ul>
</div>
<!-- 側導航欄 -->
<div class="sitenav">
<div class="site-l">左側側導航欄</div>
<div class="site-r">
<a href="#">登錄</a>
</div>
</div>
</body>
1)鏈接 登錄 的顏色為紅色。
分析：
- 對于a標簽有其特殊性,樣式的無論哪種選擇都必須指定a標簽才會起作用怕犁。
- 對于單個標簽的設置,采用子代選擇器可能會更好,具有特殊边篮。
/* 參考答案1 */
.sitenav .site-r a{
color: red;
}
/* 參考答案2 */
.site-r a{
color: red;
}
/* 參考答案3 */
.sitenav>.site-r a{
color: red;
}
/* 參考答案4 (自己推薦)*/
.sitenav>.site-r>a{
color: red;
}
/* 老師答案 */
.site-r a {
color: red;
}
2)主導航欄里面的所有的鏈接改為橙色。
分析：
- 對于一類(很多)標簽的樣式設置,使用后代選擇器可能會更好奏甫。
/* 參考答案1(自己推薦) */
.nav a{
color: red;
}
/* 參考答案2 */
.nav ul a{
color: red;
}
/* 參考答案3 */
.nav ul li a{
color: red;
}
/* 老師答案 */
.nav a {
color: orange;
}
3)主導航欄和側導航欄里面文字都是14像素并且是微軟雅黑戈轿。
分析：
并列關系,使用并集選擇器會更好。
/* 老師和自己的答案 */
.nva,
.sitenav {
font-size: 14px;
font-family: "微軟雅黑";
}
4)主導航欄里面的一級菜單鏈接文字顏色為綠色阵子。
/* 寫法1(唯一) */
.nav>ul>li>a {
color: green;
}
1.6 偽類選擇器
偽類常用的有如下四種：
- link /* 未訪問的鏈接 */
- visited /* 已訪問的鏈接 */
- hover /* 鼠標移動到鏈接上 */
- active /* 選定的鏈接 */
選擇器+":"+偽類構成復合選擇器思杯。
注意:
- lvha定義的順序不允許改變。
- 也可以只定義hover
示例：
a:link {
color: #333;
}
a:visited {
color: orange;
}
a:hover {
color: red;
}
a:active {
color: green;
}
...
<a href="www.baidu.com">百度一下</a>
更一般情況只定義hover偽類的狀態(tài):
a { /* a是標簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是鏈接偽類選擇器 鼠標經過 */
color: red; /* 鼠標經過的時候挠进，由原來的 灰色 變成了紅色 */
}
1.7復合選擇器總結
| 選擇器 | 作用 | 特征 | 使用情況 | 用法 |
|---|---|---|---|---|
| 后代選擇器 | 用來選擇元素或元素組的后代 | 子孫后代都能選 | 最多 | div p { color：red;} |
| 子代選擇器 | 選擇作為某元素子元素的元素 | 只選親兒子 | 較少 | .nav>p { color: red; } |
| 交集選擇器 | 選擇兩個標簽交集的部分 | 既 有 | 較少 | a:link {color: red;} |
| 并集選擇器 | 選擇某些相同樣式的選擇器 | 可以用于集體聲明 | 較多 | .nav, .header {color: red;} |
二色乾、標簽的顯示模式
HTML標簽根據(jù)布局方式可以分為2種,塊標簽和行標簽,它們也稱塊元素和行內元素。具體如下领突。
2.1 塊級標簽(block)
常見的塊元素有<h1>~<h6>暖璧、<p>、<div>君旦、<ul>澎办、<ol>、<li>等于宙，其中<div>標簽是最典型的塊元素浮驳。
塊標簽特點：
（1）總是從新行開始
（2）高度悍汛，行高捞魁、外邊距以及內邊距都可以控制。
（3）寬度默認是容器的100%
（4）可以容納內聯(lián)元素和其他塊元素离咐。
（5） 是一個容器及盒子谱俭，里面可以放行內或者塊級元素
注意：
- 文字類塊級標簽奉件，里面不能放其他塊級元素。如p/h1~h6/dt/里不能放div昆著。
2.2 行內標簽(inline)
常見的行內元素有<a>县貌、<strong>、<b>凑懂、<em>煤痕、<i>、<del>接谨、<s>摆碉、<ins>、<u>脓豪、<span>等巷帝，其中<span>標簽最典型的行內元素。
行標簽特點：
（1）和相鄰行內元素在一行上扫夜。
（2）高楞泼、寬無效，但水平方向的padding和margin可以設置笤闯，垂直方向的無效堕阔。
（3）默認寬度就是它本身內容的寬度。
（4）行內元素只能容納文本或則其他行內元素颗味。（a 特殊 a里面可以放塊級元素 ）
注意：
- 鏈接標簽(a)里不能放再放鏈接印蔬。
- 特殊情況a里面可以放塊級元素。
2.3 行內塊標簽
在行內元素中有幾個特殊的標簽<img />脱衙、<input />侥猬、<td>。
特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙捐韩。
（2）默認寬度就是它本身內容的寬度退唠。
（3）高度，行高荤胁、外邊距以及內邊距都可以控制瞧预。
三種標簽顯示模式的區(qū)別：
| 元素模式 | 元素排列 | 設置樣式 | 默認寬度 | 包含 |
|---|---|---|---|---|
| 塊級元素 | 一行只能放一個塊級元素 | 可以設置寬度高度 | 容器的100% | 容器級可以包含任何標簽 |
| 行內元素 | 一行可以放多個行內元素 | 不可以直接設置寬度高度 | 它本身內容的寬度 | 容納文本或則其他行內元素 |
| 行內塊元素 | 一行放多個行內塊元素 | 可以設置寬度和高度 | 它本身內容的寬度 |
2.4 標簽顯示模式的轉換
在CSS屬性(properties)中的布局(layout)屬性中,display屬性可以對HTML標簽的顯示模式進行轉換。最后以轉換后結果的特性為準仅政。
display屬性值：
| 屬性值 | 寬/高可設置 | 同行繼續(xù)增加元素 |
|---|---|---|
| inline | 否 | 是 |
| block | 是 | 否 |
| inline-block | 是 | 是 |
? inline:沒有高度和寬度,同行可繼續(xù)增加元素垢油。
? inline-block:可以設置高度和寬度,同行可以增加元素。
注意：
1)塊標簽轉行內標簽可以使用：inline和inline-block;
示例1：將兩個DIV內容在一行顯示,不需要設置寬度
div {
display: inline;
background-color: red;
}
<div>123</div>
<div>456</div>
示例2：三個 span,要求 150 * 150 綠色盒子,在同一行顯示圆丹。
span {
display: inline-block;
background-color: green;
width: 150px;
height: 150px;
}
...
<span>1</span>
<span>2</span>
<span>3</span>
示例3：三個 a 鏈接 80 * 20 藍色 盒子 要求 必須一行顯示 這三個盒子滩愁。
a {
display: inline-block;
background-color: blue;
width: 80px;
height: 20px;
color: #fff;
}
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
三、行高
3.1 行高定義
中文行高：兩行頂線的距離稱為行高辫封∠跬鳎可以通過PS工具查看廉丽。
英文行高：兩個基線的距離。
<img src="media/line2.png" />
3.2 行高組成
行高垂直從上到下依次為：上距離,內容高度,下距離妻味。
3.3 行高的應用
當行高等于盒子高時,文字在盒子中就是垂直居中的正压。
- 如果 行高 等于 盒子高度 文字會 垂直居中
- 如果行高 大于 高度 文字會 偏下
- 如果行高小于高度 文字會 偏上
四、CSS的特性
4.1 層疊性
定義：如果同一個元素上的樣式出現(xiàn)疊加责球，那么這個時候一個屬性就會將另一個屬性層疊掉焦履。
? 比如,先給某個標簽指定了內部文字顏色為紅色，接著又指定了顏色為藍色雏逾，此時出現(xiàn)一個標簽指定了相同樣式不同值的情況裁良，這就是樣式層疊。
? 出現(xiàn)樣式層疊依照兩個原則,第一個為就近原則,第二個為按照優(yōu)先級別高的生效校套。
4.1.1 就近原則
距離作用域近的,起作用价脾。
示例：
/* 123最后為藍色 */
p {color: red;}
p {color: blue;}
<p>123</p>
4.1.2 CSS優(yōu)先級
不同的選擇器對應不同的權重,權重值由(a,b,c,d)組成,權重可以做加法計算,但必須是按對應位置做加法。權重值a>b>c>d笛匙。
| 選擇器名稱(個) | 權重值 |
|---|---|
| 類繼承/通配符* | (0,0,0,0) |
| HTML標簽 | (0,0,0,1) |
| 類/偽類 | (0,0,1,0) |
| ID | (0,1,0,0) |
| 行內樣式 | (1,0,0,0) |
| important | 無窮大 |
選擇器對應的權重值:
| 選擇器名稱(個) | 權重值 |
|---|---|
| 類繼承/通配符* | (0,0,0,0) |
| HTML標簽 | (0,0,0,1) |
| 類/偽類 | (0,0,1,0) |
| ID | (0,1,0,0) |
| 行內樣式 | (1,0,0,0) |
| important | 無窮大 |
舉例:
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
五侨把、CSS背景屬性
| background-color | 背景顏色 |
|---|---|
| background-image | 背景圖片地址 |
| background-repeat | 是否平鋪 |
| background-position | 背景位置 |
| background-attachment | 背景固定還是滾動 |
<end>
