:::

3-2-1-8 關於CSS的基本概念

一、CSS基本概念:挑出網頁中的元素,套上指定樣式。

  1. 一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」,如:「h1 {color: blue}
  2. 若有多個宣告,請用「;」隔開。
  3. CSS樣式屬性: http://www.w3big.com/zh-TW/cssref/css-reference.html
  4. 套用樣式的三種方法:
      行內樣式 內部樣式 外部樣式
    影響範圍 最小 單一頁中 許多頁
    優先權 1 2 3
    用法 <標籤 style="CSS宣告;"></標籤> <style type="text/css"> CSS宣告; </style> <link href="CSS檔.css" rel="stylesheet">
  5. 一個頁面可以同時套用好幾個css檔或設定,若裡面有挑選器重複的,則以最後讀到的為主。

二、CSS最基本三種挑選器

  1. 標籤挑選器:即一般網頁標籤。如:bodyh1markp...等,只要是該標籤都會受影響。
    1. 網頁:<p></p>
    2. 樣式表:p {CSS屬性: ;}
  2. ID挑選器:樣式表以「#名稱」宣告,網頁則需使用id屬性,如:
    1. 網頁:<div id="web_title"></div>
    2. 樣式表:#web_title{CSS屬性: ;}
  3. 類別挑選器:樣式表以「.名稱」宣告,網頁則需使用class屬性(最常用!),如:
    1. 網頁:<div class="bg-my-blue"></div>
    2. 樣式表:.bg-my-blue{CSS屬性: ;}

三、CSS3長度單位

  1. http://www.w3big.com/zh-TW/cssref/css-units.html
  2. 數字與單位之間不能出現空格
  3. 常用的相對單位:em(相對父元素)、rem(相對根元素CSS3才有)、%
  4. 常用的絕對單位:px(像素)、pt(點)cm(公分)、mm(公釐)
  5. 預設情況下,根元素的字型大小1em=16px =12pt

四、CSS3的顏色碼

  1. http://www.w3big.com/zh-TW/cssref/css-colors.html
  2. 顏色名稱:redtransparent(透明)
  3. RGB十六進位(00~FF):#FF0000
  4. RGB十進位(0~255):rgb(255,0,0)
  5. RGBA十進位(含透明度設定,0完全透明~1不透明):rgba(255,0,0,0.5)

五、比較常用的組合挑選器

  1. 同時:div, p:同時套用到任何的<div>以及<p>
  2. 後代:div p:套用到<div>中的所有<p>
  3. 子層:div>p:僅套用到<div>裡面第一層的<p>
  4. 僅隔壁:div+p:僅套用到和<div>同一層並緊接著的<p>
  5. 隔壁任何一個div~p:套用到和<div>同一層的任一個<p>

 


:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1839

計數器

今天: 4225422542254225
昨天: 5069506950695069
總計: 5134673513467351346735134673513467351346735134673