??CSS必備知識詳解??

第一部分：CSS的基本使用
- （1）CSS是什么？
- （2）CSS寫在哪里？
- （3）CSS的三大引入方式：
- - 1.直接寫在標簽內（直接在標簽內設定）
  - - 小知識點：
  - 2.寫在style標簽內（在< head > 標簽內加入< style >標簽進行設定）
  - 3.使用外部.css檔案設定css文本，如1.css
  - - 第一種：用@import "1.css"將css檔案引入；
    - 第二種：通過< link >將css檔案引入，
    - - 小知識點：
  - 總結—上述三種引入方式的異同：
第二部分：選擇器
- 1.標簽選擇器：
- - - 注意：
- 2.類選擇器（class選擇器）
- - - 小tip：
- 3.id選擇器
- - - 小tip：
- 4.群組選擇器
- 5.全選擇器
- 6.層次選擇器（分為后代，子代，相鄰和兄弟四種選擇器）
- - （1）后代選擇器
  - （2）子代選擇器（可以往里一層一層的選）
  - （3）兄弟選擇器
  - （4）相鄰選擇器（相鄰兄弟選擇器）
- 7.屬性選擇器
- 選擇器的一個使用總結：
- 8.偽類選擇器
第三部分：常用的字體的樣式
第四部分：文本的常用樣式
第五部分：背景的常用樣式
小拓展：使用CSS實作漸變色：
- （1）漸變色之線性漸變
- （2）漸變色之徑向漸變
- （3）拓展一個文本漸變色的實作：
In The End！

???????👇
👉🚔直接跳到末尾🚔👈 ——>領取專屬粉絲福利💖
?????????

?👻上兩篇博文保姆級教程HTML兩萬字筆記大總結【建議收藏】（上篇）和保姆級教程HTML兩萬字筆記大總結【建議收藏】（下篇）被眾多小伙伴們閱讀之后，很多小伙伴私信我——催我出CSS和JavaScript的版本~👻

?😬（苦笑）既然小伙伴們學習熱情那么強烈，那我怎么著也不能辜負了你們！所以本博主又連夜苦肝，苦苦熬制出了CSS版本的（篇幅過長，依舊分為上下兩篇：上篇是基礎，下篇是進階~）😬

?😜在這兩篇博文中，本博主就帶領小伙伴們認真地學習一下CSS（Cascading Style Sheets，翻譯：層疊（級聯）樣式表）相關的必備知識——如果說我們上兩篇講的HTML是網頁的結構，那么CSS就是網頁化妝師，😜

請添加圖片描述

重點來啦！重點來啦！！💗💗💗 小伙伴們，快拿出你們的筆記本，開始上課啦！（要打起十足的精神哦~）

第一部分：CSS的基本使用

（1）CSS是什么？

CSS全稱Cascading Style Sheets，翻譯：層疊（級聯）樣式表，
如果說HTML是網頁的結構，那么CSS就是網頁化妝師，

（2）CSS寫在哪里？

CSS有三種寫法：

直接寫在標簽內
寫在style標簽內
使用外部.css檔案

（對應CSS的三種寫法，就有三種引入CSS的方式，見下：）

（3）CSS的三大引入方式：

1.直接寫在標簽內（直接在標簽內設定）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式1</title>
</head>
<body>

<!--第一種引入方式：行內樣式-->
<!--注意：只能寫在開始標簽或者自閉合標簽里，不能寫在結束標簽里哦-->
<!-- 直接給標簽添加style屬性，style的屬性值里書寫樣式——樣式與樣式之間用分號隔開；樣式的名稱與樣式值用冒號隔開！ -->
<!-- 注意：嵌套標簽設定了最外層的樣式，其內所有標簽都會應用此樣式！ -->
<p style="color:red;font-size:30px;">我是段落標簽</p>

<!-- 優勢：直觀，很容易區分是給哪個標簽添加的樣式 -->
<!-- 劣勢：代碼冗余，樣式過多的話，代碼的可讀性很差-->
<!-- 一般用于測驗，不用于實際開發頁面中  -->

</body>
</html>

小知識點：

