HTML基礎3

一、div容器：其餘的標籤置於div標籤中時視爲總體一個塊，子標籤能夠繼承父級容器標籤的類屬性。

二、id 選擇器：能夠給每一個標籤賦予id屬性，在style中經過ID選擇器來設置元素樣式。

<style>
  #cat{
     font-size:14px;
     background-color:green;
  }
</style>
<a href=# id="cat">you are not alone</a>

三、css優先級覆蓋

在 <style> 部分中 class 聲明的順序卻很是重要，第二個聲明老是比第一個具備優先權。由於 .blue-text 是第二個聲明，它覆蓋了 .pink-text 屬性。以下例所示，標籤h1的內容最終顯示爲藍色。

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 class="pink-text blue-text">Hello World!</h1>

id 屬性老是具備更高的優先級 ，下例中h1標籤內容應顯示爲橘色。

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
  #orange-text{
    color:orange;
  }
</style>
<h1 class="pink-text blue-text" id="orange-text">Hello World!</h1>

in-line的樣式具備更高的優先級，下例中h1標籤內容應顯示爲白色。

<h1 style="color:white" id="orange-text" class="pink-text blue-text">Hello World!</h1>

!important 聲明的屬性將具備最高優先級，下例中h1標籤內容應顯示爲粉色。

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink !important;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

四、常見顏色

hex code 表示：

Hex code 遵循 red-green-blue（紅-綠-藍），或者叫 rgb 格式。hex code 中的前兩位表示顏色中紅色的數量，第三四位表明綠色的數量，第五六位表明藍色的數量。

因此要獲得絕對的純紅色，你只須要在第一和第二位使用 F （最大可能的數值），且在第3、第4、第五和第六位使用 0 （最小可能數值）。也可以使用三位簡寫，如#F00表示紅色，此時能夠表示的顏色數量僅爲4000左右。

黑色： #000000   白色：#FFFFFF   紅色：#FF0000  綠色：#00FF00  藍色：#0000FF  橙色：#FFA500

gray：#808080

RGB 表示：括號中三個數分別表示紅綠藍的的數值，取值範圍爲0~255。

        用法 ：  黑色   rgb(0, 0, 0);    白色   rgb (255,255,255);  橙色  rgb (255,165,0);