網頁技術

首頁 > 網頁技術目錄 > 如何開始使用CSS ?

如何開始使用CSS ?

2020/8/24 , 由 Wanding 編寫發布

分類：

CSS

編輯HTML文件，開始納入CSS樣式

當我們認識了CSS並且了解它的功能之後，我們該如何使用CSS來美化我們正在編寫的網頁呢？以下有四種方式：

使用<style>標籤定義樣式
在標籤中使用style的屬性
將樣式表定義在CSS檔案，並以<link>標籤連結該檔案
將樣式表定義在CSS檔案，並以＠import指令匯入該檔案

接下來分別說明這四種方式

1. 使用<style>標籤定義樣式

第一種方式是比較入門簡易的方法，或是只針對特殊頁面進行單獨的樣式設定。如果網頁頁數很多，可能用其他方式會比較適合。

用法為在<head>與</head>的段落之中，使用<style>標籤來定義樣式表，在style之後要加上type=text/css，意思就是告知瀏覽器，從這一行開始是定義CSS的樣式，直到</style> 出現為止。

<!DOCTYPE html>
<html lang="en">
   <head>
       <style type=text/css>
             h1 {
                 color: #fc5203;
                 font-size: 30px;
                 font-family: 標楷體;
                }
            body {
                 color: darkcyan;
                 font-size: 20px;
                 font-family: 微軟正黑體;
                }
       </style>
   </head>
<body>
<h1>如果有來生　◎三毛</h1>
如果有來生，要做一棵樹，<br>
站成永恆。沒有悲歡的姿勢，<br>
一半在塵土裡安詳，<br>
一半在風裡飛揚；<br>
一半灑落蔭涼，<br>
一半沐浴陽光。<br>
非常沉默，非常驕傲。<br>
從不依靠，從不尋找。<br>
<p></p>
如果有來生，要化成一陣風，<br>
一瞬間也能成為永恆。<br>

沒有善感的情懷，沒有多情的眼睛。<br>
一半在雨裡灑脫，<br>
一半在春光裡旅行；<br>
寂寞了，孤自去遠行，<br>
把淡淡的思念統帶走，<br>
從不思念，從不愛戀；<br>
..................
</body>
</html>

上面的原始碼在瀏覽器會輸出成如下所示：

2. 在HTML標籤中使用style屬性

第一種定義樣式的方法，影響的範圍是整個網頁。如果我們想要各別標籤進行CSS的調整，該如何做呢？這時，就可以直接在HTML標籤內使用style來定義樣式。

<p style="color:red; fontsize:20px;">文字內容在這裡</p>

這種方式的效力只有到</p>為止，下一個標籤則需另外再定義，容易看來雜亂，當宣告數量多時，避免使用這方法。

3. 用link標籤連結到css檔(外部樣式)

我們進一步把CSS定義另外存成一個檔案，然後再以<link>標籤來讀取css檔案的內容。 CSS的寫法如下：

h2 {color:red;
    font-size:20px;
    font-family:微軟正黑;
    text-align:center;
   }

網頁的部份，需在head段落中，以<link>標籤呼叫CSS檔案，語法如下：

<head>
    <link rel="stylesheet" type="text/css" href="CSS檔案的URL">
</head>

4. 用@import指令匯入CSS檔(外部樣式)

網頁中的@import必須在head段落的<style>和</style>之間，語法如下：

<head>
    <style>
    @import url(css檔案的url)
    </style>
</head>

小結

透過CSS的導入，能夠完全改變HTML網頁呈現元素的方式，這能夠透過display屬性在基本層級執行，也可以藉由連結鍵的方式來達成。網頁使用者不需要知道是透過外部樣式、內部樣式、或行內樣式。而外部樣式真正的重要性，在於提供作者集中放置網站呈現資訊的方式，讓所有的文件都指向相同的地方，不只讓網站更新與維護更加簡單，也能節省頻寬！

返回目錄

網頁技術

首頁 > 網頁技術目錄 > 如何開始使用CSS ?