2019年8月25日 星期日

網頁技術速學筆記 (二) : CSS 基礎

HTML5 將網頁技術做了清楚的分工, 即 HTML 專注於內容; Javascript 負責行為或動作; 而網頁外觀樣式則交由 CSS 控制呈現方式, 三者透過 link 元素(或 style 屬性) 以及 script 元素耦合, 如下圖所示 :




因為 HTML5 取消了大部分 HTML4 裡面原本負責樣式的標籤, 將外觀呈現全部交給效果更豐富的 CSS 來完成, 因此要讓網頁看起來美觀, 具有視覺傳達效益, 必須對 CSS 有基礎運用能力.

本系列之前的筆記參考 :

# 申請免費 PHP 虛擬主機 000a.biz 與 000webhost.com
# 網頁技術速學筆記 (一) : HTML 基礎


一. 加入 CSS 樣式表的四個方法 : 

在網頁中套用樣式的四種方法如下表 :


 加入 CSS 的四種方法 說明
 1. 在網頁元素的 style 屬性內 (inline 行內) <p style="color:blue; font-wight:bold;"></p>
 2. 在網頁標頭的 <style></style> 內嵌入 <style>
    p {color:blue; font-wight:bold;}
 </style>
 3. 在網頁標頭內以 <link> 連結外部 CSS 檔 <link ref="stylesheet" href="hello.css">
 4. 在網頁標頭的 <style></style> 內
     以 @import url() 匯入外部 CSS 檔		 <style>
    @import url("hello.css")
 </style>


前兩種用法為套用內部樣式, 後兩種為套用外部樣式. 其中第一種行內 (inline) 樣式最優先, 因為它是最後才套用, 其他三種方法則依其載入順序而定, 最後載入的會蓋掉先載入的樣式. 注意, link 元素為空元素 (沒有結束標籤), 只能放在 head 標頭內, 但可以出現一次以上, 它還有一個屬性 type="text/css", 但可以省略.


範例 1 :  行內 (inline) 樣式   

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
  <p style="color:blue; font-wight:bold;">Hello World</p>
  <p style="font-size:x-large;font-style:italic;">Hello World</p>
  <p style="font-family:微軟正黑體;">Hello World</p>
</body>
</html>


同樣效果改用標頭內的 style 嵌入如下 (使用樣式類別) :


範例 2 :  網頁標頭內用 style 元素嵌入樣式

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
   .p1 {color:blue; font-wight:bold;}
   .p2 {font-size:x-large;font-style:italic;}
   .p3 {font-family:微軟正黑體;}
  </style>
</head>
<body>
  <p class="p1">Hello World</p>
  <p class="p2">Hello World</p>
  <p class="p3">Hello World</p>
</body>
</html>


範例 3 :  在網頁標頭內用 link 元素連結外部樣式檔

先編輯一個純文字檔 p.css 以 utf-8 編碼存放在 css 子目錄下 :

.p1 {color:blue; font-wight:bold;}
.p2 {font-size:x-large;font-style:italic;}
.p3 {font-family:微軟正黑體;}

然後在 head 裡面用 link 連結此樣式檔 :

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="css/p.css">
</head>
<body>
  <p class="p1">Hello World</p>
  <p class="p2">Hello World</p>
  <p class="p3">Hello World</p>
</body>
</html>


範例 4 :  在網頁標頭的 style 內用 @import 匯入外部樣式檔

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    @import url("css/p.css")   
  </style>
</head>
<body>
  <p class="p1">Hello World</p>
  <p class="p2">Hello World</p>
  <p class="p3">Hello World</p>
</body>
</html>


二. CSS 的語法 : 

CSS 串接樣式表主要是透過選擇器挑選網頁中的元素, 套用指定之樣式.


1. 樣式結構 :

寫在 style 元素內以及外部 .css 樣式檔中的 CSS 樣式結構如下 :

選擇器 {
               屬性1: 值1;      /* 這是註解  */
               屬性2: 值2; 
               屬性3: 值3; 
               ....
              }   

選擇器用來指定樣式要套用的對象, 後面用大括弧 {} 包起來的是樣式內容, 每一個樣式以 "屬性:內容" 格式指定, 可同時指定多個樣式串接, 每一種樣式之間用分號隔開, 這也是 CSS 稱為串接式樣式表的原因.

