目錄
1、后代選擇器
2、子代選擇器
3、并集選擇器
4、交集選擇器
5、偽類選擇器
6、超鏈接偽類
7、CSS特性-繼承性
8、CSS特性-層疊性
9、CSS特性-優先級
10、優先級-疊加計算
11、Emmet寫法
12、背景圖
13、背景圖平鋪方式
14、背景圖位置
15、背景圖縮放
16、背景圖固定
17、背景圖復合屬性
18、顯示模式
19、顯示模式轉換
20、綜合案例1-熱詞
1、后代選擇器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代選擇器</title><style>/* div里面的span文字顏色是紅色 *//* 后代選擇器，選中所有后代，包含兒子，孫子，重孫子... */div span {color: red;}</style>
</head>
<body><span>span 標簽</span><div><span>這是div的兒子span</span><p><span>這是div的孫子span</span></p></div>
</body>
</html>2、子代選擇器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>子代選擇器</title><style>/* div的兒子span文字顏色是紅色 */div > span {color: red;}</style>
</head>
<body><div><span>兒子 span</span><p><span>孫子 span</span></p></div>
</body>
</html>3、并集選擇器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>并集選擇器</title><style>/* div、p、span 文字顏色是紅色 */div,p,span {color: red;}</style>
</head>
<body><div>div 標簽</div><p>p 標簽</p><span>span 標簽</span>
</body>
</html>4、交集選擇器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>交集選擇器</title><style>/* 第一個 p 標簽文字顏色是紅色 *//* 既有的關系：既是 p 標簽，又有 box 類 */p.box {color: red;}</style>
</head>
<body><p class="box">p 標簽，使用了類選擇器 box</p><p>p 標簽</p><div class="box">div 標簽，使用了類選擇器</div>
</body>
</html>5、偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>偽類選擇器</title><style>/* 任何標簽都可以設置鼠標懸停的狀態 */a:hover {color: red;}/* div:hover */.box:hover {color: green;}</style>
</head>
<body><a href="#">a 標簽，超鏈接</a><div class="box">div 標簽</div>
</body>
</html>6、超鏈接偽類
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超鏈接偽類</title><style>/*a:link {color: red;}a:visited {color: green;}a:hover {color: blue;}a:active {color: orange;}*//* 工作中，一個 a 標簽選擇器設置超鏈接的樣式，hover狀態特殊設置 */a {color: red;}a:hover {color: green;}</style>
</head>
<body><a href="#">a 標簽，測試偽類</a>
</body>
</html>7、CSS特性-繼承性
?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性-繼承性</title><style>body {font-size: 30px;color: red;font-weight: 700;}</style>
</head>
<body><div>div 標簽</div><p>p 標簽</p><span>span 標簽</span><!-- 如果標簽自己有樣式則生效自己的樣式，不繼承 --><a href="#">a 標簽</a><h1>h1 標簽</h1>
</body>
</html>8、CSS特性-層疊性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性-層疊性</title><style>/* 覆蓋、疊加 */div {color: green;font-size: 30px;}div {color: red;font-weight: 700;}</style>
</head>
<body><div>div 標簽</div>
</body>
</html>9、CSS特性-優先級
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性-優先級</title><style>/* 技巧：選擇器選中標簽的范圍越大，優先級/權重越低 */div {color: green;}/* !important 提權功能，提高權重/優先級到最高，慎用 */* {color: red !important;}.box {color: blue;}#test {color: orange;}</style>
</head>
<body><div class="box" id="test" style="color: purple;">div 標簽</div>
</body>
</html>10、優先級-疊加計算
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>權重疊加-第一題</title><style>/* 行內樣式，id選擇器個數，類選擇器個數，標簽選擇器個數 *//* (0,0,2,1) */.c1 .c2 div {color: blue;}/* (0,1,0,1) */div #box3 {color: green;}/* (0,1,1,0) */#box1 .c3 {color: orange;}/* 顯示橙色 */</style>
</head>
<body><div id="box1" class="c1"><div id="box2" class="c2"><div id="box3" class="c3">這行文本是什么顏色的？</div></div></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>權重疊加-第二題-繼承</title><style>div p {color: red;}/* 繼承權重最低 */.father {color: blue;}/* 顯示紅色 */</style>
</head>
<body><div class="father"><p class="son">文字</p></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>權重疊加-第三題</title><style>/* (0,2,0,0) */#father #son {color: blue;}/* (0,1,1,1) */#father p.c2 {color: black;}/* (0,0,2,2) */div.c1 p.c2 {color: red;}/* 繼承優先級最低 */#father {color: green !important;}/* 繼承優先級最低 */div #father .c1 {color: yellow;}/* 顯示藍色 */</style>
</head>
<body><div id="father" class="c1"><p id="son" class="c2">這行文本是什么顏色的？</p></div>
</body>
</html>11、Emmet寫法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Emmet寫法</title><style>div {width: 30px;height: 50px;}</style>
</head>
<body><div></div><p class="box"></p><div class="box"></div><p id="box"></p><div></div><p></p><div><p></p></div><span></span><span></span><span></span><div>111</div>
</body>
</html>12、背景圖
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景圖</title><style>div {/* 盒子是 400*400 */width: 400px;height: 400px;/* 背景圖默認是平鋪（復制）的效果 */background-image: url(./images/cat.png);}</style>
</head>
<body><div>div 標簽</div>
</body>
</html>13、背景圖平鋪方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景圖平鋪方式</title><style>div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/cat.png);/* 不平鋪：盒子的左上角顯示一張背景圖 */background-repeat: no-repeat; /* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; */}</style>
</head>
<body><div>div 標簽</div>
</body>
</html>14、背景圖位置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景圖位置</title><style>div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/cat.png);background-repeat: no-repeat; /* 左上角 *//* background-position: 0 0; *//* background-position: left top; *//* 右下角 *//* background-position: right bottom; *//* 水平：正數向右，負數向左 *//* background-position: 50px 0; *//* background-position: -50px 0; *//* 垂直：正數向下，負數向上 *//* background-position: 0 100px; *//* background-position: 0 -100px; *//* background-position: 50px center; *//* 特殊寫法 *//* background-position: bottom left; *//* 關鍵字可以只寫一個，另一個方向居中 *//* background-position: bottom; *//* 只寫一個數字表示水平方向，垂直方向居中 */background-position: 50px;}</style>
</head>
<body><div>div 標簽</div>
</body>
</html>15、背景圖縮放
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景圖縮放</title><style>div {width: 500px;height: 300px;background-color: pink;background-image: url(./images/cat.png);background-repeat: no-repeat; /* contain:如果圖的寬高跟盒子尺寸相等停止縮放，可能導致盒子有露白 *//* background-size: contain; *//* cover:圖片完全覆蓋盒子，可能導致圖片顯示不全 *//* background-size: cover; *//* 100%:圖片的寬度跟盒子寬度一樣，圖片的高度按照比例等比例縮放 */background-size: 100%;}</style>
</head>
<body><div>div 標簽</div>
</body>
</html>16、背景圖固定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景圖固定</title><style>body {background-image: url(./images/bg.jpg);background-repeat: no-repeat;background-position: center top;background-attachment: fixed;}</style>
</head>
<body><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p><p>測試文字，撐開body，讓瀏覽器有滾動條</p>
</body>
</html>17、背景圖復合屬性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景圖復合屬性</title><style>div {width: 400px;height: 400px;background: pink url(./images/cat.png) no-repeat center bottom/cover;}</style>
</head>
<body><div>div 標簽</div>
</body>
</html>18、顯示模式
?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>顯示模式</title><style>/* 塊級：獨占一行；寬度默認是父級100%；加寬高生效 */div {width: 100px;height: 100px;}.div1 {background-color: brown;}.div2 {background-color: orange;}/* 行內：一行共存多個；尺寸由內容撐開；加寬高不生效 */span {width: 200px;height: 200px;}.span1 {background-color: brown;}.span2 {background-color: orange;}/* 行內塊：一行共存多個；默認尺寸由內容撐開；加寬高生效 */img {width: 100px;height: 100px;}</style>
</head>
<body><!-- 塊元素 --><div class="div1">div 標簽1</div><div class="div2">div 標簽2</div><!-- 行內元素 --><span class="span1">span11111</span><span class="span2">span2</span><!-- 行內塊元素 --><img src="./images/cat.png" alt=""><img src="./images/cat.png" alt="">
</body>
</html>19、顯示模式轉換
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>顯示模式轉換</title><style>/* 塊級：獨占一行；寬度默認是父級100%；加寬高生效 */div {width: 100px;height: 100px;/* display: inline-block; */display: inline;}.div1 {background-color: brown;}.div2 {background-color: orange;}/* 行內：一行共存多個；尺寸由內容撐開；加寬高不生效 */span {width: 200px;height: 200px;/* display: block; */display: inline-block;}.span1 {background-color: brown;}.span2 {background-color: orange;}/* 行內塊：一行共存多個；默認尺寸由內容撐開；加寬高生效 */img {width: 100px;height: 100px;display: block;}</style>
</head>
<body><!-- 塊元素 --><div class="div1">div 標簽1</div><div class="div2">div 標簽2</div><!-- 行內元素 --><span class="span1">span11111</span><span class="span2">span2</span><!-- 行內塊元素 --><img src="./images/cat.png" alt=""><img src="./images/cat.png" alt="">
</body>
</html>20、綜合案例1-熱詞
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>熱詞</title><style>/* 默認效果 */a {display: block;width: 200px;height: 80px;background-color: #3064bb;color: #fff;text-decoration: none;text-align: center;line-height: 80px;font-size: 18px;}/* 鼠標懸停的效果 */a:hover {background-color: #608dd9;}</style>
</head>
<body><a href="#">HTML</a><a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Vue</a><a href="#">React</a>
</body>
</html>21、綜合案例2-banner效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>banner效果</title><style>.banner {height: 500px;background-color: #f3f3f4;background-image: url(./images/bk.png);background-repeat: no-repeat;background-position: left bottom;/* 文字控制屬性，繼承給子級 */text-align: right;color: #333;}.banner h2 {font-size: 36px;font-weight: 400;line-height: 100px;}.banner p {font-size: 20px;}.banner a {width: 125px;height: 40px;background-color: #f06b1f;display: inline-block;text-align: center;line-height: 40px;color: #fff;text-decoration: none;font-size: 20px;}</style>
</head>
<body><div class="banner"><h2>讓創造產生價值</h2><p>我們希望小游戲平臺可以提供無限的可能性，讓每一個創作者都可以將他們的才華和創意傳遞給用戶。</p><a href="#">我要報名</a></div>
</body>
</html>
)
