開放原始碼技術文件網 CSS 入門教學

最後修改日期為 MAY 21, 2019

前言

在本文中,我們談談 CSS;和 HTML 類似,短短一篇文章是無法談完 CSS 的,我們這裡僅做一些概念上的介紹。

CSS 的組成

早期的 HTML 代碼,將網頁中風格 (style) 相關的設定直接內嵌在 HTML 標籤中,但這樣的做法很難維護網頁,而 CSS 的作用,就是將風格的部分抽離出來,放在獨立的設定檔中。透過修改 CSS 命令稿,可以同時更動頁面上數個網頁元素的風格,使得網頁維護更容易。

CSS 的標準經過數個版本更迭,目前的版本是 CSS3。不過,在瀏覽器上實際可用的 CSS 設定還是要看各瀏覽器的實作情形來決定。可以自己身邊放一本 CSS 字典或到 Can I Use 網站查閱可用的 CSS 特性。

CSS 設置的虛擬碼如下:

selector {
    property: value;
}

用一個簡例來對照一下:

body {
    background-color: beige;
}

由此可知,CSS 設定包含三項要素:

  • Selector:該 CSS 設定的目標標籤,像是本例的 body
  • Property:該 CSS 設定的特性,像是顏色、大小、位置等,像是本例的 background-color
  • Value:該 CSS 設定的值,像是本例的 beige (米白色)

學習 CSS,就是學習這三項要素。就像 HTML,學習 CSS 初期會比較枯燥,通常都是在學習一陣子後,用多個 CSS 設定值組合出不同的視覺效果,才會慢慢建立成就感。

在網頁中加入 CSS 設定的方式

在網頁中加入 CSS 設定的方式有以下三種:

  • 外部樣式表 (external style sheet)
  • 內部樣式表 (internal style sheet)
  • 行內樣式 (inline style)

外部樣式表是將 CSS 設定寫在另外一個檔案中,再從 HTML 頁面中引入,如下例:

<link rel="stylesheet" type="text/css" href="/css/style.css">  

內部樣式表則是將 CSS 設定直接寫在網頁中,如下例:

<style>  
p {  
    background-color: lightblue;  
}     
</style>

行內樣式則是將 CSS 設定直接嵌在 HTML 標籤內,如下例:

<h1 style="color:blue;">Some Title</h1>

CSS 設定優先順序如下:

  • 行內樣式
  • 內部樣式表和外部樣式表
  • 瀏覽器內建樣式

目前來說,大部分 CSS 設定都會用外部樣式表,維護網頁會比較容易;除非有強烈理由,很少會用另外兩種方式來加入 CSS 設定。

基礎 CSS 實例:字體 (Font)

我們以一個字體的簡例來看如何使用 CSS。我們將範例放在這裡,本節節錄部分內容。

以下是 HTML 的部分:

<h1>Page Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing ...</p>

以下是相對應的 CSS:

h1 {
  font-family: sans-serif;
  text-align: center;
}

p {
  font-family: serif;
  font-size: large;
}

在這裡,我們寫了兩個樣式,一個調整 h1,一個調整 p。在 h1 中,我們使用 sans-serif 家族字體,這類字體沒有稜角,視覺上較美觀,但不利於閱讀長篇文字;在 p 中,則使用 serif 家族字體,這類字體有稜角,易於閱讀,但視覺上沒那麼美觀。讀者可以將兩種字體家族對調看看,測試其效果。

基礎 CSS 實例:Box Model

我們藉由另一個簡例來看 CSS 的 box model 如何使用。我們將完整的例子放在這裡,本文僅節錄部分內容。

首先來看 HTML 的部分:

<div id="border">
  <div class="box">There are some messages.</div>
  <div class="box">There are some more messages</div>
</div>

在此處我們用 <div> 而非 <p> 是因為 <div> 沒有內定的間距,對於練習版面排列比較有助益。

接著來看 CSS 的部分:

body {
  background-color: grey;
}

#border {
  padding: 5px;
  width: 80%;
  max-width: 500px;
  background-color: lightgrey;
}