在設定屬性color屬性時，如下圖操作，可以對顏色進行更加直觀詳細的選擇：
在這里插入圖片描述

2.寫在style標簽內（在< head > 標簽內加入< style >標簽進行設定）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式2</title>
        <!--第二種引入方式：內部樣式-->
        <!-- 優勢：實作了標簽和樣式的分離，讓代碼的可讀性更高 -->
    <style>
        p{
            color: #c481ff
        }
    </style>

</head>
<body>

<p>我是段落標簽</p>

</body>
</html>

3.使用外部.css檔案設定css文本，如1.css

第一種：用@import "1.css"將css檔案引入；

第二種：通過< link >將css檔案引入，

本處用的1.css檔案內容：
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式3</title>

    <!--第一種：鏈接式(建議使用)-->
    <!--rel屬性（relation）是當前這個HTML頁面與鏈接進來的樣式表之間的關系，在此鏈接進來的是本頁面的樣式表
        href屬性寫樣式表的路徑-->
    <link rel="stylesheet" href="1.css">

    <!--第二種：匯入式(不建議使用)-->
    <style>
        @import "1.css";
    </style>

</head>
<body>

<!--第三種引入方式：外部樣式（有兩種）-->
<!--小提示：新建.css檔案的方法，在pycharm中是新建Stylesheet檔案-->
<!-- 優勢:實作了html檔案和樣式的分離，讓代碼的可讀性更高，而且讓代碼的復用性也更高！ -->
<p>我是段落標簽2</p>

</body>
</html>

小知識點：

@import匯入式不推薦使用，因為存在缺陷：在整個網頁裝載完之后再裝載.CSS檔案，如果網頁檔案過大時，會導致先出現無樣式的頁面，閃爍以后再出現樣式網頁，
而推薦使用< link >，因為它是先裝載.css檔案，再裝載網頁

總結—上述三種引入方式的異同：

在實際開發中我們不使用行內樣式！
使用最多的是外部樣式，

一般寫demo的時候使用內部樣式————因為給別人發demo的時候，只發一個檔案即可，  


無論是外部樣式，內部樣式還是行內樣式，都會生效，它們共同為標簽添加樣式，

如果一個標簽通過外部樣式，內部樣式設定了同一類樣式（值不同），會產生覆寫效果————覆寫的原則：后寫的樣式覆寫先寫的樣式！

第二部分：選擇器

（1）選擇器權重：

現實生活中—誰的權利大，就聽誰的，同理，選擇器權重也是一樣，誰的權重值高，應用誰的，這里的權重高低通過精確度評判，精確度越高，權重越大，

（2）選擇器的用處：

用于準確的選中元素（就是HTML種講的標簽），并賦予樣式，

1.標簽選擇器：

作用：根據標簽的名字找到標簽；

注意：它會找到所有的同名標簽，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標簽選擇器</title>
    
    <style>
        /*標簽選擇器，直接把頁面中的標簽當做一個選擇器進行選擇*/
        p{
            color: chartreuse;

        }
    </style>
    
</head>
<body>

<p>我是段落標簽1</p>
<p>我是段落標簽2</p>

</body>
</html>

注意：

你可以理解為下圖這個整體叫做選擇器！！！
在這里插入圖片描述

2.類選擇器（class選擇器）

通過標簽的class屬性，選擇對應的元素，借助了一個類的概念，一處定義，可以多處使用，

使用場景：它的作用對多個標簽（往往需要相同的樣式）設定樣式，

一個標簽可以設定多個class值，值與值之間用空格隔開，這個標簽會具有所有class包含的樣式，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>類選擇器</title>

    <style>
        /*類選擇器，也稱class選擇器，通過.進行選擇*/
        .p1{
            color:red;
        }
    </style>

</head>
<body>

<p class="p1">我是段落標簽</p>

</body>
</html>

小tip：

類選擇器可以選擇多個，因為class屬性不唯一；
但是id選擇器只能選擇一個，因為id是唯一的，

3.id選擇器

通過標簽的id屬性，選擇對應的元素，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id選擇器</title>

    <style>
         /*第三種選擇器：id選擇器  通過#進行選擇*/
        #p2{
            color:cadetblue;
        }
    </style>

</head>
<body>

<p id="p2">我是段落標簽</p>

</body>
</html>

小tip：

以上三個選擇器的權重： id選擇器 > 類選擇器 >標簽選擇器

拓展：如果一個標簽同時通過id選擇器和類選擇器設定了同一個樣式，而我們想要其類選擇器設定的樣式（background-color）生效，但是看上面選擇器權重——類選擇器的權重是低于id選擇器的，應該是id選擇器設定的樣式生效，但是我們可以通過在指定樣式后添加!import來使其生效！！！

!important是權重最大的！！！
注意：!important只能作用于單個樣式的值，它不是選擇器！
在這里插入圖片描述

4.群組選擇器

群組選擇器是可以同時選擇多個標簽的選擇器，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群組選擇器</title>

    <style>
        /*第四種選擇器：群組選擇器  不同選擇器之間用逗號隔開，*/
        p,span{
            color: #ff82c1;
        }
    </style>

</head>
<body>

<p>我是段落標簽</p>
<span>我是文本標簽</span>
<h1>我是一級標簽</h1>

</body>
</html>

5.全選擇器

顧名思義，選擇所有標簽！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全選擇器</title>

    <style>
        /*第五種選擇器：全選擇器 通過*選擇此頁面的所有元素，進行統一的樣式設定*/
        *{
            color: #a3ff50
        }
    </style>

</head>
<body>

<p>我是段落標簽</p>
<h1>我是一級標題</h1>
<h2>我是二級標簽</h2>
<span>我是文本標簽</span>

</body>
</html>

6.層次選擇器（分為后代，子代，相鄰和兄弟四種選擇器）

注意：塊狀標簽可以嵌套行內標簽和其他塊狀標簽；行內標簽只能嵌套文本和其他行內標簽,但不能嵌套塊狀標簽，
有個特例：p標簽和h標簽不能嵌套塊狀標簽，也不能嵌套本身，只能嵌套行內標簽！！！

（1）后代選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>

    <style>
        /*層次選擇器第一種：后代選擇器  用空格隔開*/
        /*后代是它里面嵌套的所有標簽*/
        /*此例就是div標簽里的所有的ol標簽，不管ol里嵌套多少ol，都是div的后代*/
        div ol{
            list-style: none;
        }
    </style>
    
</head>
<body>

<div>
    <ol>
        <li>我是有序串列1</li>
        <li>我是有序串列2</li>
        <li>我是有序串列3
            <ol>
                <li>我是有序串列111</li>
                <li>我是有序串列222</li>
            </ol>
        </li>
    </ol>
</div>

</body>
</html>

（2）子代選擇器（可以往里一層一層的選）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代選擇器</title>

    <style>
        /*層次選擇器第二種：子代選擇器 用>隔開*/
        /*子代選擇器只能選擇他的兒子，在此就是選擇id為ul1的無序串列的兒子*/
        /* 上述語法格式中的選擇器可以是id選擇器，class選擇器也可以是標簽名選擇器 */
        #ul1>li{
            list-style: none;       /*這個屬性作用是去除串列的樣式，代表去掉無序串列前面的小圓圈*/
        }
    </style>

</head>
<body>

<!--子代選擇器  顏色，字體等等在子代選擇器里會繼承，所以此處用list-style屬性進行觀察-->
<ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    </li>
</ul>

</body>
</html>

（3）兄弟選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟選擇器</title>

    <style>
        /*層次選擇器第三種：兄弟選擇器  用~進行選擇*/
        /*只要是有同一個父親的就稱為兄弟*/
        /*在本例中，id為p2的父親是body，所以body里都是他的兄弟
        又因為代碼是從上向下執行的，所以不會選中  我是段落標簽1*/
        #p2~p{
            color:#ff8971
        }
    </style>

</head>
<body>

<p>我是段落標簽1</p>
<p id="p2">我是段落標簽2</p>
<p>我是段落標簽3</p>
<p>我是段落標簽4</p>

</body>
</html>

