CSS是什麼

CSS，指的是“Cascading Style Sheet（層疊樣式表）”，是用來控制網頁外觀的一門技術。HTML、CSS、JavaScript構成了前端網頁的三個必要組成部分，其中HTML用於控制網頁結構，CSS用於控制網頁外觀，JavaScript用於實現網頁互動。

CSS的引入方式

CSS分為內部樣式表、外部樣式表和行內樣式表，不同的樣式表有不同的引入方式。

內部樣式表

內部樣式表一般採用再head標籤內部巢狀style標籤,然後在style標籤中定義css樣式。

head>
    meta charset="UTF-8">

    meta http-equiv="X-UA-Compatible" content="IE=edge">

    meta name="viewport" content="width=device-width, initial-scale=1.0">

    title>CSS基礎title>

    <!--  --&gt

    <!-- 內部樣式表 --&gt
    style type="text/css">
       h1{color: bisque;}
    style>
head>

body>
    h1 id="h1style">CSS基礎h1>
body>

外部樣式表
外部樣式表顧名思義就是將需要的CSS檔案建立到當前網頁檔案以外的某一個位置，然後再透過特定方式將CSS檔案引入到當前網頁檔案中，類似Java中的import過程。

1.首先需要建立CSS檔案，我們在當前網頁檔案的同級目錄下建立一個名為CSS基礎的CSS檔案，並且定義CSS樣式。

CSS基礎.CSS

h1{color:bisque;}

2.接下來引入CSS檔案，在html檔案中引入剛剛建立的CSS檔案。

head>
    meta charset="UTF-8">

    meta http-equiv="X-UA-Compatible" content="IE=edge">

    meta name="viewport" content="width=device-width, initial-scale=1.0">

    title>CSS基礎title>

    <!-- 外部樣式表 --&gt
    link rel="stylesheet" href="CSS基礎.css">
head>

body>
    h1 id="h1style">CSS基礎h1>
body>

行內樣式表
行內樣式表就是在需要修飾的html標籤中使用元素本身自帶的style屬性來定義一些CSS樣式，這種方式目前使用的並不多，其用法如下

head>

    meta charset="UTF-8">

    meta http-equiv="X-UA-Compatible" content="IE=edge">

    meta name="viewport" content="width=device-width, initial-scale=1.0">

    title>CSS基礎title>
head>

body>
    <!-- 行內樣式表 --&gt
    h1 id="h1style" style="color: bisque;">CSS基礎h1>
body>

剛才介紹的三種引入CSS的方式其實現的效果都是一樣的，只是使用頻率有所不同，從程式碼的可讀性和耦合性角度看使用外部匯入的方式更有利於程式碼的維護。

id和calss屬性

上面的示例中不管使用的那種方式引入CSS，在CSS內部都是使用的h1這個標籤然後在{}裡邊定義CSS樣式的，由此可見標籤本身可以作為選擇元素的一種方式，可以稱之為標籤選擇器。另外每個標籤的id和class屬性也可以用在CSS中用來選擇元素。

id屬性
id屬性就好比我們的身份證號，在整個html文件中是唯一的，原則上講一個html文件中不能同時存在兩個id相同的元素，因為如果我們使用這個id作為一個css選擇器，那麼css中定義的外觀效果將同時影響多個元素。比如下面一段程式碼

head>

    meta charset="UTF-8">

    meta http-equiv="X-UA-Compatible" content="IE=edge">

    meta name="viewport" content="width=device-width, initial-scale=1.0">

    title>CSS基礎title>

    <!-- 外部樣式表 --&gt

    link rel="stylesheet" href="CSS基礎.css">

head>

body>
    h1 id="h1style">CSS基礎h1>

    h2 id="h1style">CSS基礎h2>
body>

瀏覽器執行效果:

雖然瀏覽器可以正常解析並顯示，但是依然不建議將多個元素設定相同的id值。

class屬性
class屬性就好比我們身份證上的名字，身份證號是唯一的，但是兩個人卻可以重名的。

body>
    h1 class="h1style">CSS基礎h1>
    h2 class="h1style">CSS基礎h2>
body>

CSS選擇器

選擇器的概念

還是上面的示例程式碼，我們想要把h1標籤下的CSS基礎這幾個字顏色變成紅色，整個過程中第一步必然是要先找到h1這個標籤並且選中h1標籤。找到並且選中標籤的過程就是透過選擇器來實現的。CSS中定義了多種不同的選擇器，主要有:標籤選擇器、id選擇器、class選擇器、後代選擇器、群組選擇器等，不同選擇器的實現方式不同，但是其最終目的都是要達到改變外觀顯示的目的。

選擇器的基本格式

選擇器{
    屬性:值;
    ...
    屬性:值;
}

括號內部使用鍵值對錶示不同的樣式值，每個樣式值之間用;號分割

選擇器分類

CSS選擇器大致分為以下幾類:

標籤選擇器標籤名{}

偽標籤選擇器標籤名::before{}

類選擇器 .類名{}

屬性選擇器 [屬性名]{}

偽類選擇器類名:hover{}

ID選擇器 #id{}

組合選擇器

否定選擇器 :not(){}

通用選擇器 *{}

CSS選擇器不同選擇器的具體用法請看

CSS選擇器(一)