WEB前端之網頁設計⑤----最新最全詳解/CSS層疊樣式表

阿新 • • 發佈：2018-12-10

WEB前端之網頁設計⑤—-最新最全詳解/CSS層疊樣式表

簡介:CSS層疊樣式表可以簡化網頁的格式程式碼，外部樣式表還會被瀏覽器儲存在快取里加速了下載顯示的速度，也減少了需要上傳的程式碼數量，總而言是非常的實用。

一、程式碼塊：

  <!doctype html>
<html>
    <head>
        <title>CSS層疊樣式表</title>
        <style type="text/css">
        <!--這裡填樣式屬性-->
        </style> 

    </head>
<body>

</body>
</html>

註釋：層疊樣式表的樣式屬性是在title標籤下head標籤內用style標籤包裹起來的一種程式碼格式。其中樣式表分為外部樣式表和內部樣式表，詳情我會在下面的內容裡一一和大家介紹。 二、定義樣式之選擇器的使用：

①選擇器的分類： 1. class選擇器 2. id選擇器 3. HTML選擇器 4. 包含選擇器

1.class選擇器：

<h1 class="one">1.class選擇器又叫類選擇器，以"."這個符號開始</h1>

解釋：class選擇器在標籤內直接用class=”名字”命名，當在style標籤中要為所選內容定義樣式時以”.”+名字花括號開始，可以在花括號中學樣式屬性及屬性值一個屬性的結束用分號來隔開。如：

<style type="text/css">.one{屬性：屬性值； }</style>

2.id選擇器:

<h2 id="two">
2.id選擇器以#這個符號開始，id名稱必須以字母或下劃線開始，不能以字母開頭
</h2>

解釋：id選擇器在標籤內直接用id=”名字”命名，當在style標籤中要為所選內容定義樣式時以”.”+名字花括號開始，可以在花括號中學樣式屬性及屬性值一個屬性的結束用分號來隔開。如：<style type="text/css">#one{屬性：屬性值； }</style>

3.HTML選擇器：

<h3>
3.html選擇器就是元選擇器，就是把HTML標籤作為HTML選擇器出現。
</h3>

**解釋：**HTML選擇器就是直接使用HTML標籤的標籤名字進行屬性設定，一旦設定所有這個標籤包裹的內容都會具有這個屬性。如：<style type="text/css">h3{屬性：屬性值； }</style>

4.包含選擇器:

<style type="text/css">.h1 #h2 h3{屬性：屬性值； }</style>

解釋：包含選擇器就是左邊的選擇器一端包含兩個或多個用空格分隔的選擇器。

結語：上述所說的都是在網頁內定義的樣式屬性，又叫內部樣式表，當然HTML樣式表還有外部樣式表和內部樣式表，這些我在後面的寫作中也還會繼續跟新的。

版權宣告：非商用自由轉載-保持署名-註明出處 署名(TM): TopGradeModel

WEB前端之網頁設計⑤----最新最全詳解/CSS層疊樣式表