【CSS】CSS簡介，CSS基礎選擇器詳解

P_M_P發表於2024-03-02
CSS

 

目錄

css簡介

css語法規範

css程式碼風格：

css選擇器的作用

css基礎選擇器

標籤選擇器

類選擇器

類選擇器---多類名

id選擇器

id選擇器和類選擇器的區別：

萬用字元選擇器

總結

 

 ⭐css簡介

CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡稱,也稱之為 CSS 樣式表或級聯樣式表。
CSS 也是一種標記語言
CSS 主要用於設定 HTML 頁面中的文字內容（字型、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局和外觀顯示樣式。
CSS 讓我們的網頁更加豐富多彩，佈局更加靈活自如。簡單理解：CSS 可以美化 HTML , 讓 HTML 更漂亮， 讓頁面佈局更簡單。
CSS 最大價值: 由 HTML 專注去做結構呈現，樣式交給 CSS，即 結構 ( HTML ) 與樣式( CSS ) 相分離

 

 ⭐css語法規範

  1. 使用 HTML 時，需要遵從一定的規範，CSS 也是如此。要想熟練地使用 CSS 對網頁進行修飾，首先需要了解CSS 樣式規則。
  2. CSS 規則由兩個主要的部分構成：選擇器以及一條或多條宣告。

  1.  選擇器是用於指定 CSS 樣式的 HTML 標籤，花括號內是對該物件設定的具體樣式
  2. 屬性和屬性值以“鍵值對”的形式出現
  3. 屬性是對指定的物件設定的樣式屬性，例如字型大小、文字顏色等
  4. 屬性和屬性值之間用英文 “:” 分開
  5. 多個“鍵值對”之間用英文 “;” 進行區分

  例如： 所有的樣式，都包含在 <style> 標籤內，表示是樣式表。<style> 一般寫到 </head> 上方

 <head>
        <style>

            h4 {

                color: blue;

                font-size: 100px;

            }

        </style>
</head>

 ⭐css程式碼風格：

 1. 樣式格式書寫
    ①緊湊格式   

  h3 { color: deeppink;font-size: 20px;}

 ②展開格式   

   h3 {
        color: pink;
        font-size: 20px;    
     }

強烈推薦第二種格式， 因為更直觀。
2. 樣式大小寫風格
   ①小寫格式 

   h3 {
            color: pink;
        }

   ②大寫格式
         

H3 {
            COLOR: PINK;   
        }

強烈推薦樣式選擇器，屬性名，屬性值關鍵字全部使用小寫字母，特殊情況除外。
3. 樣式空格風格

    h3 {
        color: pink;    
    }
  1. 屬性值前面，冒號後面，保留一個空格
  2. 選擇器（標籤）和大括號中間保留空格

 ⭐css選擇器的作用

選擇器(選擇符)就是根據不同需求把不同的標籤選出來這就是選擇器的作用。  簡單來說，就是選擇標籤用的。

  1. 找到所有的 h1 標籤。
  2. 設定這些標籤的樣式，比如顏色為紅色。  

 ⭐css基礎選擇器

選擇器分為基礎選擇器和復合選擇器兩個大類，我們這裡先講解一下基礎選擇器。

  • 基礎選擇器是由單個選擇器組成的
  • 基礎選擇器又包括：標籤選擇器、類選擇器、、id選擇器和萬用字元選擇器

⚡標籤選擇器

標籤選擇器（元素選擇器）是指用 HTML 標籤名稱作為選擇器，按標籤名稱分類，為頁面中某一類標籤指定統一的 CSS 樣式。

語法：


    標籤選擇器{

        屬性：屬性值

        ...

    }

 

作用： 標籤選擇器（元素選擇器）是指用 HTML 標籤名稱作為選擇器，按標籤名稱分類，為頁面中某一類標籤指定統一的 CSS 樣式。  

優點：能快速為頁面中同型別的標籤統一設定樣式

缺點：不能設計差異化樣式，只能選擇全部的當前標籤

 ⭐類選擇器

如果想要差異化選擇不同的標籤，單獨選一個或者某幾個標籤，可以使用類選擇器.

語法：

.類名 {

        屬性1: 屬性值1;  

        ...

    }

結構需要用class屬性來呼叫 class 類的意思

<div class="類名"> 變紅色 </div>  

 

注意： 

  1. 類選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個點“.”號顯示。
  2. 類選擇器使用“.”（英文點號）進行標識，後面緊跟類名（自定義，我們自己命名的）。
  3. 可以理解為給這個標籤起了一個名字，來表示。
  4. 長名稱或片語可以使用中橫線來為選擇器命名。
  5. 不要使用純數字、中文等命名，儘量使用英文字母來表示。
  6. 命名要有意義，儘量使別人一眼就知道這個類名的目的。 

⚡類選擇器---多類名

我們可以給一個標籤指定多個類名，從而達到更多的選擇目的。 這些類名都可以選出這個標籤.
簡單理解就是一個標籤有多個名字. 

多類名的使用 ：

 <div class="red font20">多類名</div>

注意：

  1. 在標籤class 屬性中寫 多個類名
  2. 多個類名中間必須用空格分開
  3. 這個標籤就可以分別具有這些類名的樣式  

多類名開發中使用場景

  1. 可以把一些標籤元素相同的樣式(共同的部分)放到一個類裡面.
  2. 這些標籤都可以呼叫這個公共的類然後再呼叫自己獨有的類
  3. 從而節省CSS程式碼,統一修改非常方便

 ⭐id選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML 元素以 id 屬性來設定 id 選擇器，CSS 中 id 選擇器以“#" 來定義。

語法：
 

   #id名 {
        屬性1: 屬性值1;  
        ...
    } 

 
注意：id 屬性只能在每個 HTML 文件中出現一次。

⚡id選擇器和類選擇器的區別：

  1. 類選擇器（class）好比人的名字，一個人可以有多個名字（外號），同時一個名字也可以被多個人使用。
  2. id 選擇器好比人的身份證號碼，全中國是唯一的，不得重複。
  3. id 選擇器和類選擇器最大的不同在於使用次數上，id屬性只能出現一次，而類可以有多次。
  4. 類選擇器在修改樣式中用的最多，id 選擇器一般用於頁面唯一性的元素上，經常和 JavaScript 搭配使用。 

 ⭐萬用字元選擇器

在 CSS 中，萬用字元選擇器使用 "*"  定義，它表示選取頁面中所有元素（標籤）。

語法：

 * {
        屬性1: 屬性值1;  
        ...
    }
  • 萬用字元選擇器不需要呼叫， 自動就給所有的元素使用樣式
  • 特殊情況才使用，如，清除所有的元素標籤的內外邊距 
 * {
        margin: 0;
        padding: 0;
    }

 ⭐總結

 

____________________

⭐感謝你的閱讀，希望本文能夠對你有所幫助。如果你喜歡我的內容，記得點贊關注收藏我的部落格，我會繼續分享更多的內容。⭐

相關文章