樣式表CSS簡明教程

來源:互聯網
上載者:User

 樣式表CSS在網頁中佔著極重要的地位,它的使用一直是熱門討論的話題。CSS是Cascading Style Sheet的簡寫,譯為“層疊樣式表單”。CSS幾乎可以定義所有的網頁元素,CSS雖然功能強大,但平時我們用到的是很少的,最常見的有:定義字型大小(用CSS定義的字型大小不會瀏覽器的字型設定而改變)、去掉超鏈底線、超連結變色等等。下面詳細、簡練地講如何使用CSS。

1.CSS加在什麼位置?編輯CSS時候,強烈建議使用記事本之類的文本編輯工具開啟你的網頁代碼。找到<head>和</head>,在<head>和</head>之間加入這句,<STYLE></STYLE>,然後所有的樣式表都定義在<STYLE>和</STYLE>之間。

有很多網站喜歡把樣式表寫成一個CSS檔案,然後所有檔案都指向這裡來調用它。我個人不喜歡這樣做,因為每頁的CSS都不一樣,這樣做的缺點還有,當由於網速慢、或伺服器負擔重CSS檔案串連不上時,網頁就變得很亂。直接把CSS嵌在網頁中,是比較明智的做法。如果你的許多網頁幾乎完全一樣,堅持想使用CSS檔案,可使用這句<link href=***.css rel=stylesheet>來串連CSS檔案。

執行個體1:<STYLE>td{font-size:9pt;line-height:150%}</STYLE>這句表示網頁的字型大小為9磅字,行距150%,td是“儲存格”元素,這句也就是對儲存格內的字型起作用。這裡的<style>後面的td,表示選擇符,網頁內所有的td元素都會起作用。這些選擇符可以是所有的html標記,例如p、table、hr等等,只有少數的br除外。

執行個體2:<STYLE>a{color:FF0000}input{font-size:9pt}</STYLE>表示超連結都為紅色,單行文字框的字型是9磅。

2.CSS作用很大的一方面就是可以用來大量減少網頁代碼,從而為網頁減肥,原理就是在網頁中自訂樣式表的選擇符,然後在網頁中大量引用這些選擇符。目前大部分網站都是使用class來引用的。

CSS中,class和id的作用是完全一樣的,“class”單詞比“id”多3個字母。id的使用方法,在網頁<STYLE>和</STYLE>之間定義選擇符名,選擇符名前加#,這些選擇符名可以是字母或數字、或組合,然後在網頁的元素中使用id=**來引用它。

執行個體3:<STYLE>#8{color:000080}#p2{margin-left:20}#14{font-size:14pt}</STYLE>,然後在網頁使用這句引用它:<a id=8>黑藍色</a>,<a id=14>14磅的字</a>。<p id=p2>段落……

也就是說,<a id=8>黑藍色的字</a>等價於<a style=color:000080>黑藍色的字</a>;<a id=14>14磅的字</a>等價於<a style=font-size:14pt>14磅的字</a>,以此類推。這裡的介紹可能有點不太好理解,你可以多實踐。

注意:在一定條件下,使用id來引用可能不起作用或報錯、或與javascript的id發生衝突,這種情況下,你可以使用class來引用。class的使用方法與id一樣,所不同的是:在網頁的<STYLE>和</STYLE>之間定義選擇符名,名前加.(即點)。例如<STYLE>.a1{color:FF0000}</STYLE>,然後用class=a1引用它。

3.樣式表文法。樣式表的項和它的值應該用冒號串連,例如color:FF00000。樣式表也可直接嵌在段落當中,而不用class或id引用,例如<a style=font-size:12pt>12磅字</a>。也就是使用<* style=*:*>的文法。

4.小技巧。可根據需要靈活掌握,同一個選擇符名可以多次給它定義,也可以多個選擇符名定義同一句。例如<style>#a1{color:FF0000}#a1{font-size:9pt}</style>,它等效於#a1{color:FF0000;font-size:9pt}。多個選擇符名定義同一句的方法是,各選擇符名之間加逗號,例如<style>#a1,#b1{color:FF0000}#b1{font-size:9pt}</style>這句等效於#a1{color:FF0000}#b1{color:FF0000;font-size:9pt}。可能這裡不太好理解,你只要自己稍微實踐一下就可以靈活自己定義了。

5.樣式表手冊。下面列舉最常用的樣式表語句:

1)color (顏色,例如FF0000代表紅色,000000代表黑色……)

2)font-size (字型大小)

3)font-family (字型類型)

4)width和height (寬度和高度)

5)line-height (段落行距,建議使用百分比的形式,例如150%)

6)margin-top表示段前;margin-bottom表示段後。margin-left表示整個段落向右縮排,margin-right表示段落右邊距離右邊的邊框的距離。例如這句<p style=margin-top:30;margin-left:20;margin-right:20>。而且也可直接定義在圖片中,例如<img src=**.jpg align=right style=margin-right:9>表示這張圖片向靠右對齊,並且圖片再向左移動9像素。

7)text-align (段落的對齊,例如left、center、right)

8)background-color (背景顏色)

9)position:absolute;top:30;left:50 表示絕對位置(DW中的層)

總之,最常用的就是以上這幾種了,需要多多實踐。

6.最常用的樣式表代碼執行個體。

執行個體4:去掉超連結底線,<style>a{TEXT-DECORATION:none}</style>

執行個體5:超連結變色,<style>a{COLOR:000000}a:hover{COLOR:FF0000}</style>

執行個體6:超連結變色且去掉底線,<style>a{TEXT-DECORATION:none;COLOR:000000}a:hover{COLOR:FF0000}</style>

執行個體7:超連結變色且滑鼠停在超連結上有底線,滑鼠離開底線消失,<style>a{color:000000;TEXT-DECORATION:none}a:hover{color:FF0000;TEXT-DECORATION:underline}</style>

執行個體8,請再翻回頭執行個體1:<STYLE>td{font-size:9pt;line-height:150%}</STYLE>,這句可以讓你網頁的字型擂打不動,不隨IE瀏覽器的“查看→文字大小”的設定而改變。

如果您需要從網頁中複製代碼到FP或DW中,複製請注意:一定要先從這裡複製到記事本,然後再從記事本複製到FP或DW的html模式下,切記切記,否則無效。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.