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