L4 :: 學習CSS美化網頁

繼上一篇的教學後,今日終於開始新的網頁元素:CSS(Cascading Style Sheets),層疊樣式表,首先介紹CSS的編輯方法。

CSS的寫法

以下為CSS的基本寫法,就是似一個元素或一個名稱記錄著它們的所有數值。在 { } 內分別是屬性及其數值的變化。

  1. type {
  2.   attribute: value;
  3. }

HTML 主要元素

第一類,HTML元素,如下方所示,所有HTML元素:html、body、a、header、footer等都可以直接於CSS內改變。

  1. body {
  2.   background-color: #000000;
  3. }

Class 類別

第二類,設立 Class 常用的資料庫 (Libraries),如下列所示,每個 class 都會利用 .class 進行分類。一般於網站內重覆出現的CSS就會使用 Class 去實行。

  1. .red_text {
  2.   color: #ff0000;
  3. }

ID 類別

第三類,設立 ID ,獨立認證 / 身份,如下列所示,每個 id 都會利用 #id 進行分類。ID 與 Class 不同,基本上一個 ID 只會在一頁中出現一次。

  1. #head-title {
  2.   padding: 10px;
  3. }

載入 CSS 在 HTML 上

既然知道 CSS 的用法,但要如何載入到 HTML 檔案上呢?其實有以下兩個方法:植入式和導入式。

植入式

所謂的植入式就是指直接寫在 HTML 檔案內,適合於單一頁的網頁上使用。而方置的位置就是在 <head> 裡面。

index.html
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>KUROSU'S Web Tutorial</title>
  6.     <style type="text/css">
  7.       body {
  8.         background-color: #000000;
  9.         color: #ffffff;
  10.       }
  11.       .red_text {
  12.         color: #ff0000;
  13.       }
  14.       #head-title {
  15.         padding: 10px;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     ...
  21.   </body>
  22. </html>

導入式

了解到植入式是怎麼一回事後,如果你要建立一個網站而最少有十頁或以上,植入式一旦有改動就要將 CSS 修改十次或以上,這種做法會很不方便,萬一改少了一頁就變得麻煩。所以導入式就是將 CSS 獨立出一個檔案,然後將這個檔案每頁載入到 HTML 檔案內,這種做法就可以改一次就所有檔案都會更新。

建立 style.css

記得前往以建立的 css 資料夾並將 style.css 儲存在內。

  1. /web/ - Project資料夾
  2. /images/ - 放置圖片的資料夾
  3. /css/ - 放置CSS的資料夾
  4. /js/ - 放置JS的資料夾
  5. └ index.html

style.css

  1. body {
  2.   background-color: #000000;
  3.   color: #ffffff;
  4. }
  5. .red_text {
  6.   color: #ff0000;
  7. }
  8. #head-title {
  9.   padding: 10px;
  10. }

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>KUROSU'S Web Tutorial</title>
  6.     <link rel="stylesheet" type="text/css" href="css/style.css" />
  7.   </head>
  8.   <body>
  9.     ...
  10.   </body>
  11. </html>

簡易實例

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>KUROSU'S Web Tutorial</title>
  6.     <link rel="stylesheet" type="text/css" href="css/style.css" />
  7.   </head>
  8.   <body>
  9.     <header id="head-title">
  10.       <h1 class="red_text">KUROSU'S Web Tutorial</h1>
  11.       <ul>
  12.         <li><a href="index.html">主頁</a></li>
  13.         <li><a href="about.html">自我介紹</a></li>
  14.         <li><a href="contact.html">聯絡本人</a></li>
  15.       </u1>
  16.     </header>
  17.     <main>
  18.       <p>Hello! 這是我的網站主頁,歡迎你們到來!</p>
  19.     </main>
  20.     <footer>
  21.       <div>2018 &copy; KUROSUS'S.HK 版權所有</div>
  22.     </footer>
  23.   </body>
  24. </html>

從以上例子我們可以得到甚麼呢?

顯示結果:

在HTML的呈現下,整個 body 背景變成了黑色、字體變了白色;特定字體是紅色以及 header 的空間變多了。

Attribute (屬性) 用途 Value (值)
background-color 設定背景顏色 使用 6位 HEX 顏色編碼 (16進制 0-f)
color 文字顏色 使用 6位 HEX 顏色編碼 (16進制 0-f)
padding 框內空間 四邊數值同時設定
方法1: 10px
方法2: 10px 10px 10px 10px ,對應為:上 右 下 左

今次就先簡單介紹CSS的結構以及如何在HTML中應用,下一次會詳盡列出常用的 CSS 屬性及解釋其用途。

如果你睇完有疑問,可以去Facebook專頁Inbox我或者Send Email比我都可以架!