首頁 >web前端 >html教學 >HTML CSS樣式表

HTML CSS樣式表

WBOY
WBOY原創
2016-09-11 11:19:492095瀏覽

CSSCascading Style Sheet,疊層樣式表),作用是美化HTML網頁。

/*註解區*/    此為註解語法

一、樣式表

(一)樣式表的分類

1.內聯樣式表

    HTML合併顯示,控制精確,但是可重複使用性差,且冗餘較多。

    例:

內嵌樣式表

2.內嵌樣式表

    作為一個獨立區域內嵌在網頁裡,必須寫在head標籤裡面。

    

    p   //格式對p標籤起作用

    {

    樣式;

    }

    

3.外部樣式表

    新建一個CSS文件,用來放置樣式表。如果要在HTML檔案中呼叫樣式表,需要在HTML檔案中點右鍵→CSS樣式表→→→CSS樣式表→→→CSS

樣式表

→→→CSS

樣式表→→

→CSS

樣式表

→→

→CSS樣式表→→

→CSS樣式表→→一般用

link

連接方式。

    有些標籤有預設的邊距,一般寫樣式表程式碼的時候都會先去除(也可以設定其他的樣式),如下:    

 

(二)選擇器

1.標籤選擇器。用標籤名做選擇器。  

  2.class

選擇器。都是以

「.」

開頭。

 

 

3.ID選擇器。以「#」開頭。

🎜🎜 🎜 🎜🎜 🎜 🎜 🎜🎜4.🎜複合選擇器🎜🎜🎜 🎜🎜(🎜1🎜)用🎜🎜「🎜🎜,🎜🎜」🎜🎜隔開,表示並列。 🎜🎜

 

 

2)用空格隔開,表示後代。

 

 

3)篩選「.」

 

 

二、樣式屬性

(一)背景與前景

1.背景:

 

 

2.前景字體:

 

 

(二)邊界和邊框

border(表格邊框、樣式等)、margin(表外間距)。 padding(內容與單元格間距)。

 

 

(三)列表與方塊

widthheight、(topbottom   連結的

style

  a:link 超連結被點前狀態

  a:visited 超連結點擊後狀態

  a:hover 懸停在超連結時

  a:active 點選超連結時

  在定義這些狀態時,有一個順序l v h a

 

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn