網頁程式設計教學:CSS 入門

PUBLISHED ON NOV 26, 2018 — WEB

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

    CSS3

    CSS 的組成

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

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

    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 樣式表,無法建立自己的風格。

    TAGS: WEB