今天設計嵐繼續針對『成為CSS高手之路』系列文章發表第五篇~套用外部CSS檔案的方式進行說明,如果是第一次學習CSS相關課程的人不妨先針對此系列文先前的文章進行閱讀,循序漸進的學習效果更好喔!

  • 成為CSS高手之路(一)~CSS入門QA教室

  • 成為CSS高手之路(二)~認識基本HTML語法

  • 成為CSS高手之路(三)~CSS在DW中的設定與語法宣告方式Part I-整頁套用的CSS規則(上)

  • 成為CSS高手之路(四)~CSS在DW中的設定與語法宣告方式Part II-整頁套用的CSS規則(下)

  •       而今天系列文章之五所要介紹的套用外部CSS檔案的方式,是先將CSS的格式語法寫在一個獨立的檔案中,並且儲存成CSS格式的檔案,然後再將此檔案以連結或匯入的方式套用在不同的網頁中,讓這些網頁同時擁有相同的CSS格式設定,相當方便快速,而且日後有需要,只要修改CSS檔就可以同時更新所有的網頁格式設定了,這對於需要統一格式設定以及同時管理大量網頁的設計師來說,是個省時簡便的好方法。

     1.首先設計嵐先準備兩個網頁檔案,並且輸入簡單文字作區分,但是不作任何的格式設定。

    ◎以下為a1.html畫面:

    1.jpg 

    ◎以下為a2.html畫面:

    2.jpg 

    2.在此設計嵐依然是以在Dreamweaver中可以完成設定的步驟作介紹,好讓初學者可以無痛上手。

    3.首先設計嵐先在a1.html的編輯畫面中,點選CSS樣式面板→新增CSS規則鍵。

    3.jpg 

    4.然後設定規則名稱以及選取器類型,重點在於下方的『規則定義』的項目中選擇『新增樣式表檔』選項。

    4.jpg 

    5.接著出現儲存畫面,請將CSS檔案儲存在專案資料夾中並且以英文數字命名,然後按下『儲存』鈕。

    5.jpg 

    6.接著出現設定畫面,請依照所需進行相關格式設定,完成後按下確定鍵。

    6.jpg 

    7.由於這個CSS檔是在a1.html編輯畫面下建立的,Dreamweaver會自動載入此檔案,再加上當初設定時,選取器類型設定為『類別』,所以要套用時,請到『屬性』面板→HTML→類別欄位中,就會有剛剛儲存的CSS檔案可供選擇(如下圖紅框處)。

    7.jpg 

    8.套用之後的畫面如下,a1.html就自動套用所有格式嚕。

    8.jpg 

    9.接著針對a2.html頁面套用同樣的外部CSS檔,由於CSS檔案是獨立的一個檔案,所以要先進行附加的動作。『屬性』面板→HTML→類別→附加樣式表。

    9.jpg 

    10.按下瀏覽選擇要連結的CSS檔案。

    11.jpg  

    11.選擇樣式表檔案→確定。

    12.jpg 

    12.附加完成後便可以在選項中選擇要套用的樣式表了。

    13.jpg 

    13.套用完成後a2.html也同樣擁有相同的格式了。

    14.jpg  

    14.切換到程式碼模式下,會看到a1.html的語法如下:

    15.jpg 

          在<head>與</head>標籤中會有一行以<link href="連結的CSS檔案" type="text/css"/>的程式碼,表示這是以『連結』的方式套用進來的CSS樣式表。

          而在<body>標籤中則會加入套用的CSS樣式的類別名稱,如<body class="類別名稱">,這是因為當初是以『類別』的方式定義此規則。

    15.同樣的在a2.html的程式碼中也會有同樣的程式碼。

    16.jpg 

    16此外,在『CSS樣式』面板,在set.css項目上點兩下可以開啟此外部CSS檔的原始碼畫面,懂語法的人也可以在此修改。

    17.jpg 

    外部CSS檔的程式碼畫面:

    18.jpg 

    17.而在一開始設計嵐有提到此方法最大的好處在於只要針對外部樣式表作修改,所有連結的頁面都會自動更新,如果要修改我們可以在『CSS樣式』面板→類別名稱上連點兩下。

    19.jpg 

    18.進入設定畫面進行修改,完成按下『確定』(在此設計嵐簡單修改網頁背景色)。

    22.jpg 

    19.修改完畢後a1.html和a2.html都會同步作更新喔!

    20.jpg 

    21.jpg 

    p.s.在步驟10中,如果選擇以『匯入』方式附加樣式表,則程式碼則必須放在<style>和</style>標籤中,且以@IMPORT的指令帶入:(如下)

    <head>

    <title>頁面標題</title>

    <style>

    @IMPORT url(set.css);

    </style>

    </head>

    而匯入與連結的差別在於如果CSS的規則設定有衝突時,匯入(@IMPORT)會被優先套用。 

          以上就是以外部CSS檔案附加的方式進行CSS格式的套用,也是一種常用且重要的CSS基本功喔,有心成為CSS高手的人要熟悉這樣的用法。

    創作者介紹

    『嵐設』-設計教學部落

    設計嵐 發表在 痞客邦 PIXNET 留言(0) 人氣()