（4）相鄰選擇器（相鄰兄弟選擇器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相鄰兄弟選擇器</title>

    <style>
        /*層次選擇器第四種：相鄰選擇器（相鄰兄弟選擇器）  用+進行選擇*/
        /*先是找兄弟，然后選擇其中相鄰的*/
        /*在本例中，因為代碼是從上向下執行的，所以不會選中  我是段落標簽1*/
        #p2+p{
            color:#ff8971
        }
    </style>

</head>
<body>

<p>我是段落標簽1</p>
<p id="p2">我是段落標簽2</p>
<p>我是段落標簽3</p>
<p>我是段落標簽4</p>

</body>
</html>

7.屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器</title>

    <style>
        /*屬性選擇器  選中所有p標簽里有name屬性的   常用于Input里
           如果只想選中   我是段落標簽1  ，那么就改為p[name="p1"]即可*/
        p[name]{
            color: red;
        }
    </style>

</head>
<body>

<p name="p1">我是段落標簽1</p>
<p name="p2">我是段落標簽2</p>
<p name="p3">我是段落標簽3</p>
<p>我是段落標簽4</p>

</body>
</html>

選擇器的一個使用總結：

權重大小比較總結一句話：越具體（就是一開始說的準確度）權重越大；越模糊權重越小！
在這里插入圖片描述

8.偽類選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>偽類選擇器</title>
    
    <!--偽類選擇器-->
    <!-- 語法格式——  選擇器：偽類名 -->
    <!-- 如果要給一個元素加4個偽類，一定要遵守一個順序（link  visited  hover   active） -->
    <style>
        /*未訪問超鏈接時的樣式    有超鏈接地址時（僅適用于a標簽）*/
        a:link{
            color: #ff25ec;
        }
        /*滑鼠懸浮時的樣式     適用于所有標簽*/
        a:hover{
            color: #3b29ff;
        }
        /*激活狀態時，即點擊的時候    適用于所有標簽*/
        a:active{
            color: #ff9d47;

        }
        /* 訪問過后，點擊完超鏈接之后 （僅適用于a標簽）*/
        a:visited{
            color:green;
        }
    </style>
    
</head>
<body>

<!--#表示空鏈接-->
<a href="#">我是超鏈接</a>

</body>
</html>

第三部分：常用的字體的樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字體的常用樣式</title>
    <style>
        p{
            /*字體的型別（例如：黑體，宋體，仿宋...）*/
            font-family: 黑體;
            
            /*字體的大小（默認字號是16px）*/
            font-size: 30px;
            
            /*字體的樣式（斜體italic  或者   正常normal）*/
            font-style: italic;
            
            /*字體的粗細（默認粗細是normal——400）    bold是粗體*/
            font-weight: bold;
            
            /*字體的小大寫  把英文小寫字母變為大寫字母  大小不變*/
            font-variant: small-caps;
            
            /*字體的復合樣式，要注意順序,其實就是上面樣式的一個總寫
            順序為：style variant weight size/height family  可以少寫！*/
            font:italic small-caps normal 50px 黑體;
        }
    </style>
</head>
<body>

<p>我是段落標簽</p>
<p>HELLO</p>
<p>hello</p>


</body>
</html>

第四部分：文本的常用樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本常用樣式</title>
    <style>
        p{
            /*用于設定標簽內的文本的對齊方式————left（左對齊，默認）；center（居中對齊）;right（右對齊）*/
            text-align: left;
			
			/* 用于設定標簽內單行文本的高度*/
			line-height:40px;			

            /*首行縮進  em是一個中文字距  也可以用px單位   1em=16px*/
            text-indent:2em;

            /*文本線   underline是下劃線；  line-through稱為洗掉線  overline（上劃線）  none為去除文本線*/
            text-decoration: underline;

            /*字與字之間的距離*/
            letter-spacing: 1em;

            /*詞距  在底下p標簽里寫文本，空格隔開就是一個單詞*/
            word-spacing:50px;

            /*行高     可以撐起高度*/
            /*撐起高度就是可以通過設定行高把元素的高度撐到行高那么高*/
            /*有個應用：單行文本垂直居中（在垂直方向居中）：高度=行高*/
            line-height: 50px;		
			
			/* 用于設定換行模式————normal（默認，滿了一行后正常換行）；nowrap（不換行）*/
			white-space: normal;
			
			/* 用于設定內容超出標簽的處理辦法————hidden（超出部分隱藏）;*/
			overflow: hidden;
			
			/* 用于設定文本溢位標簽時，文本要做什么事情————ellipsis（用于設定顯示省略號） */
			text-overflow: ellipsis; 
        }

        a{
            /*用于設定文本的裝飾模式————underline（下劃線）；line-through（中劃線）;overline（上劃線）*/
            /* 可以通過設定為none去除超鏈接下的下劃線！ */
            text-decoration: none;
        }

    </style>
