參考文件

CSS手冊 - API參考文件 (apiref.com)

網頁分為三部分

1. 行為 js
2. 表現 css
3. 結構 htm

css:層疊樣式表

層疊：網頁是一個多層的結構，通過css可以分別給網頁每一個層設定樣式

 <!-- 
        使用css 來修改元素的樣式
        第一種方式：標籤裡使用style屬性(內聯樣式，行內樣式)
    -->
    <p style="color: red;font-size: 20px;">我愛吃魚香茄子</p>

在開發的時候，不推薦使用內聯樣式

內聯樣式

只能對一個標籤生效，如果要影響多個元素，增加程式碼冗餘量

 <p style="color: red;font-size: 20px;">我愛吃魚香茄子</p>

內部樣式表

• 編寫在head種的style標籤中
• 通過css的選擇器來選中元素來設定樣式
• 可以同時設施多個標籤的樣式，且修改的時候一鍵修改

只能對一個網頁作用，不能跨頁面使用

    <style>
        p{
         color: aqua;
         font-size: 50px;
        }
    </style>

外部樣式表

需要通過link標籤進行引入，只要想要使用這些樣式的網頁都可以使用

開發推薦使用

 <!-- 第三種方式：外部樣式表 -->
      <link rel="stylesheet" href="./css/01-css.css">

將樣式表寫到外部css檔案種，可以使用瀏覽器的快取機制，可以加快網站的載入速度

css語法

註釋

/*  */

語法：選擇器 宣告塊

選擇器

選擇頁面的指定元素。

宣告塊

• 通過宣告塊來指定給選擇的元素設定的樣式
• 由一個一個的宣告組成
• 宣告是一個鍵值對的結構
• 一個樣式名對應一個樣式值，鍵值之間：連結，以；結尾

 p{
    color: aqua;
    font-size: 50px;
    }

vscode快捷鍵：shift+alt+上下箭頭，快速複製

選擇器

元素選擇器

• 根據標籤名選中指定的元素
• 語法:標籤名{}

例子：p{} h1{} div{}

id選擇器

    #yxqz{
            color: cadetblue;
        }

通過id值來選

這裡的id已經重複，但是沒有報錯，但是實際操作的時候是不能這樣使用的

class選擇器

是標籤的一個屬性，和id不同的是可以重複使用

統配選擇器

*

頁面中的所有元素

交集選擇器

選中同時符合多個條件的元素

交集選擇器如果有元素選擇器，必須使用元素選擇器開頭

語法：選擇器1選擇器2。。。。{}

   div.red{
            font-size: 50px;
        }

並集選擇器

同時選擇多個選擇器對應的元素

語法：選擇器1，選擇器2，選擇器3{}

關係選擇器

關係：父子，祖先，後代，兄弟

父子

• 直接包含子元素的元素叫做父元素
• 父子之間是一個參考物，通俗來說就是一個層級的關係

祖先

直接或間接包含了後代的元素，一個元素的父元素也是它的祖先元素

後代

直接或間接被組先元素包含的元素，子元素也是後代元素

兄弟

同個級別的元素（有相同的父元素）

子元素選擇器

選中指定父元素中的子元素

語法：父元素>子元素

只選中div是父元素中的span

div>span {}

後代元素選擇器

選中指定的元素內的後代元素

語法： 組先 後代

這裡選中所有的span後代

div span {}

兄弟選擇器

選擇下一個兄弟

語法:前一個+ 後一個

加入div和p是兄弟關係

div+p{}

選擇下邊所有的兄弟

語法：前一個 ~ 後一個

屬性選擇器

• [屬性名] 選擇含有指定屬性的元素
• [屬性名 = 屬性值] 選擇含有指定屬性名和屬性值的元素
• [屬性名 ^= 屬性值] 選擇屬性值以指定值開頭的元素
• [屬性名 $= 屬性值] 選擇屬性值以指定值結尾的元素
• [屬性名 *= 屬性值] 選擇屬性值中含有指定值的元素

偽類選擇器