注意, 屬性值若含有英數字, 小數點, 減號以外字元例如空白時必須加引號, 例如 :

p {font-family:"Times New Roman";}

放在 /* 與 */ 之間的文字會被當做註解不予解析, 但註解文字中不要含有 CSS 的屬性識別字, 例如 :

h1 {
      color:blue;           /* 大標題用藍色凸顯 */
      font-style: italic;
     }

如果是行內 (inline) 樣式, 則只要在 HTML 元素的 style 屬性中直接填入樣式內容即可 (不含大括號 {} 與註解), 例如 :

<h1 style="color:blue; font-style: italic;">Hello World</h1>

樣式內容 (包括屬性與值) 雖然都不分大小寫, 例如 Color: BLUE; 與 color: Blue; 均能被正確解析且呈現效果相同, 但習慣上樣式內容最好都用小寫. 但選擇器就不同了, 選擇器中與 Javascript 有關的 id 與 class 有分大小寫.


2. 常用樣式屬性 :

 CSS 最常用的樣式屬性如下表 :


 文字樣式屬性 說明
 font-family  字型 : 標楷體, 微軟正黑體, "New Time Roman" (逗號隔開依序套用)
 font-size  大小 : 可用 px, 百分比 %, 相對 (smaller/larger) 或絕對 (small/large) 
 font-style  風格 : normal (正常)/italic (斜體)/oblique (粗體) 
 font-weight  粗細 : 絕對 normal(=400)/bold(=700) 或相對 lighter/bolder
 font 設定字型/大小/顏色/風格/粗細等, 例如 font: 15px 標楷體 italic bold
 text-shadow  陰影格式: 顏色 右(正)左(負)長度 下(正)上(負)長度 範圍
 text-decoration 添加裝飾 : none/underline/overline/line-through (刪除線)
 text-transform 大小寫轉換 : none/lowercase/uppercase/capitalize
 vertical-align 垂直對齊 : baseline/super(上標)/sub(下標)/top/middle/bottom

 文字樣式屬性 說明
 font-family (字型) 標楷體, 微軟正黑體, "New Time Roman" (逗號隔開依序套用)
 font-size (大小) 可用 px, 百分比 %, 相對 (smaller/larger) 或絕對 (small/large) 大小
 font-style (風格) 有 normal (正常)/italic (斜體)/oblique (粗體) 三個值
 font-weight (粗細) 絕對 normal(=400)/bold(=700) 或相對 lighter/bolder
 font (綜合) 以空格隔開, 例如 font: 15px 標楷體 italic bold

 色彩樣式屬性 說明
 color 設定元素前景色彩, 可用色彩名稱如 red 或色碼如 #ff00ee
 background-color 設定元素背景色彩, 可用色彩名稱如 red 或色碼如 #ff00ee
 border-color 設定元素邊框色彩, 可用色彩名稱如 red 或色碼如 #ff00ee
 opacity 設定元素透明度, 值範圍 0.0 (完全不透明) ~ 1.0 (完全透明, 預設)

 背景樣式屬性 說明
 background-color 設定元素背景色彩, 可用色彩名稱如 red 或色碼如 #ff00ee
 background-image 設定元素背景圖片, 可用 url() 設定, 例如 url("img/aaa.png")
 background-position 設定元素背景圖片位置, 可用 top/center/bottom/left/right
 background 設定元素背景顏色, 圖片, 位置等, 例如 background: red center

 尺寸樣式屬性 說明
 width 設定元素寬度, 可用 px, %, 或 auto (自動)
 height 設定元素高度, 可用 px, %, 或 auto (自動)
 min-width 設定元素最小寬度, 可用 px, %, 或 auto (自動)
 max-width 設定元素最大寬度, 可用 px, %, 或 auto (自動)
 min-height 設定元素最小高度, 可用 px, %, 或 auto (自動)
 max-height 設定元素最大高度, 可用 px, %, 或 auto (自動)

 邊界留白樣式屬性 說明
 margin 設定元素的上右下左邊界寬度, 可用px, %, 或 auto
 padding 設定元素內容的上右下左留白寬度, 可用px, %, 或 auto

 邊框樣式屬性 說明
 border-color 設定元素邊框色彩, 可用色彩名稱如 red 或色碼如 #ff00ee
 border-top 設定元素的上邊框, none/dotted/dashed/solid/double/groove/inset/outset
 border-right 設定元素的右邊框, none/dotted/dashed/solid/double/groove/inset/outset
 border-bottom 設定元素的下邊框, none/dotted/dashed/solid/double/groove/inset/outset
 border-left 設定元素的左邊框, none/dotted/dashed/solid/double/groove/inset/outset
 border-style  設定元素的四邊框, none/dotted/dashed/solid/double/groove/inset/outset
 border 設定元素的邊框框線, 顏色, 寬度樣式, 例如 border: dotted 5px blue


