CSS介紹、選擇器、屬性相關

认真的六六發表於2024-05-25
CSS

CSS層疊樣式表：就是給HTML標籤新增樣式的，讓其變得更加好看

【CSS的使用，以及三種引入方式】

 1 1.註釋
 2     /*單行註釋*/
 3 
 4     /*
 5     多行註釋
 6     多行註釋
 7     */
 8 
 9 2.用來劃定樣式區域
10     /*這是部落格園首頁的css樣式檔案*/
11     /*頂部導航樣式*/
12     ......
13     /*左側選單欄樣式*/
14     ...........
15     /*右側選單欄樣式*/
16 
17 
18 3.CSS的語法結構：
19     選擇器{
20     屬性1：值1；
21     屬性2：值2；
22     屬性3：值3；
23     }
24 
25 4.三種引入方式
26 
27 <!DOCTYPE html>
28 <html lang="en">
29 <head>
30     <meta charset="UTF-8">
31     <title>Title</title>
32     <meta name="viewport" content="width=device-width, initial-scale=1.0">
33     <style>
34         /*第一種，內部直接引用*/
35         h1 {
36             color: darkgoldenrod
37         }
38     </style>
39 
40     <!--    第二種：link標籤引入外部css檔案-->
41     <link rel="stylesheet" href="mycss.css">
42 
43 </head>
44 <body>
45 <h1>你好啊！熊大</h1>
46 <!--第三種：行內式-->
47 <h2 style="color: green">你好啊！毛毛</h2>
48 </body>
49 </html>
50

【CSS基本選擇器】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <style>
 8         /*!*id選擇器*!*/
 9         #d1 {
10             /*找到id是d1的標籤 將文字顏色設定為黃綠色*/
11             color: red;
12         }
13 
14         /*!*類選擇器*!*/
15         .c1 {
16             /*找到class是c1的標籤 將文字顏色設定為藍色*/
17             color: blue;
18         }
19 
20         /*!*標籤、元素選擇器*!*/
21         span {
22             /*找到所有的span標籤 將文字顏色設定為藍色*/
23             color: orange;
24         }
25 
26         /*通用選擇器*/
27         /*將所有的標籤都設定為綠色*/
28         * {
29             color: green
30         }
31     </style>
32 </head>
33 <body>
34 <div id="d1" class="c1 c2">div
35     <p>div裡面的p</p>
36     <span>div裡面的span</span>
37 </div>
38 <p id="d2" class="c1">ppp</p>
39 <span id="d3" class="c2">span111</span>
40 <span id="d4" class="c3">span222</span>
41 </body>
42 </html>

【組合選擇器】

後代選擇器

兒子選擇器

毗鄰選擇器

弟弟選擇器

<div>
    <p>div p</p>
    <p>
        <span>div p span</span>
    </p>
    <span>span</span>
    <span>span</span>
</div>

div裡面的p span 都是div的後代
p是div的兒子
p裡面的span 是p的兒子，是div的孫子
div是父親
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <style>
 8         /*!*後代選擇器*!*/
 9         /*!*將div內部的span標籤的顏色設定為紅色*!*/
10         div span {
11             color: red;
12         }
13 
14         /*!*兒子選擇器：將div的兒子span標籤的顏色設定為黃色*!*/
15         div > span {
16             color: yellow;
17         }
18 
19         /*!*毗鄰選擇器：同級別緊挨著的下面的第一個*!*/
20         div + span {
21             color: blue;
22         }
23 
24         /*弟弟選擇器：同級別下面的所有span*/
25         div ~ span {
26             color: green;
27         }
28 
29 
30     </style>
31 
32 
33 </head>
34 <body>
35 <span>span1</span>
36 <span>span2</span>
37 
38 <div>
39     <p>div p</p>
40     <p>
41         <span>div p span</span>
42     </p>
43     <span>span</span>
44     <span>span</span>
45 </div>
46 
47 <span>span</span>
48 <span>span</span>
49 </body>
50 </html>

【屬性選擇器】

屬性選擇器：屬性選擇器是以[]作為標誌的
    含有某個屬性
    含有某個屬性並且有某個值
    含有某個屬性並且有某個值的某個標籤
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <style>
 8         [username] {
 9             /*將所有屬性名字是username的標籤背景色改為紅色*/
10             background-color: red;
11         }
12 
13         [username="jason"] {
14             /*找到所有屬性名是username,屬性值是jason的標籤*/
15             background-color: orange;
16         }
17 
18         input[username='jason'] {
19             /*找到所有屬性名是username,屬性值是jason的input標籤*/
20             background-color: wheat;
21         }
22     </style>
23 </head>
24 <body>
25 
26 <input type="text" username>
27 <input type="text" username="jason">
28 <input type="text" username="egon">
29 <p username="tank">水箱老師</p>
30 <div username="egon">矮子老師</div>
31 <span username="jason">jason老師</span>
32 
33 </body>
34 </html>

