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

ZweiZhao發表於2018-07-11
CSS

CSS 入門教程六分之三篇

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

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

引用

  1. 內聯

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

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

    相關效果見：CodePen

  2. 內部標籤

    定義在head標籤下的style標籤內容，即為內部標籤方式引用，如下：

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

    相關效果見：CodePen

  3. 外部連結

    定義在head標籤下的link標籤屬性，即為外部連結方式引用，如下：

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

    any.css內容如下：

    #out-link {
    color: blue;
}

    對應適用標籤如下：

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

    相關效果見：CodePen

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

選擇器

  1. id選擇器

    唯一性，原則上通篇檔案有且僅有一個id名稱，不可重複

    任意標籤的id屬性，其屬性值即為其唯一id，此id其他標籤不可再用。

    如：

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

    CSS選擇器表示式如下：

    #first-id {

}

    表示式關鍵詞：#

  2. class選擇器

    任意標籤的class屬性，其屬性值即為其class，此class與其他標籤可共用，定義後所有同class標籤一起生效。

    如：

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

    CSS選擇器表示式如下：

    .first-class {

}

    表示式關鍵詞： .

  3. 標籤選擇器

    任意標籤的標籤名本身就是其選擇器，由於標籤的可複用性，所以使用標籤選擇器即為對所有同標籤生效。

    CSS選擇器表示式如下：

    div {

}

    表示式關鍵詞：無

  4. 偽類

    偽類不算是選擇器，但是因為獨特，這裡拎出來說一下

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

    CSS選擇器表示式如下：

    div:hover {
    color: yellow;
}

    相關效果見：CodePen

    表示式關鍵詞：:特性

屬性

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

相同的屬性在不同的定位於顯示中會有不同的表現，這裡暫不表述過多，此處將屬性大致分為四類，如下：

  1. 可繼承屬性

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

    如存在如下程式碼關係：

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

    定義CSS如下：

    .father {
    color: purple;
}

    相關效果見：CodePen

  2. 不可繼承屬性

    不可繼承性則比較好理解，就是隻對自己生效。
    如存在如下程式碼關係：

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

    定義CSS如下：

    .father1 {
    border: 1px solid red;
}

    相關效果見：CodePen

  3. 與定位相關的屬性

    定位下篇會說，這裡只提一下主要相關屬性：

    • position（定位方式）
    • top（距離上方距離）
    • right（距離右邊距離）
    • bottom（距離下方距離）
    • left（距離左邊距離）

  4. 與顯示相關的屬性

    顯示下篇會說，這裡只提一下主要相關屬性：

    • 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>

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

如有問題，請留言。

如果覺得文章不錯，還請關注一下，謝謝

相關文章