CSS的儲存位置與使用比較

CSS的儲存位置

（一）HTML文件內
（1）文件樣式

運用CSS樣式面板==>新增CSS規則==>
如下圖所示, 將規則定義在僅此文件
則CSS樣式規則的語法寫在本文件的<head></head>區之內


（2）行內樣式

當我們選取局部文字或儲存格或其他網頁元素時,
屬性面板==>CSS部份==> 可以選擇「新增行內樣式」
==>按下「編輯規則」按鈕==>設定CSS的樣式
結果CSS樣式語法是寫在標籤內的 style 屬性位置

有的網頁元素在屬性面板中並沒有提供新增行內樣式的功能
那麼如果要使用行內樣式, 就得在程式碼中直接輸入了

（二）HTML文件外，成為獨立的CSS樣式表檔

運用CSS樣式面板==>新增CSS規則
==>如下圖所示, 將規則定在新增樣式表檔
則CSS樣式規則的語法寫在HTML文件外的CSS樣式表檔

 

CSS的使用比較

※ 行內樣式的優先權大於文件樣式

但行內樣式的靈活運用度較低, 維護管理也較不易。

※ 外部樣式檔附加進來的方式

（１）連結方式

（２）匯入方式

「連結」的方式及「匯入」的方式，一樣都可以同時讓多個HTML文件附加，並且在修改樣式時每一個HTML檔亦是同步更新樣式的。那麼它們有什麼不同呢？不同的是用戶端附加樣式的時機不同，連結是要顯示的時候才連結到樣式表呈現結果，而匯入是HTML文件一載入時即將樣式表檔中的樣式全部匯入到文件。另外，「匯入」的方式還可以階層式地管理樣式檔，如下圖所示。

 

Posted on 一月 17, 2010 by 張翠玲

Filed under 網頁設計 | 13 迴響 funP udn Yahoo! Delicious Digg

« CSS基本語法結構與選取器 | Main | Spry折疊式面板的高度問題 »
評分： 1分 2分 3分 4分 5分 得分: 5.0/ 投票數: 17


迴響:

翠玲老師:您好!謝謝您分享這些資訊，讓我了解css連結跟匯入的不同!上您的課程獲益良多，也非常感謝您的辛勞!想請問老師，我原本做的網站是html的，現在上老師的PHP，我想在原本的網站加做一頁「線上詢問」的表單，是不是接下來的課程會有相關的教學內容?(因我不想透過用outlook的方式請人家填資料)另外，用PHP做的頁面可以跟原本html的頁面結合嗎?煩請老師解答，謝謝!

由...發表 miki on 一月 18, 2010 at 05:34 下午 CST #

哈囉老師:上您的課真是太棒了..解說的很清楚.讓學生很容易了解..

由...發表 judy on 一月 18, 2010 at 07:38 下午 CST #

學了很多資料庫的課，結果回頭上這堂PHP結合網頁，這下子總算找到方向了哦！ 對於半路出家的我是總算找到一種容易聽的懂又可以接受的方式！嘻嘻！

由...發表 陳筱蕾 on 一月 19, 2010 at 07:55 上午 CST #

哈囉老師:上您的課真是太棒了..解說的很清楚.讓學生很容易了解.. 我是學生的朋友聽說在這學習很容易就能上手我也很有興趣哦！

由...發表 楊宏昌 on 一月 19, 2010 at 02:51 下午 CST #

php網頁比asp.net簡單多了哦！

由...發表 張鑑緯 on 一月 19, 2010 at 02:54 下午 CST #

老師部落格寫的超詳細,上課也都很仔細的講解,第一次在巨匠上網頁的課程,可以遇到老師,真的超幸運的

由...發表 IZUMI on 一月 19, 2010 at 07:15 下午 CST #

筱蕾、宏昌、鑑緯、IZUMI，你們好！很開心你們來留言，也很高興課堂上的學習對你們有幫助，讓我們彼此一起繼續努力！

由...發表 Tsuiling on 一月 20, 2010 at 03:46 上午 CST #

miki，好，PHP的課程裡原先並沒有這一頁「線上詢問」，但可以加上介紹的，前一個班級就有補充介紹類似的功能。如果這個班級的進度無法補充的話，我也會引導你們去思考這個狀況該怎麼寫，畢竟它是一個很基本很常用的功能。如果上課沒能練習到，我或許可以在這裡寫方法。另外，用PHP做的頁面可以跟原本html的頁面結合嗎？所謂的結合是指那方面呢？互相連結顯示是一定沒問題的呀！

judy，好，謝謝！很高興你喜歡！很開心對你們有幫助！

由...發表 Tsuiling on 一月 20, 2010 at 04:11 上午 CST #

翠玲老師 您好 請問如何用li所作的a連結區塊來作變換影像的效果? 您精采的教學,每堂課都讓我獲益良多~也在此說聲:謝謝您!

由...發表 Grace Chang on 一月 20, 2010 at 08:05 下午 CST #

Grace，好，謝謝妳！我了解妳的需求了,如果這幾天課堂上沒有適當的時間可以補充的話,我再舉個例子放在這裡好了。

由...發表 Tsuiling on 一月 22, 2010 at 12:44 下午 CST #

老師好:dreamweave老師可以介紹幾本書給我嗎??要做好網站架設..還需要看哪幾本書??

由...發表 黃麗玲(judy) on 一月 22, 2010 at 08:32 下午 CST #

老師我用gmail傳送信件要點擊超連結時出現一個畫面，錯誤！有一個彈出式視窗欄截gmail無法開啟網頁。如果你啟用了彈出式窗攔截器將其停用再開啟視窗！

由...發表 筱蕾 on 一月 27, 2010 at 09:13 上午 CST #

dear 翠玲老師: 今天上DW初階第一堂課.感覺很意外.因自己認為很簡單.沒想到原來我對DW一點也沒真正的了解.之前只記得記步驟.很感謝老師的用心..(管理檔案很重要)我到現在才知道.我想筱蕾姐姐應該也要來上初階課才對.雖然妳已經拿到ACA CS3的證照. 哈哈!!妳如果再上老師的初階等於如虎添翼

由...發表 (judy)黃麗玲 on 四月 29, 2010 at 05:44 下午 CST #

發表迴響:
  • HTML 語法: 開啟