以下為本站文章分類清單

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

以下為本頁本文內容

實例演練

編輯一個獨立的體裁定義檔,您可以單改一個檔案而使所有的 HTML 文件外觀改變。 想了解這樣的變化,複製下列程式碼到一個文字檔中,並且存檔,檔名為style1.css:

h1, h2, h3, h4, h5 { color: red } 
body { background-color: #cccccc; font-family: Arial, Helvetica, sans-serif }  
p { line-height: 200% }  
ul li { font-size: 70% }  
.red { color: red }  
.green { color: green }  
.blue { color: blue }  
#big { font-size: 120% }  
#upper { text-transform: uppercase }  

第一行會使 <H1> 到 <H5> 標題文字是紅色的。 第二行指定文件背景色是灰色而且使用 Arial 為內定字體‧再來改變標籤 <P> 使其有兩倍的行距 (200% line-height). 第四行使 <LI> 文字在 <UL> 標籤下時級數只剩 70% 按下來的三行則是自行定義了三種不同的體裁元件: red 體裁元件使文字以紅色顯示,以此類推。 最後兩行則是建立兩個體裁標籤 big 體裁標籤使文字級數放大至 120% upper 體裁標籤使文字變為上標字。

完整的屬性及其內含值請參閱CSS 屬性一覽表

把下列程式碼貼到一份 HTML 文件中,並命名為 doc1.html:

<HTML> 
<HEAD> 
<LINK rel="stylesheet" href="style1.css"> 
</HEAD> 
<BODY> 
<H1>Welcome!</H1> 
<H3>下面列出了我最喜歡的顏色:</H3> 
<UL> 
<SPAN class="red"><LI>紅色</SPAN> 
<SPAN class="green"><LI>綠色</SPAN> 
<SPAN class="blue"><LI>藍色</SPAN> 
</UL> 
當然還有其他顏色我也喜歡,不過為了翻譯本文件,也只好隨便寫幾行字了  
</BODY> 
</HTML>

再來把下列的程式碼貼到另一份 HTML 文件中並命名為 doc2.html:

<HTML> 
<HEAD> 
<LINK rel="stylesheet" href="style1.css"> 
</HEAD> 
<BODY> 
<H2>準備感受 CSS 魅力!</H2> 
<STRONG id="big">這幾個字比較大,</STRONG> 再來 <SPAN id="upper" class="blue">藍色的上標字!</SPAN> 
<P> 
I like documents to be double-spaced. It covers more space, which makes people think I've written a whole lot more.  
</P> 
</BODY> 
</HTML>

現在只要您修改 style1.css 的內容, doc1.html 及 doc2.html 就會有明顯的改變,而您甚至連 這兩個檔案都沒有開啟過。 例如:修改 style1.css 中 body 這行成為:

body { background-color: #000000; font-family: Courier, monospace; color: #eeeeee }

看看結果會變成:

doc1.html 
 
doc2.html 
上一頁:特殊的定義方式 下一頁:CSS中圖層的定義

以下為文章回應區

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

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