:::

6. 套用CSS

一、CSS樣式設定的基本結構

  1. 基本概念:挑出網頁中的元素,套上指定樣式。
  2. 一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」,若有多個,請用「;」隔開。
  3. CSS樣式屬性以及可用的值可從這裡查詢:

二、在HTML標籤中套用CSS

  1. 在HTML標籤中套用CSS得靠style屬性,如:<p style="color:red;"></p>
  2. 這叫「行內樣式」,優先權最高,影響範圍最小(只限標籤內)。
  3. 其挑選器為該標籤。
  4. 適合用在單一樣式上。

三、在單一網頁中套用相同CSS樣式

  1. 在單一網頁中套用CSS必須使用<style type="text/css"></style>標籤,盡可能放在<head></head>裡面,例如:
    <head>
    <style type="text/css">
    p {color:red;}
    #line {color: sienna;margin:20px auto;}
    .bg {background-image: url("images/back40.gif");}
    </style>
    </head>
  2. 這叫「內嵌樣式」或「內部樣式」,優先權中等,影響範圍為一整頁內。
  3. 上述的p、#line、.bg都是挑選器
  4. 若一篇網頁中,有多個地方要套用相同樣式,可用頁內樣式。

四、許多頁面套用相同CSS樣式

  1. 要讓多個頁面套用相同樣式,就必須把樣式表獨立出來,做成一個CSS檔,如:style.css,其內容如下:
    p {color:red;}
    #line {color: sienna;margin:20px auto;}
    .bg {background-image: url("images/back40.gif");}
  2. 要套用該樣式表的網頁需利用<link>標籤來呼叫引用。
    <link rel="stylesheet" type="text/css" href="style .css" />
  3. 這叫「連結樣式」或「外部樣式」,優先權最低,影響範圍最大。
  4. 適合用在多頁用共用同一樣式。

五、三種挑選器

  1. 標籤挑選器:即一般網頁標籤。如:p、img、table...等,只要是該標籤都會受影響。
    • (1) 樣式表:p {color:red;}
    • (2) 網頁:<p></p>
  2. ID挑選器:樣式表以「#名稱」宣告,網頁則需使用id屬性,如:
    • (1) 樣式表:#line {color: sienna;margin:20px auto;}
    • (2) 網頁:<hr id="line">
  3. 類別挑選器:樣式表以「.名稱」宣告,網頁則需使用class屬性,如:
    • (1) 樣式表:.bg {background-image: url("images/back40.gif");}
    • (2) 網頁:<div class="bg">

 


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

16人線上 (4人在瀏覽線上書籍)

會員: 0

訪客: 16

更多…