</head>
<body>

<!--注意：如果是行內標簽，比如span是行內標簽，始終都是居中狀態，改對齊方式沒用，
因為行內元素設定寬高無效，只與內容有關，-->

<p>我是一個段落標簽</p>
<p>中國 上海 河南</p>
<a href="">111</a>

</body>
</html>

行高的應用之實作單行文本垂直居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行高的一個應用</title>
    <style>
        p{
            /*通過讓行高=高度，實作單行文本的垂直居中*/
            height: 200px;  /*高度*/
            line-height: 200px;  /*行高*/
        }
    </style>
</head>
<body>

<p>我是段落標簽</p>

</body>
</html>

（本人運營微信公眾號：孤寒者）（歡迎喜歡Python，喜歡編程的小伙伴們的關注哦~）

第五部分：背景的常用樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景的常用樣式</title>
    <style>
        div{
            /*設定div的寬高*/
            /* 行元素無法設定寬高；塊元素或者行級塊元素可以設定寬高，如果不設定寬高，那么使用默認寬度——和父標簽的寬度一樣；如果不設定高度，那么使用默認高度是由內容撐起！  */
            width:300px;
            height:300px;

            /*設定背景顏色*/
            /* 背景顏色的寫法：1.代表顏色的英文單詞（例如：red,yellow...）；
            				2.#加6位16進制數（6位中前兩位是紅，中間兩位是綠，后兩位是藍，紅綠藍的取值范圍是00~FF/ff）————開發中最常用的寫法；
            				3.rgb（紅，綠，藍）函式獲取一個顏色————一般用于JS代碼；
            				4.rgba（紅，綠，藍，不透明度）函式獲取一個顏色————一般用于JS代碼  */
            background-color: #a3ff50;

            /*背景圖片 url寫圖片的路徑*/
            background-image: url("");

            /*設定背景的大小  也可使用百分比，是參照它的容器*/
            background-size:100px 100px;

            /*背景平鋪  不平鋪 平鋪意思：如果背景圖很小，那么就可以在這個div上放多個，不平鋪就是只放一個*/
            background-repeat: no-repeat;

            /*背景定位  可以使用百分比定位（兩個百分比資料，第一個是相對于左，第二個是相對于上）*/
            background-position: center;

            /*復合樣式 也要按照順序（中間空格隔開，如果不想定位而設定大小，將定位的那個屬性值寫為0）
            屬性的順序是：background-color bacfground-image background-repeat background-position/background-size */
            background:red url("")  ;

        }
    </style>
</head>
<body>

<div>

</div>

</body>
</html>

小拓展：使用CSS實作漸變色：

在之前講解Canvas的文章中我們還通過canvas實作了各種漸變，可以看看哦~
《為了讓師妹20分鐘學會canvas，我熬夜苦肝本文外加一個小專案【??建議收藏??】》

（1）漸變色之線性漸變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>漸變色之線性漸變</title>
    <style>
        #div1{
            width:300px;
            height: 300px;
            /*linear-gradient()函式用于實作線性漸變*/
            /*注意：顏色的漸變實作是靠漸變的影像實作的，在函式里可以放多個顏色實作漸變*/
            /*漸變的效果默認是從上往下漸變填入的顏色
            to right,to left,to top,to buttom right(從左上往右下漸變)
            也可以以一定角度進行漸變，格式為：度數deg,比如：90deg */
            background-image: linear-gradient(to left,skyblue,pink);
        }
    </style>