text-shadow 樣式至少需指定兩個數值, 第一個是向右的陰影距離 (負數表示向左), 第二個是向下的陰影距離 (負數表示向上), 第三個數值是陰影範圍 (可有可無). 顏色若不指定預設為黑色陰影.

注意, 樣式中用到外部資源, 例如 background-image 中用到外部圖片當背景, 都使用 url() 來指定資源所在之 URL, 可用本機相對位址例如 url("img/abc.jpg") 或網路位址例如 url("http://www.blabla.com/a.jpg").

更多樣式屬性參考 :

# https://www.w3schools.com/css/


3. 選擇器種類 :

選擇器可分為如下 7 類 :


 樣式選擇器 說明
 1. 類型選擇器  套用對象為 HTML 元素 (標籤選擇器), 例如 p, div, table 等 
 2. 後代選擇器 套用到符合指定之父子元素 (空格隔開) 關係的子元素上, 例如 div a 
 3. ID 選擇器  套用到指定該 id 屬性值之元素, 選擇器為 id 屬性值前加點號, 例如 .myID
 4. Class 選擇器 套用到所有該樣式類別之元素, 選擇器為 class 屬性值前加 # 號, 例如 #myClass
 5. 屬性選擇器 套用到具有指定屬性特徵之元素, 例如 [attr], [attr=val], [attr~=val], [attr|=val]
 6. 全域選擇器 套用到全部元素, 選擇器為星號 *
 7. 偽類選擇器 套用到具有指定父子節點關係的多個元素的最後一個元素, 以空格隔開


注意, 選擇器中的 id 與 class 一定要大小寫都符合才會套用, 但選擇器若是 HTML 標籤或屬性時則可不分大小寫, 這是因為 HTML 不分大小寫之故, 屬性名稱與值都不分大小寫. 參考 :

# 小细节:css中的的大小写区分

多個套用相同樣式的選擇器可用逗號合併, 例如 :

p {color: red;}
div {color: red;}

這兩行樣式可用逗號合併為一行 :

div, p {color: red;}

這表示 p 元素與 div 元素均套用相同樣式.

要注意後代選擇器 (descendant selector) 與合併選擇器的差別, 後代選擇器是以空格隔開父子元素, 而合併選擇器是用逗號隔開多個要共用同一樣式的選擇器.

類型選擇器 (type selector) 就是以 HTML 標籤當作選擇之對象, 因此網頁中所有這種標籤都會被套用此樣式, 例如 :


範例 5 :  類型選擇器測試

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
   p {color:red; font-wight:bold;}
   DIV {COLOR:green; FONT-wight:bold;}
   span {text-shadow:navy 3px 3px 3px;}
  </style>
</head>
<body>
  <p>Hello World</p>
  <div>Hello World</div>
  <span>Hello World</span>
</body>
</html>



此例中的樣式表定義了 p, div, 與 span 這三種元素的樣式, 可見它們各自套用到指定的元素類型上, 而且樣式內容不論屬性或值都不分大小寫.

下面的範例測試後代選擇器, 這是選擇 HTML DOM 樹階層結構中具有指定之父子關係的子元素, 注意, 它是套用到最後那一個子元素 :


範例 6 :  後代選擇器測試

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
   div p span{color:green; font-wight:bold;}
   div p {color:blue; font-style:italic;}
   p {color:red;}
  </style>
</head>
<body>
  <p>Hello World</p>
  <div><p>Hello World</p></div>
  <div><p><span>Hello World</span></p></div>
</body>
</html>



此例定義了三個樣式, 選擇器 div p span 只會套用在 span 元素的內容 Hello World 3; 而 div p 則會套用到 div 的子元素 p 的內容, 因此 Hello World 2 與 Hello World 3 都會套用, 兩個都是斜體字, 顏色部分會先套用 div p 的藍色, 然後馬上又被較嚴格的 div p spam 的綠色覆蓋掉. 總之, 後代較多的會最後套用.

ID 與 Class 選擇器是最常用的選擇器, 尤其是 Class 選擇器, 因為它會套用到有相同 class 屬性值的所有元素; 而 ID 則只能套用到唯一的元素, 因為網頁中的 ID 屬性值必須唯一.


範例 7 :  ID 選擇器測試

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
   #p1 {color:green; font-weight:bold;}
   #p2 {color:blue; font-style:italic;}
   #p3 {color:red; font-size:24px;}
  </style>
</head>
<body>
  <p id="p1">Hello World 1</p>
  <p id="p2">Hello World 2</p>
  <p id="p3">Hello World 3</p>
  <p id="P3">Hello World 3</p>
</body>
</html>



此例樣式表定義了 #p1, #p2, #p3 三個 ID 樣式 (注意, ID 樣式的選擇器是在 id 屬性值前面加上 #), 它們會分別套用到網頁元素中 id 屬性值分別是 p1, p2,p3 的元素. 可見第四個 p 元素因為 id 屬性為大寫的 "P3", 因此不會套用 #p3 的樣式.

類別選擇器是在元素的 class 屬性值前面加個點號, 它會套用到全部具有該樣式類別之元素上, 其使用頻率最廣, 許多前端框架大量使用類別來控制網頁之呈現方式.


範例 8 :  Class 選擇器測試

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
   .header {background:violet;}
   .odd {background:lightgray;}
   .even {background:orange;}
  </style>
</head>
<body>
  <table>
    <tr class="header">
      <th>代號</th>
      <th>公司</th>
      <th>股價</th>
      <th>現金股利</th>
    </tr>
    <tr class="even">
      <td>2330</td>
      <td>台積電</td>
      <td>254</td>
      <td>2.5</td>
    </tr>
    <tr class="odd">
      <td>2412</td>
      <td>中華電</td>
      <td>107.5</td>
      <td>4.48</td>
    </tr>
    <tr class="even">
      <td>2308</td>
      <td>台達電</td>
      <td>148.5</td>
      <td>5</td>
    </tr>
    <tr class="odd">
      <td>1301</td>
      <td>台塑</td>
      <td>93.4</td>
      <td>5.08</td>
    </tr>
  </table>
</body>
</html>




此例定義了三個樣式 header, odd, 與 even, 分別給表格的標題, 奇數列, 偶數列套上底色樣式. 關於顏色名稱參考 :

參考 :

# https://www.w3schools.com/html/html_colors.asp
# https://www.w3schools.com/colors/colors_names.asp
# 常用 CSS 屬性列表


屬性選擇器挑選含有指定屬性之元素作為套用樣式之對象, 選擇器形式為將屬性名稱與屬性值篩選條件放入中括號內, 常用的屬性值篩選條件如下 :


 屬性選擇器 說明
 [attr] 套用到具有 attr 屬性之元素
 [attr="val"] 套用到具有 attr 屬性且其值為 val 之元素
 [attr~="val"] 套用到具有 attr 屬性且其值含有 val 之元素
 [attr|="val"] 套用到具有 attr 屬性且其值含有 val- 之元素
 [attr^="val"] 套用到具有 attr 屬性且其值以 val 開頭之元素
 [attr$="val"] 套用到具有 attr 屬性且其值以 val 結尾之元素


其中 [attr|="val"] 常用在全域屬性 lang, 例如中文有 zh-Hans (簡體中文), zh-Hant (繁體中文), 篩選條件 [lang|="zh"] 就會套用到所有具有 lang 屬性且值為中文語言的元素上. [attr^="val"] 則可用來篩選網址中的 URL 協定 (以 http 開頭) 等, 例如 [href^="http://"]; 而 [attr$="val"] 則常用在篩選副檔名, 例如 [href$=".jpg"].