偽類：不存在的類，特殊的類，用來描述元素的一個狀態，比如第一個元素，最後一個元素，被選中的元素等元素的操作狀態

• 一般情況下都是使用的冒號開頭
• 如果不是子元素，那麼就是參照當前的元素
• ：first-child 第一個子元素 （不區分型別）
• ：last-child 最後一個子元素（不區分型別）
• ：nth-child(n) 最後第N個元素 （不區分型別）

特殊值：

1. 當括號裡直接寫n的時候 n的範圍0-正無窮，從0開始
2. 2n 偶數位置
3. 2n+1 奇數位置

更多檢視文件

     li:first-child{
            color: red;
        }

:first-of-type 同類型 第一個子元素

：not() 否定偽類，將符合條件的元素從選擇器中去除（除了誰）

：houver 滑鼠移入的狀態

：active 滑鼠點選

a:link 沒有訪問過的連結

a:visited 訪問過的連結

link和visited這個兩個偽類是a標籤獨有的偽類

visited 由於隱私，只能修改顏色

偽元素選擇器

lorem快速生成一段文字

偽元素：表示頁面中特殊的，且不存在的元素（特殊的位置）

使用：：開頭，兩個冒號

：：Frist-leter表示第一個字母

        p::first-letter{
            font-size: 50px;
        }

::first-line 表示第一行

   p::first-line{
            background-color: rosybrown;
        }

::selection 表示選中的內容

   p::selection{
            background-color: salmon;
        }

：：before 元素的開始位置

：：after 元素的最後位置

before和after必須結合content屬性來使用

        p::before{
            content: yx;
        }
        p::after{
            content: qz;
        }

簡單的理解就是通過css來新增字首或者字尾，且滑鼠無法選

比如q標籤，就是使用了before和after

繼承

樣式的繼承

給一個元素設定繼承，同時應用到了後代元素上

    <p>我愛吃<span>魚香茄子</span></p>

   p{
            color: red;
        }

再p中和span中的字型都是紅色

繼承是發生在祖先和後代中的

繼承是為了方便開發的，可以將通用的樣式設定到共同的組先元素上，讓所有的元素都共享樣式

不是所有的樣式 都會被繼承，比如背景、佈局這些硬樣式

選擇器的權重

樣式衝突:不同的選擇器，選中相同的元素怒，且相同的樣式設定了不同的值

發生了衝突的時候，由選擇器的優先順序（權重）決定

1. 內聯樣式
2. id選擇器
3. 類和偽類選擇器
4. 元素選擇器

內聯>id>class>元素

交集選擇器 ：比較優先順序，需要將選擇器優先順序進行相加，最後的優先順序越高，則優先

分組選擇器：分開獨立計算

選擇器的累加，不會超過最大的數量級，例如類選擇器也不會超過id選擇器

如果優先順序計算後相同，按照從上到下執行的順序，執行最下面的樣式

統配選擇器：優先順序大於繼承的樣式

! important 提高該樣式的優先順序，超過內聯樣式

長度單位

畫素：不同螢幕的畫素大小的百分比是不同的。單位是px

百分比：相對於父元素的百分比

em：相對於元素的字型大小來計算 1em= 1 font-size 根據字型大小來改變

rem：相對於字型，em是相對於自己的字型，rem是相對於根元素（html）的字型大小來改變

顏色單位

RGB

1. red
2. green
3. blue

每一種顏色範圍i是0-255之間（0%-100%）

 background-color: rgb(255, 0, 0);

• 如果rgb都是0 則是全黑
• 如果都是255 則都是白色

RGBA

多了一個不透明度，四個引數，前三個就是RGB ，最後一個是不透明度

1. 1表示完全不透明
2. 0表示完全透明
3. .5或則和0.5表示半透明

background-color: rgba(0, 255, 255, .5);

十六進位制的是RGB值： #RGB

值是（00-ff）

如果顏色兩位兩位重複，比如#aabbcc可以簡寫#abc

background-color: #dddd;

HSL和HSLA

1. H（hue）：色相 （0-360）
2. S（saturation）：飽和度 （0%-100%）
3. L（lightness）：亮度 （0%-100%）