CSS筆記

Cloud_WK發表於2024-04-09
CSS筆記

CSS

引言

  • CSS的全稱為：層疊樣式表（Cascading Style Sheets）。
  • CSS也是一種標記語言，用於給HTML設定樣式，比如文字的大小、文字的顏色、元素寬高等.....

屬性方法參考

1、CSS的編寫位置

  • 行內樣式(內聯樣式)

    <h1 style="color:red;font-size:40px">.....</h1>

  • 內部樣式

    • 寫在html頁面內部，將所有的CSS程式碼提取出來，單獨放在<style>標籤中。
    <style>
    h1 {
        color:red;
        font-size:40px;
    }
</style>

  • 外部樣式（實際開發中最常用的引入方式）

    • 寫在單獨的CSS檔案之中，以.css結尾，將所有的CSS程式碼都放置在此檔案之中，並透過link標籤進行引用進來。

    • 1.新建一個以.css結尾的檔案，將所有的css樣式放置在檔案之中。

      h1 {
    color:red;
    font-size:40px
}

    • 2.在HTML檔案中引用.css檔案。

      <link rel="stylesheet" href="./xxx/ss.css">

2、樣式的優先順序

  • 優先順序規則：行內樣式 > 內部樣式 = 外部樣式

    內部樣式和外部樣式優先順序相同，後寫的樣式會覆蓋前面的樣式（“後來者居上”）。

3、CSS的基本選擇器

  • 通配選擇器（一般用於清除預設樣式）

    /* 選中所有元素 */
* {
    color:range;
    font-size:40px;
}

  • 元素選擇器（選中元素/標籤）

    /* 選中所有h1元素*/
h1 {
    color:range;
    font-size:40px;
}
/* 選中頁面的所有p元素 */
p {
    color:blue;
    font-size:50px;
}

  • 類選擇器（元素中class的值）

    /* 選中所有class的值為speak的元素 */
/* class的值可以有多個：class="test1 test2" */
.speak {
    color:red;
}
/* 選中所有class的值為answer的元素 */
.answer {
    color:blue;
}

  • ID選擇器（元素中id的值）

    /* 選中id值為earthy的元素 */
#earthy {
    color:red;
    font-size:60px;
}

    注意：id屬性值：不要用數字開頭命名，不要包含空格，區分大小寫，頁面中id值是唯一的。

4、CSS的複合選擇器

  • 交集選擇器（選中符合多個條件的元素）

    /* 選中：類名為beauty的p元素，為此種寫法用的非常多！ */
p.beauty {
    color:blue;
}
/* 選中：類名包含rich和beauty的元素 */
.rich.beauty {
    color:green;
}

  • 並集選擇器（選中多個選擇器對應的元素，透過逗號隔開）

    /* 選中id為peiqi，或類名為rich，或類名為beauty的元素 */
#peiqi,.rich,.beauty {
font-size: 40px;
background-color: skyblue;
width: 200px;
}

  • 後代選擇器（選中指定元素中，符合要求的後代元素不管，巢狀幾層）

    /* 選中ul中的所有li */
ul li {
	color: red;
}
/* 選中ul中所有li中的a */
ul li a {
	color: orange;
}
/* 選中類名為subject元素中的所有li */
.subject li {
	color: blue;
}
/* 選中類名為subject元素中的所有類名為front-end的li */
.subject li.front-end {
	color: blue;
}

  • 子代選擇器（先寫父，再寫子，父親的巢狀下一層）

    /* div中的子代a元素 */
div>a {
	color: red;
}
/* 類名為persons的元素中的子代a元素 */
.persons>a{
	color: red;
}

  • 兄弟選擇器

    • 相鄰兄弟選擇器（選中指定元素符合條件的相鄰兄弟元素）

      /* 選中div後相鄰的兄弟p元素 */
div+p {
	color:red;
}

    • 通用兄弟選擇器（選中指定元素的所有兄弟元素）

      /* 選中div後的所有的兄弟p元素 */
div~p {
	color:red;
}

  • 屬性選擇器（選中屬性值符合一定要求的元素）

    /* 選中具有title屬性的元素 */
div[title]{color:red;}

/* 選中title屬性值為atguigu的元素 */
div[title="atguigu"]{color:red;}

/* 選中title屬性值以a開頭的元素 */
div[title^="a"]{color:red;}

/* 選中title屬性值以u結尾的元素 */
div[title$="u"]{color:red;}

/* 選中title屬性值包含g的元素 */
div[title*="g"]{color:red;}

5、偽類選擇器（常用的）

  • 作用：選中特殊狀態的元素
  • 常用的偽類選擇器：
    • 動態偽類：
      1. :link超連結未被訪問的狀態。
      2. :visited超連結訪問過的狀態。
      3. :hover滑鼠懸停在元素上的狀態。
      4. :active元素啟用的狀態。
    • 結構偽類：
      1. :first-child所有兄弟元素的第一個。
      2. :last-child所有兄弟元素的最後一個。
      3. :nth-child(n)所有兄弟元素的第n個。
      4. :first-of-type所有同型別兄弟元素中的第一個。
      5. :last-of-type所有同型別兄弟元素中的最後一個。
      6. :nth-of-type(n)所有同型別兄弟元素中的 第n個。

6、偽元素選擇器（常用的）

  • 作用：選中元素的一些特殊位置。
  • 常用的偽元素選擇器：
    1. ::first-letter選中元素的第一個文字。
    2. ::first-line選中元素的第一行文字。
    3. ::selection選中被滑鼠選中的內容。
    4. ::placeholder選中輸入框的提示文字。
    5. ::before在元素最開始的位置，建立一個子元素（必須用 content 屬性指定內容）。
    6. ::after在元素最後的位置，擦黃健一個子元素（必須用content屬性指定內容）

注意：行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器 > 通配選擇器。

7、CSS的三大特性

  1. 層疊性

    • 概念：如果發生了樣式衝突，那就會根據一定的規則（選擇器優先順序），進行樣式的層疊（覆

      蓋）。

      什麼是樣式衝突？ —— 元素的同一個樣式名，被設定了不同的值，這就是衝突

  2. 繼承性

    • 概念：元素會自動擁有其父元素、或其祖先元素上所設定的某些樣式。

    • 規則：優先繼承離得近的。

    • 常見的可繼承屬性：

      text-?? ， font-?? ， line-?? 、 color ......

  3. 優先順序

    • 簡單來看：!important > 行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器 > 通配選擇器 > 繼承的樣式。

    • 嚴格來看：需要計算權重。

相關文章