成都疫情最新新聞百度seo刷排名工具
目錄
- 一、前言
- 二、CSS的復(fù)合選擇器
- 1、后代選擇器
- ①、語法
- ②、注意事項(xiàng)
- 2、子選擇器
- ①、語法
- ②、注意事項(xiàng)
- 3、并集選擇器
- ①、語法
- ②、注意事項(xiàng)
- 4、鏈接偽類選擇器
- ①、語法
- ②、注意事項(xiàng)
- 三、CSS元素顯示模式轉(zhuǎn)換
- 1、轉(zhuǎn)換為塊元素display:block
- 2、轉(zhuǎn)換為行內(nèi)元素display:inline
- 3、轉(zhuǎn)換為行內(nèi)塊元素display:inline-block
- 四、CSS背景屬性
- 1、背景平鋪
- 2、背景圖片位置
- 3、背景圖像固定（背景附著）
- 4、背景顏色的半透明
- 五、CSS的三大特征之一-繼承性
- 1、行高的繼承性
- 六、總結(jié)
一、前言
CSS（層疊樣式表）作為前端開發(fā)的核心技術(shù)之一，為網(wǎng)頁賦予了美觀和交互性。本文將深入探討CSS的復(fù)合選擇器、元素顯示模式、背景屬性以及其三大特征，幫助讀者更好地理解和應(yīng)用CSS。
二、CSS的復(fù)合選擇器
1、后代選擇器
后代選擇器又稱為包含選擇器，可以選擇父元素里邊子元素，其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代
①、語法
語法：元素1 元素2 {樣式聲明}
<!DOCTYPE html>
<html lang="en">
<head><style><!-- 元素1 元素2 {樣式聲明} -->ol li{color:pink}</style>
</head>
<body><ol><li>hhh</li><li>hhh</li><li>hhh</li></ol><ul><li>你好</li><li>你好</li><li>你好</li><li>你好</li></ul>
</body>
</html>
②、注意事項(xiàng)
- 元素1和元素2中間用空格隔開
- 元素1是父級(jí)，元素2是子級(jí)，最終選擇的是<font color="red"元素2
- 元素2可以是兒子，也可以是孫子等，只要是元素1的后代即可
- 元素1和元素2可以是任意基礎(chǔ)選擇器
2、子選擇器
子元素選擇器（子選擇器）只能選擇作為某元素的最近一級(jí)子元素
①、語法
語法：元素1>元素2 {樣式聲明}
<!DOCTYPE html>
<html lang="en"><head><style>.nav>a {color: red;}/* .nav p>a {color: red;} */</style>
</head><body><div class="nav"><a href="#">我是兒子</a><p><a href="#">我是孫子</a></p></div>
</body></html>
修改“我是孫子”為紅色
<!DOCTYPE html>
<html lang="en"><head><style>/* .nav>a {color: red;} */.nav p>a {color: red;}</style>
</head><body><div class="nav"><a href="#">我是兒子</a><p><a href="#">我是孫子</a></p></div>
</body></html>
②、注意事項(xiàng)
- 元素1和元素2中間用大于號(hào)隔開
- 元素1是父級(jí)，元素2是子級(jí)，最終選擇的是元素2
- 元素2必須是親兒子，其孫子、重孫子之類都不歸它管，也可以叫它親兒子選擇器
3、并集選擇器
并集選擇器可以選擇多組標(biāo)簽，同時(shí)為它們定義相同的樣式。通常用于集體聲明
并集選擇器是各選擇器通過英文逗號(hào)（,）連接而成，任何形式的選擇器都可以作為并集選擇器的一部分
①、語法
語法：元素1，元素2 {樣式聲明}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div,p {color: red;}</style>
</head><body><div>并集選擇器1</div><p>并集選擇器2</p>
</body></html>
②、注意事項(xiàng)
- 元素1和元素2中間用逗號(hào)隔開
- 逗號(hào)可以理解為和的意思
- 并集選擇器通常用于集體
4、鏈接偽類選擇器
①、語法
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 1.未訪問的鏈接a:link 把沒有訪問過的（點(diǎn)擊過的）鏈接選出來 */a:link{color: black;/* 取消下劃線 */text-decoration: none;}/* 2.選擇點(diǎn)擊過的（訪問過的）鏈接 */a:visited{color: burlywood;}/* 3.選擇鼠標(biāo)經(jīng)過的那個(gè)鏈接 */a:hover{color:pink}/* 4.選擇的是我們鼠標(biāo)正在按下還沒有談起鼠標(biāo)的那個(gè)鏈接 */a:active{color: blueviolet;}</style>
</head><body><a href="#">小豬佩奇</a>
</body></html>
②、注意事項(xiàng)
- 為了確保生效，請(qǐng)按照LVHA的循順序聲明:link - :visited - :hover - :active
- 因?yàn)閍鏈接在瀏覽器中具有默認(rèn)樣式，需要給鏈接單獨(dú)制定樣式
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 設(shè)置鏈接為黑色，并取消下劃線 */a{color: black;text-decoration: none;}/* 3.選擇鼠標(biāo)經(jīng)過的鏈接，并顯示下劃線 */a:hover{color:pink;text-decoration:underline;}</style>
</head><body><a href="#">小豬佩奇</a><a href="www">小點(diǎn)讀豬佩奇</a>
</body>
三、CSS元素顯示模式轉(zhuǎn)換
1、轉(zhuǎn)換為塊元素display:block
<head><style>a{width: 240px;height: 30px;background-color: palegoldenrod;/* 把行內(nèi)元素a轉(zhuǎn)換為塊級(jí)元素 */display: block;}</style>
</head>
<body><a href="#">百度</a><a href="#">谷歌</a>
</body>
</html>
2、轉(zhuǎn)換為行內(nèi)元素display:inline
<head><style>div{
/* width: 240px; */
/* height: 30px; */background-color: aquamarine;/* 把div 塊級(jí)元素轉(zhuǎn)換為行內(nèi)元素 */display: inline;}</style>
</head>
<body><div>小豬佩奇</div><div>蘋果</div>
</body>
</html>
如果使用display: inline的話，則width、height不生效
3、轉(zhuǎn)換為行內(nèi)塊元素display:inline-block
<head><style>span{width: 300px;height: 30px;background-color: coral;display: inline-block;}</style>
</head>
<body><span>行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊元素</span><span>行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊元素</span>
</body>
</html>
如果使用display: inline-block的話，則width、height生效
四、CSS背景屬性
1、背景平鋪
background-image: url(image/0001.png);
/* 1.背景圖片不平鋪 */
background-repeat: no-repeat;/* 2.默認(rèn)的情況下，背景圖片時(shí)平鋪的 */
background-repeat: repeat;/* 3.沿著x軸平鋪 */
background-repeat: repeat-x;/* 4.沿著y軸平鋪 */
background-repeat: repeat-y;2、背景圖片位置
/* 背景圖片位置
* 如果指定的兩個(gè)值都是方位名詞，則兩個(gè)值前后順序無關(guān)
* 如果只指定了一個(gè)方位名詞，另一個(gè)值省略，則第二個(gè)值默認(rèn)
* 居中對(duì)齊*/
background-position: center top;background-position: right center;background-position: 20px center;
3、背景圖像固定（背景附著）
- background-attachment屬性設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)
- background-attachment后期可以制作視差滾動(dòng)的效果
#背景圖像是隨對(duì)象內(nèi)容滾動(dòng)(默認(rèn)的是scroll滾動(dòng)的)
background-attachment: scroll#背景圖像固定
background-attachment: fixed
4、背景顏色的半透明
background: rgba(0,0,0,0.3)
五、CSS的三大特征之一-繼承性
1、行高的繼承性
語法
body{font: 12px/1.5 Microsoft YaHei;
}
- 行高可以跟單位也可以不跟單位
- 如果子元素沒有設(shè)置行高，則會(huì)繼承父元素的行高為1.5
- 此時(shí)子元素的行高是：當(dāng)前子元素的文字大小*1.5
- body行高1.5 這樣寫法最大的優(yōu)勢(shì)就是里面子元素可以根據(jù)自己文字大小自動(dòng)調(diào)整行高
六、總結(jié)
CSS的復(fù)合選擇器、元素顯示模式、背景屬性以及其三大特征共同構(gòu)成了CSS的核心部分。通過深入理解這些概念，開發(fā)者可以更靈活地控制元素的樣式和外觀，從而創(chuàng)造出更精美、交互性更強(qiáng)的網(wǎng)頁。