以下為本站文章分類清單

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

以下為本頁本文內容

特殊的定義方式

更多的 CSS 體裁定義加到您的 HTML 文件中時,有幾個方式可以使 CSS 變的簡單而功能強大。

使用關連式體裁元件

您可以嵌套標籤在一個體裁元件中指定某種特殊體裁屬性

strong em { color: red }

這樣子的體裁元件稱為 contextual selector,因為只有當 <EM> 標籤加在 <STRONG> 標籤之後,文字才會是紅色的。換言之標籤被嵌套住了。

<STRONG>這裡是粗體字, <EM>粗體、斜體紅色</EM>.</STRONG> 
<EM>這段只有斜體了</EM>

群組體裁元件

您也可以群組體裁元件,那樣可以節省 style sheet 的長度避免冗長的語法,只要用逗號 將體裁元件隔開即可:

h1, strong em, td
       { 
       font-family: Arial;
       color: blue;
      }

現在所有 (<H1>, <EM> 加在 <STRONG>之後的, 還有 <TD>) 都使用同一種體裁規格如 (blue, Arial text)。 當然這些只是附加在原本該標籤在 HTML 文件中的定義上,如: <H1> 仍保有原來標籤代表的字的級數, <STRONG> 也仍是粗體字。 任何不包含在體裁元件定義過的標籤中的文字是不受影響的 

如果您想要在這些體裁元件中加入更多的規格,再定義即可

h1, strong em, td
       { 
      font-family: Arial;  
      color: blue  
      }  

 h1
       {
       font-style: italic
       }

 

現在所有標籤都是藍色 Arial 字體, 但 <H1> 則另有斜體效果。 

速記編碼

您可以使用速記編碼方式來定義體裁元件,例如:

em {font: 12pt/14pt bolder Arial, Helvetica} 

是下列的速記法 

em
       {
       font-family: Arial, Helvetica; 
      font-size: 12pt;  
      line-height: 14pt;  
      font-weight: bolder  
      }  

(注意: 有些屬性如行距還沒正式宣告可用。參閱 CSS 屬性一覽表 )

使用 <ANCHOR> 虛擬體裁元件

虛擬體裁元件(Pseudoclasses) 可以擴充 CSS 用以包含那些不屬於 HTML 定義的規格,但是流覽器可以支援的語法。像是: <ANCHOR> 標籤並沒有 link, active, 或 visited 這些屬性, 但流覽器支援不同連結色彩,您可以定義 <ANCHOR> 虛擬體裁元件用冒號相連

A:link {color: red} 
A:visited {color: blue}  
A:active {color: white}  

這樣的話未造訪的連結文字是紅色的 已經流覽過的連結文字是藍色的 當按下滑鼠時文字會變成白色 參閱 W3C recommendation 獲得更多有關 <ANCHOR> 虛擬體裁元件

上一頁: 定義的語法 下一頁:實例演練

以下為文章回應區

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

   2017/8/21 下午 05:08:00

Ahaa, its fastidious discussion concerning this piece of writing here
at this weblog, I have read all that, so at this time
me also commenting at this place.

Can stretching help you grow taller?   2017/8/4 上午 11:48:00

I think this is one of the most important info for me.
And i am glad reading your article. But wanna remark
on some general things, The web site style is perfect, the articles is really excellent : D.
Good job, cheers

http://humorousalmanac6.exteen.com/   2017/7/31 上午 01:48:00

Spot on with this write-up, I honestly believe that this website needs
a lot more attention. I'll probably be returning to
read more, thanks for the information!

How do you stretch your Achilles?   2017/7/29 上午 04:09:00

It's appropriate time to make some plans for the longer term and it's time to be
happy. I've read this post and if I may I desire
to recommend you few interesting issues or suggestions. Maybe you could write next
articles regarding this article. I want to read even more issues about it!

How we can increase our height?   2017/7/28 上午 11:41:00

I am genuinely grateful to the owner of this web page
who has shared this enormous post at at this time.

ellenfriese.hatenablog.com   2017/7/22 下午 06:10:00

When I originally commented I appear to have clicked on the -Notify me when new comments are
added- checkbox and from now on whenever a comment is
added I receive four emails with the same comment.
Is there a way you can remove me from that
service? Thanks!

How does Achilles tendonitis occur?   2017/7/22 上午 03:10:00

My brother suggested I might like this website. He was totally
right. This post actually made my day. You can not imagine just
how much time I had spent for this information! Thanks!

foot pain from standing   2017/7/3 下午 12:21:00

Whats up very cool web site!! Man .. Excellent .. Superb ..

I'll bookmark your blog and take the feeds also? I'm satisfied to find so many helpful information right here in the put up, we want
develop extra strategies in this regard,
thanks for sharing. . . . . .

manicure   2017/5/4 上午 02:43:00

I want to to thank you for this very good read!! I absolutely loved
every bit of it. I have got you saved as a favorite to check out new stuff you post…

BHW   2017/4/13 下午 11:56:00

Hmm it appears like your site ate my first comment (it was extremely
long) so I guess I'll just sum it up what I wrote and say, I'm thoroughly enjoying your blog.
I as well am an aspiring blog blogger but I'm still new to the whole thing.

Do you have any suggestions for novice blog writers? I'd certainly appreciate it.

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