.box {
  border: 3px solid violet;
  border-radius: 12px;
  margin: 10px;
  padding: 10px;
  background-color: slateblue;
  color: white;
}

在此處,我們設置三組樣式,第一組直接設在 <body> 上,僅設置背景顏色。第二組設在 id #border 上,用 padding 設置內部邊界 5px,並設置其寬度和最大寬度及另一個顏色。第三組設置在 class .box 上,同時設置對外的 margin 及對內的 padding 寬度及其他屬性。

讀者可以試著把內外框的 paddingmargin 屬性移除,觀察其變化,即可知道這兩個屬性對版面的影響。

繼續深入

只憑本文短促的介紹,其實無法真正學好 CSS,初學者還是建議買一本 HTML 和 CSS 的專書,或是參考 w3schoolsMDN 等線上教材,才能真正學習 CSS。

檢查 CSS 代碼的工具

檢查原生 CSS

雖然 CSS 是靜態代碼而非程式碼,但我們也可以用一些工具去檢查 CSS 代碼是否有錯。本節使用 CSSLint,透過以下指令即可安裝:

$ npm install -g csslint

使用方式相當簡單,直接把想檢查的 CSS 檔案的路徑當成參數丟給 csslint 即可:

$ csslint path/to/file.css

檢查 Sass 等前置語言

前述的工具是用來檢查原生 CSS 的,如果想檢查 Sass 等 CSS 前置語言的話,可考慮 stylelint,透過以下指令安裝:

$ npm install --global stylelint

如果喜歡局部安裝的朋友,可以改用 --save-dev

$ npm install --save-dev stylelint

這時候就要自己改 package.json 以串連指令。

除了安裝 stylelint 本身,也要安裝相對應的設定檔,可安裝以下兩種之一:

  • stylelint-config-recommended :偵測所有可能的錯誤
  • stylelint-config-standard :除了錯誤外,還加入一些風格上的建議

透過以下指令安裝:

$ npm install --save-dev stylelint-config-standard

修改其設定檔 .stylelintrc.json 使其生效:

{
    "extends": "stylelint-config-standard" 
}

之後就可以用 stylelint 來檢查 Sass 等前置語言檔案:

$ stylelint path/to/file.scss

用 CSS 壓縮器節約頻寬

一般 CSS 教材或是網站上的範例,都會把 CSS 代碼排列整齊,這是為了教學上的考量。CSS 代碼的空白和換行其實對 CSS 設定沒啥影響,在效能優先的考量下,其實可以把這些部分拿掉;這類機械性的編輯動作不需要人工介入,而 CSS 壓縮器 (CSS minifier) 就是在此種思維下產生的自動化工具。

這種工具有好幾個,uglifycss 是其中一個例子。uglifycss 本身是 node 套件,以 npm 即可安裝:

$ npm install -g uglifycss

使用方式如下:

$ uglifycss --output style.min.css style.css

由於經過 CSS 壓縮器處理過的 CSS 命令稿難以閱讀,通常會保留一份未壓縮的命令稿,僅發布已壓縮的部分。慣例上,壓縮過的會命名為 xxx.min.css ,而原本的會命名為 xxx.css

用 CSS 框架快速設置網站外觀

由於每個網站都需要 CSS 來美化站容,撰寫 CSS 命令稿成了固定的任務之一,而 CSS 框架可以減少一部分的工作量,一些知名的框架像是 Bootstrap (最受歡迎)、 FoundationBulma 等。這類框架除了可以打點門面,通常會加上適應性網站 (mobile responsive website) 和切板 (layout formatting) 等功能,簡化不少手工,所以很受歡迎。

當然,使用現有的 CSS 框架並不代表我們就不用學 CSS,如果內建的樣式無法滿足我們的需求,我們還是要自行客製化樣式;此外,如果只用現有的 CSS 框架而不自己加以設定,其實很容易就看得出來是套現成的 CSS 樣式表,無法建立自己的風格。

分享本文
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Yahoo
追蹤本站
Facebook Facebook Twitter