CSS 入門教學

在還不知道 HTML 是什麼的話,請先看我之前寫的 HTML 文章再接著往下看。

在傳統的 HTML 還沒有引入 CSS 之前,要實現美工上的設計是很麻煩的,假設要讓標題變成藍色,並會字體進行相應的設置,則需要引入 <font> 標記,如下:

<h2>
  <font color="#03C">CSS 入門教學</font> 
</h2>

這樣很麻煩,內容只有一段,如果是整篇文章,那顯得不那麼簡單。

傳統 HTML 相較於 CSS 為基礎的網頁設計,主要有幾點劣勢:

  1. 維護困難,修改成本高。
  2. 標記不足,文字間距…等在 HTML 中難找到。
  3. 網頁過大,沒有統一風格樣式控制,頁面程式容易過大。
  4. 定位困難,位置調整會變得複雜,維護困難。

所以 CSS 就顯得的很重要!!


CSS 的引入

CSS 的引入有兩種方式,第一種,在 <head> 裡,加上 <style>,如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* CSS 內容位置 */
  </style>
</head>
<body>
  
</body>
</html>

第二種,引入 CSS 檔案,如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link type="text/css" href="all.css">
</head>
<body>
  
</body>
</html>

以上兩種都可以,比較推第二種方法!接下來介紹常用的 CSS 用法。


CSS 的用法

假設我們要對 <h2> 標籤進行文字變紅色要怎麼做呢?總共分為四種

第一個作法用 class 賦予,稱為類別選擇器,如下:

<h2 class="title_h2">CSS 入門教學</h2>
.title_h2 {
  color: red; 
}

以圖解釋如下:

CSS 入門教學

這樣文字就會變紅色了,這是用 class 方式賦予 CSS 給這個標籤,CSS 最前面是一個點 (.),後面接命名

第二個作法為用 id 賦予 CSS,稱為 ID 選擇器,如下:

<h2 id="title_h2">CSS 入門教學</h2>
#title_h2 {
  color: red; 
}

id 的做法最前面是用 #,後面再接著名字,但建議 id 用法留給 JavaScript 去做使用。

第三個用法是直接對標籤下,也是俗稱標記選擇器,CSS 如下:

<h2>CSS 入門教學</h2>
h2 {
  color: red; 
}

這方法 CSS 前面都不用加什麼,直接寫標籤即可,不過缺點就是如果有其他一樣的標籤,也會跟著受影響也就是全部的 <h2> 標籤都會變紅色,所以要用這方法前,請先確認是否要共用,否則日後要維護會難維護!

第四個用法是對標籤直接下 style,稱為行內樣式,如下:

<h2 style="color: red;">CSS 入門教學</h2>

這樣也可以,只是如果一個標籤會有很多個 CSS 的話,會越來越長!維護成本也會高,頁面體積容易過胖,所以我也是不推薦這樣寫。

個人比較推第一個寫法!


CSS 選擇器集體宣告

如果某些 CSS 選擇器風格是完全相同的,或者部份相同,可以用集體宣告方式將 CSS 選擇器同時宣告,如下:

h1, h2, h3 {
  color: red; 
}

.special, .title, #number {
  color: #000; 
}

中間用逗號隔開,這樣這些 CSS 命名樣式就都一樣了!


CSS 巢狀宣告

假設有一個 HTML 標籤是這樣有兩層的內容,如下:

<p>
  CSS <span>入門教學</span>
</p>

除了直接給 <span> 下 class 方法外,有沒有其他方法可以對 <span> 下 CSS 呢?有的!就是巢狀宣告,如下:

p span {
  color: red;
  font-weight: bold;
}

直接巢狀下 CSS 下即可,上面語法為文字變紅色與粗體!


CSS 常用語法

以下介紹常用語法:

div {
  color: #000;  /* color 為文字變色,後面為顏色色碼 */
  font-weight: bold;  /* font-weight 為字體厚度,bold 為粗體 */
  padding: 10px; /* padding 為區塊內距,內距距離為 10px */
  margin: 10px; /* margin 為區塊外距,外距距離為 10px */
  font-size: 16px; /* font-size 為文字大小,大小為 16 字級 */
  text-decoration: underline; /* text-decoration 為修飾線條, underline 為下底線*/
  line-height: 1.5; /* line-height 為文字行高 */
  border: 1px solid #000; /* border 為框線,實線 黑色 */
  width: 100px; /* 寬度為 100px*/
}

CSS 語法很多,這邊無法一一列出,每個屬性有很多個值,並不是唯一,可能需要讀者再去查!或也許之後對針對 CSS 語法再慢慢做介紹 🙂

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *