以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

連結外部定義檔

連結一個外部的體裁定義檔

在一份 HTML 文件中定義體裁對修改該份文件而言是非常方便的, 但如果您想同時修改數份文件時,甚至整個網站的所有文件呢? 所以用連結外部體裁定 義檔的方式就顯的重要而且必要了。

首先,建立一個含有下列內容的檔案,並存檔命名為 basic.css

h3 { font-family: 標楷體; font-style: italic; color:green }

接下來,開啟一份 HTML 文件 (命名為 basic.html),加入名為 <LINK> 標籤呼叫外部體裁定義檔在 head 標籤中:

<HTML> 
<HEAD> 
<LINK rel="stylesheet" type="text/css" href="basic.css" title="style1"> 
</HEAD> 

<LINK> 標籤的屬性告訴流覽器去連尋找 外部的體裁定義檔,也就是 CSS 檔。現在檔案名稱是 basic.css ( 假設您的體裁定義檔 和 HTML 文件是在同一個資料夾之下,如果不在同一資料夾下,則要以 href 屬性來指定路徑 ) title 屬性只是單純的指定一個名稱使得容 易辨識。basic.css 這個體裁定義檔定義了 basic.html 文件中使用的體裁, 所以每個您在 HTML 文件中使用到的 <H3> 標題文字都會變成綠色、斜體的標楷體。定義如下;

<BODY> 
<H3>綠色、斜體、標楷體的 H3 標題文字</H3> 
<P> 
<H3>這行也是</H3> 
</BODY> 
</HTML>

輸入一份外部體裁定義檔

您也可以結合另一份外部體裁定義檔在 HTML 文件中,使用 CSS @import 指令:

<HEAD> 
<STYLE type="text/css"> 
<!-- 
@import url( "basic.css") 
-- > 
</STYLE> 
</HEAD> 

輸入指令: @import 像極了 <LINK>標籤,雖然語法有點不同 (參閱 CSS 規格 詳列有關 @import 的討論) 在本例中, 使用url ("basic.css") 來呼叫名為 basic.css 的外部體裁定義檔

注意: @import 指令在 通訊家族及 IE 4.0. 中仍存在許多錯誤。在這些錯誤修正之前, 仍建議您使用<LINK> 標籤

結合體裁

經常,用結合的方式是應用體裁的好辦法。舉例說,您可以利用控制體裁定義的 方式來使整個網頁看起來有一致性。但是如果您想要使某一個特定的頁面有一些其他附加 的體裁,您同樣可以另行加在 HTML 文件的檔頭。或是您只是要使頁面中的某一段看起來 不一樣,那麼在使用時直接定義也行 ( in-line style )即使用 <DIV> 或 <SPAN> 標籤。

您也可以使用 @import 標籤來同時叫用多個不同的體裁定義檔來用,但是 <LINK>標籤則是只能叫用一個外部的體裁 定義檔。當您輸入多個體裁定義檔時,則必需要是 <STYLE> 標籤中的第一行。換句話說, 如果您同時在 HTML 文件中定義體裁而且又另外輸入體定義檔時,一定要先執行輸入的動作 ,再定義新的體裁。 這就是 這就是所謂的多層規則 ( cascading rules ): 兩個體裁同時存在而且有衝突時,以文件內部的體裁為準。

上一頁:應用在文件中 下一頁: 定義的語法

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

What causes burning pain in Achilles tendon?   2017/7/22 下午 10:13:00

Superb site you have here but I was wanting to know if
you knew of any forums that cover the same topics talked about in this article?
I'd really like to be a part of community where I can get feed-back from
other experienced individuals that share the same interest.
If you have any recommendations, please let me know. Kudos!

foot pain conditions   2017/7/2 上午 10:23:00

Glad to be one of the visitors on this awful website :D.

Unknown   2017/6/24 下午 08:17:00

Hiya very nice website!! Guy .. Excellent .. Wonderful
.. I will bookmark your blog and take the feeds additionally?
I'm glad to seek out a lot of helpful information right
here in the put up, we want develop extra strategies on this regard,
thanks for sharing. . . . . .

http://reakratz.wordpress.com   2017/6/12 下午 02:26:00

This is my first time go to see at here and
i am actually impressed to read all at alone place.

danialangille.hatenablog.com   2017/6/11 上午 05:28:00

Amazing! Its really awesome article, I have got much clear idea
about from this post.

http://uppitybanister671.hazblog.com   2017/5/19 上午 06:02:00

At this time it sounds like Wordpress is the top blogging platform available right now.
(from what I've read) Is that what you are using on your blog?

manicure   2017/5/4 上午 06:32:00

Why people still make use of to read news papers when in this technological globe everything is accessible
on net?

BHW   2017/4/13 下午 08:03:00

Hi there! I could have sworn I've visited your blog before but after browsing
through a few of the posts I realized it's new to me.

Anyways, I'm certainly pleased I came across it and I'll be book-marking it and checking back often!

卜維丰   2008/7/15 下午 05:08:00

朵拉拉, 先作個測試頁, 把文件模式改成 xHTML 情況可能會改善很多

但一些 javascript 也可能相對應要改

朵拉拉   2008/7/15 下午 03:33:00

卜老師您好~
目前正在規劃一個大型網站
由於是利用firefox來測試的
當我網站完成的差不多的時候
用IE6.0跑了一次卻走了樣... >_<

例如我使用了兩個外部CSS檔案
((一個是架構))
用來分隔所有區塊大小置左置右的.css檔案
((一個是顏色背景定義檔))
用來區分同樣的架構但是有不同的背景顏色產品等等的~
所以同樣的DVI或者是CLASS命名都有可能同時出現在架構跟內容的兩個CSS裡面...這樣會導致IE6無法完整呈現出來嗎!? 但是firefox卻是可以的...

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: