以下為本站文章分類清單

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

以下為文章回應區

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

Can you grow taller with exercise?   2017/8/21 下午 02:08:00

My programmer is trying to persuade me to move to .net from PHP.

I have always disliked the idea because of the costs.
But he's tryiong none the less. I've been using WordPress on a number of websites
for about a year and am nervous about switching to another platform.
I have heard very good things about blogengine.net.
Is there a way I can transfer all my wordpress posts into it?
Any kind of help would be greatly appreciated!

Can you lose weight by doing yoga?   2017/8/4 下午 01:54:00

Having read this I thought it was really informative.
I appreciate you taking the time and energy to put this
information together. I once again find myself personally spending a significant amount of time both reading and posting
comments. But so what, it was still worth it!

How did the Achilles tendon get it's name?   2017/7/29 上午 04:13:00

Hello! This is my 1st comment here so I just wanted to give a quick shout out and say I genuinely enjoy reading your articles.
Can you recommend any other blogs/websites/forums that deal with the same topics?
Thanks a lot!

How do you grow?   2017/7/28 上午 11:25:00

I love what you guys are up too. This sort of clever work and
reporting! Keep up the excellent works guys
I've incorporated you guys to blogroll.

Do you get taller when you stretch?   2017/7/21 上午 04:10:00

hello!,I really like your writing very a lot! proportion we be in contact extra about your post on AOL?
I need an expert on this space to solve my problem.
May be that's you! Taking a look ahead to peer you.

foot pain cycling   2017/7/3 下午 09:24:00

This is the right webpage for everyone who wishes to understand this topic.
You understand so much its almost tough to argue with you (not that
I actually would want to?HaHa). You definitely put a brand new spin on a topic
which has been discussed for many years. Wonderful stuff, just excellent!

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.

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