【分組與巢狀】

（分組），

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <style>
 8         /*!*將三個標籤都變為紅色   ,表示並列關係*!*/
 9         div, p, span {
10             color: yellow;
11         }
12     </style>
13 </head>
14 
15 <body>
16 <div>div</div>
17 <p>p</p>
18 <span>span</span>
19 
20 </body>
21 </html>

（巢狀）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <style>
 8         /*多個選擇器之間可以混合使用*/
 9         #d1, .c1, span {
10             color: red;
11         }
12     </style>
13 </head>
14 <body>
15 <div id="d1">div</div>
16 <p class="c1">p</p>
17 <span>span</span>
18 
19 </body>
20 </html>

（混用）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <style>
 8         /*不同選擇器之間可以混用，只有id為d1下的類為c2下的id為3的顏色會變*/
 9         #d1 .c2 #d3 {
10             color: green;
11         }
12     </style>
13 </head>
14 <body>
15 <div id="d1">div
16     <p class="c2">div>p
17         <span id="d3">div>p>span1</span>
18         <span id="d4">div>p>span2</span>
19     </p>
20 </div>
21 <p class="c1">p</p>
22 <span>span</span>
23 
24 </body>
25 </html>

【偽類選擇器】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <style>
 8         a:link {
 9             /*滑鼠點選之前顏色*/
10             color: #2e6da4;
11         }
12 
13         a:hover {
14             /*滑鼠懸浮在上面顏色就變*/
15             color: #ff0000;
16         }
17 
18         a:active {
19             /*滑鼠點選的時候顏色就變*/
20             color: #00ff00;
21         }
22 
23         a:visited {
24             /*滑鼠點選之後顏色就變*/
25             color: #0000ff;
26         }
27 
28         p {
29             color: darkorange;
30             font-size: 80px;
31         }
32         p:hover{
33             color: white;
34         }
35 
36         input:focus {
37             /*獲取焦點事件*/
38             background-color: #7a77c8;
39         }
40 
41     </style>
42 </head>
43 <body>
44 <a href="https://www.cnblogs.com/liuliu1">熊二</a>
45 <p>點我有驚喜</p>
46 <input type="text">
47 </body>
48 </html>

【偽元素選擇器】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <style>
 8         p:first-letter {
 9             /*給文章的第一個字調樣式*/
10             font-size: 30px;
11             color: red;
12         }
13 
14         p:before {
15             /*在文字開頭，用CSS新增內容，但是滑鼠選不中*/
16             content: '你說的對';
17             color: blue;
18         }
19 
20 
21         p:after {
22             /* 在當前文字的最後面生效，不能被選中 */
23             content: '？';
24             color: yellow;
25         }
26 
27     </style>
28 </head>
29 <body>
30 <p>裝備差勁任何本都是血賺，裝備差勁任何本都是血賺</p>
31 </body>
32 </html>
33 
34 <!--PS:before和after偽元素通常都是用來清除浮動帶來的影響，父標籤塌陷的問題-->

【選擇器的優先順序】

id選擇器
類選擇器
標籤選擇器
行內樣式
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <link rel="stylesheet" href="mycss1.css">
 8     <style>
 9         /*選擇器不同，載入是從上往下，誰先定義，誰先載入*/
10         /*    行內樣式>id選擇器>類選擇器>標籤選擇器*/
11 
12         /*選擇器相同，書寫順序不同:載入是從上往下,但先就近原則：誰離標籤近就聽誰的*/
13         #d1 {
14             color: blue;
15         }
16 
17         .c1 {
18             color: beige;
19         }
20 
21         p {
22             color: red;
23         }
24     </style>
25 </head>
26 
27 <body>
28 <p>哎呦喂，你很不錯哦</p>
29 <p style="color: blue">你果然很識趣，有前途</p>
30 <p id="d1" class="c1">你果然很識趣，有前途</p>
31 
32 </body>
33 </html>

.

。

。

。

-------------------------------------------------------------------------------------------

屬性相關

【設定長寬】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <style>
 8         p {
 9             background-color: red;
10             height: 100px;
11             width: 100px;
12         }
13 
14         span {
15             background-color: blue;
16             height: 200px;
17             width: 200px;
18             /*行內標籤無法設定長寬，寫了也不會生效*/
19         }
20     </style>
21 </head>
22 <body>
23 <p>ppp</p>
24 <span>span</span>
25 </body>
26 </html>



相關文章