CSS入門之引用、選擇器、屬性（六分之三）

時間 2019-12-06

原文原文鏈接

CSS 入門教程六分之三篇

沒辦法，我直播教小夥伴CSS入門，屬性講完，準備說定位的時候，他們就喊停，hold不住了。。。因此先寫到六分之三，23333333

要點	解釋
引用	如何使用定義的CSS樣式方式
選擇器	指明被定義樣式的標籤
屬性	樣式定義時具體定義的內容
定位	如何將標籤放置到具體的位置（下篇）
盒模型	面試經典題（下篇）
顯示	如何顯示標籤與標籤佈局（下篇）

引用

內聯
開標籤或自閉合標籤的style屬性上寫明對應的CSS定義內容，即爲內聯方式引用，以下：css

<div style='color: red;'>普通內容</div>html

相關效果見：CodePen面試

內部標籤佈局

定義在head標籤下的style標籤內容，即爲內部標籤方式引用，以下：測試

<head>
    <style>
    #head-style {
        color: green;
    }
    </style>
</head>
<body>
    <div id='head-style'>
        普通內容
    </div>
</body>

相關效果見：CodePenflex

外部連接ui

定義在head標籤下的link標籤屬性，即爲外部連接方式引用，以下：code

<link rel='stylesheet' href='anypath/any.css'>htm

any.css內容以下：排序
```
#out-link {
    color: blue;
}
```
對應適用標籤以下：

<div id='out-link'>普通內容</div>

相關效果見：CodePen

以上爲三種引用方法，不包括JS

選擇器

id選擇器

惟一性，原則上通篇文件有且僅有一個id名稱，不可重複

任意標籤的id屬性，其屬性值即爲其惟一id，此id其餘標籤不可再用。

如：

<div id='first-id'>xxx</div>

CSS選擇器表達式以下：
```
#first-id {

}
```
表達式關鍵詞：#
class選擇器

任意標籤的class屬性，其屬性值即爲其class，此class與其餘標籤可共用，定義後全部同class標籤一塊兒生效。

如：

<div class='first-class'>xxx</div>

CSS選擇器表達式以下：
```
.first-class {

}
```
表達式關鍵詞： .
標籤選擇器

任意標籤的標籤名自己就是其選擇器，因爲標籤的可複用性，因此使用標籤選擇器即爲對全部同標籤生效。

CSS選擇器表達式以下：
```
div {

}
```
表達式關鍵詞：無
僞類

僞類不算是選擇器，可是由於獨特，這裏拎出來講一下

在選擇器選中的基礎上，對該標籤的某種特性時段定義相關CSS屬性，如hover（鼠標覆蓋過程當中），active（激活過程當中）等等。

CSS選擇器表達式以下：
```
div:hover {
    color: yellow;
}
```
相關效果見：CodePen

表達式關鍵詞：:特性

屬性

屬性即CSS樣式定製的具體樣式，好比定製寬高，分別爲width與height等。

相同的屬性在不一樣的定位於顯示中會有不一樣的表現，這裏暫不表述過多，此處將屬性大體分爲四類，以下：

可繼承屬性

普通標籤可能存在子標籤的狀況，所以在給一個普通標籤訂義可繼承屬性時候，若子標籤未定義覆蓋父級定義的屬性，則繼承父級屬性的值，如font標籤。

如存在以下代碼關係：
```
<div class='father'>
    我是父級標籤
    <div class='son'>
        我是子級標籤
        <div class='grandson'>
            我是孫子標籤
        </div>
    </div>
</div>
```
定義CSS以下：
```
.father {
    color: purple;
}
```
相關效果見：CodePen

不可繼承屬性

不可繼承性則比較好理解，就是隻對本身生效。
如存在以下代碼關係：

<div class='father'>
    我是父級標籤
    <div class='son'>
        我是子級標籤
        <div class='grandson'>
            我是孫子標籤
        </div>
    </div>
</div>

定義CSS以下：

.father1 {
    border: 1px solid red;
}

相關效果見：CodePen

與定位相關的屬性

定位下篇會說，這裏只提一下主要相關屬性：
- position（定位方式）
- top（距離上方距離）
- right（距離右邊距離）
- bottom（距離下方距離）
- left（距離左邊距離）
與顯示相關的屬性

顯示下篇會說，這裏只提一下主要相關屬性：
- display（顯示方式）
- width（寬度）
- height（高度）
- flex（彈性）
- 其餘flex相關

完整測試代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS快速入門</title>
  <style>
    #id {
      color: red;
    }

    #testH2 {
      color: red;
    }

    .testClass1 {
      color: red;
    }

    /* 僞類 */
    .vir1 {
      color: green;
    }

    .vir1:hover {
      color: yellow;
    }

    /* h2 {
      color: red;
    } */
  </style>
  <!-- ../ 上級目錄(../../../../)    ./當前目錄    /根目錄 -->
  <link rel="stylesheet" href="./index.css">
</head>

<body style='background: #eee'>
  <h2 class="vir1">選擇器(優先級排序)</h2>
    <ol>
      <li id='id'>id(標記)</li>
      <li class='class'>class(類)</li>
      <li class='vir'>:特性(僞類)</li>
      <li>標籤</li>
    </ol>

  <h2>屬性</h2>
  <pre>
    選擇器 {
      屬性A: 值A;
      屬性B: 值B;
    }
  </pre>

  <footer></footer>
</body>
</html>

感謝閱讀，若是對你有任何幫助，深感榮幸。

若有問題，請留言。

若是以爲文章不錯，還請關注一下，謝謝