以下為本站文章分類清單

  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中圖層的定義

以下為文章回應區

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

foot pain relief   2017/6/24 下午 08:14:00

Hello my family member! I want to say that this article is amazing, great written and come
with approximately all important infos. I would like to look more posts like this.

http://hester2kelley3.hazblog.com/   2017/6/17 上午 12:08:00

Pretty section of content. I simply stumbled upon your
site and in accession capital to claim that I get in fact enjoyed account your
blog posts. Anyway I will be subscribing on your feeds and even I success you
get entry to consistently fast.

http://medaalfonsi.wordpress.com/   2017/6/16 下午 11:49:00

Highly energetic blog, I enjoyed that bit. Will there be a part 2?

http://periodiccap7609.jimdo.com   2017/6/11 上午 05:32:00

Hi to all, since I am genuinely eager of reading this web site's post to be
updated on a regular basis. It carries nice stuff.

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

You're so interesting! I do not believe I've truly read through a single thing like this before.

So great to discover someone with a few unique thoughts on this subject matter.
Seriously.. thanks for starting this up. This web site is something that is required on the internet, someone with some originality!

manicure   2017/5/3 下午 09:24:00

Hello there, I believe your website may be having browser compatibility problems.
When I take a look at your blog in Safari, it
looks fine but when opening in I.E., it has some overlapping issues.
I merely wanted to provide you with a quick heads up!
Aside from that, excellent website!

BHW   2017/4/13 下午 09:07:00

I'm really impressed with your writing skills and also with the layout on your blog.
Is this a paid theme or did you modify it yourself?

Anyway keep up the nice quality writing, it is rare to see a nice
blog like this one these days.

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