html引入外部css_CSS 三种基础选择器
本節我們來學習 CSS 中的選擇器，選擇器是 CSS 里面一個很重要的概念，HTML 中的所有標簽樣式，都是通過不同的 CSS 選擇器進行控制的。我們只需要通過選擇器，就可以對不同的 HTML 標簽進行選擇，并指定各種樣式聲明。
在 CSS 中三三種最基本的選擇器，分別是標簽選擇器、類選擇器（class）、ID選擇器。
我們知道在 HTML 頁面中引入 CSS 樣式最好的方法是引入外部樣式，也就是將 CSS 代碼單獨放置到一個 .css 文件內，然后再引入這個 CSS 文件。
標簽選擇器
我們知道一個 HTML 頁面是通過很多標簽組成的，CSS 標簽選擇器就是用來聲明這些標簽的，因為每一個 HTML 標簽的名稱都可以作為相應的標簽選擇器的名稱。
示例：
例如我們來看一個例子，下面是一段 HTML 代碼：
<!DOCTYPE> <html><head><meta charset="utf-8"><title>CSS學習(9xkd.com)</title><link rel="stylesheet" type="text/css" href="index.css"></head><body><h3>俠課島</h3><p>你好，俠課島！</p></body> </html>如果我們要為這兩個標簽定義 CSS 樣式，就可以直接在 .css 文件內通過標簽選擇器來聲明樣式：
h3{color: red ; } p{color: green; }記得在 HTML 中通過 <link> 標簽來引入 CSS 文件，此時在瀏覽器中的演示效果如下所示：
從上述代碼中，我們看到，CSS 語法就是由選擇器和聲明塊 {} 組成，每個聲明塊中可以包含一個或多個樣式聲明，并且每條聲明后面以分號 ; 結尾。
當然除了上述例子中的 p 、h3 標簽可以作為標簽選擇器，其他的例如 html、body、a、img 等所有標簽都是可以作為標簽選擇器的。
但是我們在使用標簽選擇器的時候會有一個問題，舉個例子，我們先來看下面這段代碼：
<!DOCTYPE> <html><head><meta charset="utf-8"><title>CSS學習(9xkd.com)</title><link rel="stylesheet" type="text/css" href="index.css"></head><body><h3>動物園里有什么？</h3><p>小白兔</p><p>小獅子</p><p>小老虎</p><p>小猴子</p></body> </html>在瀏覽器中的演示效果：
如果我們想要將上述代碼中 “小兔子” 字體樣式設置為粉色加粗，其他內容不變，要怎么做？ 如果使用標簽選擇器 p 來設置樣式，那上述代碼中四個 <p> 標簽中的內容樣式都會跟著改變呀，所以這時候用標簽選擇器顯然不合適。
要解決這個問題，我們就需要用到 CSS 中的類選擇器和 ID 選擇器啦。
類選擇器
類選擇器用于描述一組標簽的樣式，一個類選擇器可以在多個標簽上使用。
語法：
.class_name{屬性：屬性值; }類選擇器前面必須有一個點 .，這個點必不可少，是類選擇器的標志。類選擇器的名稱 class_name 是自定義的，選擇器中的屬性和屬性值跟標簽選擇器中一樣。
示例：
例如上述代碼中，我們要給“小兔子” 字體樣式設置為粉色加粗，可以自定義一個類選擇器：
.rabbit{color: pink;font-weight: bold; }然后在 HTML 標簽上通過 class 屬性來使用定義好的類樣式，格式為：
<標簽名 class="類名稱">標簽內容</標簽名>如下所示：
<p class="rabbit">小白兔</p>在使用類樣式的時候，只需要類樣式名，不需要在前面加點。在瀏覽器中演示效果如下：
類選擇器有一個好處就是，我們可以在同一個頁面中多個 HTML 標簽上，使用同一個類選擇器。
示例：
例如我們除了可以在 <p> 標簽上使用類選擇器 rabbit，也可以在 <h3> 標簽上使用：
<body><h3 class="rabbit">動物園里有什么？</h3><p class="rabbit">小白兔</p><p>小獅子</p><p>小老虎</p><p>小猴子</p> </body>在瀏覽器中演示效果：
ID選擇器
ID選擇器和類選擇器的使用基本差不多，但是還有一些不同的地方：
- ID 選擇器的是以井號 # 開頭來定義的。而類選擇器是以點 . 來定義的。
- ID 選擇器在 HTML 中是可以通過 id 屬性來使用。而類選擇器是通過 class 屬性來使用的。
- 同一個頁面中一個ID選擇器只能在中出現一次，是唯一的。而類選擇器可以在多次出現，所以ID選擇器的針對性更強。
示例：
通過 # 來定義一個ID選擇器，設置背景顏色為粉色的樣式：
#only{background-color: pink; }然后在 HTML 中通過 id 屬性使用這個ID選擇器：
<!DOCTYPE> <html><head><meta charset="utf-8"><title>CSS學習(9xkd.com)</title><link rel="stylesheet" type="text/css" href="index.css"></head><body><h3 class="rabbit">動物園里有什么？</h3><p class="rabbit">小白兔</p><p>小獅子</p><p>小老虎</p><p id="only">小猴子</p></body> </html>在瀏覽器中演示效果：
我們可以在 HTML 標簽中通過 id 屬性來使用 CSS 中對應的 ID 選擇器。在使用時，ID選擇器名稱前面不需要帶井號#。
總結
當我們想要在 HTML 元素中設置 CSS 樣式時，可以通過選擇器來實現，最常用的是三種基礎選擇器。當標簽選擇器不能滿足我們的需求時，我們就可以使用類選擇器和ID選擇器。
記住在同一個頁面中，不允許有相同的 id 出現，但是允許有相同的 class。
總結
以上是生活随笔為你收集整理的html引入外部css_CSS 三种基础选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： go interface转int_32.
- 下一篇： iframe嵌入页面白屏_Vue使用if