</head>
<body>

<div id="div1" class="div2">

</div>

</body>
</html>

（本人運營微信公眾號：孤寒者）（歡迎喜歡Python，喜歡編程的小伙伴們的關注哦~）

（2）漸變色之徑向漸變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>漸變色之徑向漸變</title>
    <style>
        #div1{
            width: 200px;
            height: 300px;
            /*radial-gradient()函式用于實作徑向漸變*/
            /*注意：顏色的漸變實作都是靠漸變的影像實作的*/
            /*默認是從最中心向外發散進行漸變（ellipse是橢圓形狀的漸變）
                						circle(形狀變為圓)*/
            background-image: radial-gradient(ellipse,skyblue,pink,white);

        }
    </style>
</head>
<body>

<div id="div1">

</div>

</body>
</html>

（3）拓展一個文本漸變色的實作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>漸變色之文字漸變</title>
    <style>
        span{
            /*給背景設定漸變色*/
            /*默認文字的顏色漸變是從上往下漸變的
                改漸變的方向的話在顏色前面加，比如：to right*/
            background-image: linear-gradient(to right,blue,black);
            /*規定這個背景漸變色繪制的區域 在此設定為文本那個區域*/
            -webkit-background-clip: text;
            /*把原本的文字設定為透明的*/
            color: transparent;
        }
    </style>
</head>
<body>

<!--文字本身是不能設定漸變的，我們是通過設定背景的漸變來實作文字的漸變的-->
<span>我是漸變的文字，我超級帥！</span>

</body>
</html>

In The End！

在這里插入圖片描述

從現在做起，堅持下去，一天進步一小點，不久的將來，你會感謝曾經努力的你！

?本博主會持續更新爬蟲基礎分欄及爬蟲實戰分欄（為了小伙伴們更好的進行頁面決議，也會更新部分前端必備知識點博文！），認真仔細看完本文的小伙伴們，可以點贊收藏并評論出你們的讀后感，并可關注本博主，在今后的日子里閱讀更多爬蟲文！

	如有錯誤或者言語不恰當的地方可在評論區指出，謝謝！
	如轉載此文請聯系我說明用以意并標注出處及本博主名，謝謝！

👇🏻可通過點擊下面——>關注本人運營 公眾號👇🏻

【可以公眾號里私聊并標明來自CSDN，會拉你進入技術交流群（群內涉及各個領域大佬級人物，任何問題都可討論~）--->互相學習&&共同進步（非誠勿擾）】

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/323061.html

標籤：其他

上一篇：性能優化系列：每個程式員都應該知道的數字

下一篇：堆疊和佇列C語言實作附加力扣題

保姆級教程CSS兩萬字筆記大總結【建議收藏】（上篇）

??CSS必備知識詳解??

第一部分：CSS的基本使用

（1）CSS是什么？

（2）CSS寫在哪里？

（3）CSS的三大引入方式：

1.直接寫在標簽內（直接在標簽內設定）

小知識點：

2.寫在style標簽內（在< head > 標簽內加入< style >標簽進行設定）

3.使用外部.css檔案設定css文本，如1.css

第一種：用@import "1.css"將css檔案引入；

第二種：通過< link >將css檔案引入，

小知識點：

總結—上述三種引入方式的異同：

第二部分：選擇器

1.標簽選擇器：

注意：

2.類選擇器（class選擇器）

小tip：

3.id選擇器

小tip：

4.群組選擇器

5.全選擇器

6.層次選擇器（分為后代，子代，相鄰和兄弟四種選擇器）

（1）后代選擇器

（2）子代選擇器（可以往里一層一層的選）

（3）兄弟選擇器

（4）相鄰選擇器（相鄰兄弟選擇器）

7.屬性選擇器

選擇器的一個使用總結：

8.偽類選擇器

第三部分：常用的字體的樣式

第四部分：文本的常用樣式

第五部分：背景的常用樣式

小拓展：使用CSS實作漸變色：

（1）漸變色之線性漸變

（2）漸變色之徑向漸變

（3）拓展一個文本漸變色的實作：

In The End！