範例 9 :  屬性選擇器測試

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
   [class] {color:blue;}
   [class="p2"] {font-weight:bold;}
   [lang|="zh"] {font-style:italic;}
   [href^="html"] {background:yellow;}
   [src$=".jpg"] {border: inset 5px violet}
  </style>
</head>
<body>
  <p class="p1">Hello World 1</p>
  <p class="p2">Hello World 2</p>
  <p lang="zh-Hant">Hello World 3</p>
  <p><a href="html_test_hello_world.htm" target="_blank">開啟 Hello World</a><p>
  <img src="img/20190510-cat.jpg"  width="400" height="225"  alt="Missing">
</body>
</html>




 此例定義了五個屬性選擇器, 第一個 [class] 會套用於所有包含 class 屬性之元素, 因此前兩個 p 元素文字顏色都是藍色. 第二個 [class="p2"] 只套用於 class 屬性值為 p2 者, 因此只有第二個 p 元素變粗體. 第三個 [lang|="zh"] 只套用於 class 屬性值為 "zh-" 開頭者, 因此只有第三個 p 元素變斜體. 第四個 [href^="html"] 只套用於 href 屬性值以 "html" 開頭者, 因此只有超連結 a 元素背景色變黃色. 第五個 [src$=".jpg"] 只套用於 src 屬性值以 ".jpg" 結尾者, 因此只有圖片 img 元素套用邊框樣式.

最後來測試偽類選擇器, 偽類選擇器 (pseudo-class selector) 用來選擇具有特定狀態或資訊之元素, 而這無法透過 DOM 樹來選擇, 例如滑鼠滑過 (hover) 之元素等, 最常用在控制超連結或表單元件因狀態而變之外觀, 常用的偽類選擇器如下表 :


 偽類選擇器 說明
 :link 套用尚未瀏覽過之超連結
 :visited 套用已瀏覽過之超連結
 :hover 套用游標在其上方之元素
 :focus 套用取得焦點之元素
 :active 套用所點選之元素
 :enabled 套用表單中可用之元件
 :disabled 套用表單中不可用之元件
 :checked 套用表單中被選取之 radio 或 checkbox 元件
 :not() 套用非指定之選擇器的元素
 :valid() 套用表單中已驗證成功之欄位
 :required 套用表單中之必填欄位


偽類選擇器前面可加上元素名稱限定, 例如 a:link 或 input:checked 等.

更多偽類選擇器參考 :

# https://developer.mozilla.org/zh-TW/docs/Web/CSS/Pseudo-classes
# Day24：小事之 CSS 偽類 與 偽元素
# CSS 虛擬 (偽) 類別選擇器 (Selector) 教學範例


範例 10 :  偽類選擇器測試

<!DOCTYPE html>
<html>
<head>
  <title>CSS 測試</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    a:link {color:blue;}
    a:visited {color:violet;}
    a:hover {background-color:yellow;}
    div.hello:hover {background:violet;}
    :checked {height:20px; width:20px;}
    :disabled {background-color:lightgray;}
    :focus {background-color:yellow;}
    :required {border:dotted 2px blue;}
  </style>
</head>
<body>
  <p><a href="http://www.google.com">Google</a><p>
  <p><a href="http://tw.yahoo.com">Yahoo</a><p>
  <div class="hello">Hello World</div><br>
  <form>
    <input type="text" required>
    <input type="text" disabled><br><br>
    <input name="language" type="checkbox" value="Python"> Python
    <input name="language" type="checkbox" value="R"> R
    <input name="language" type="checkbox" value="C#"> C#
  </form>
</body>
</html>




此例樣式表中的 :link 與 :visited 均只套用到超連結, 因此前面不加 a 亦可, 而 hover 則可套用到所有元素 (此例為 div). 第一個 text 輸入欄位因為是必填欄位 (required), 因此會套用虛線邊框樣式. 最後面的 checkbox 元件被核取時會套用 :checked 樣式, 即尺寸會變大.

OK, 大功告成, 以上便是網頁專案中最常用的樣式用法.

參考 :

# https://www.w3schools.com/css/
# 網頁樣式表-CSS的提示與竅門

張貼者： 於
標籤： , , ,

沒有留言 :

張貼留言

訂閱： 張貼留言 ( Atom )