萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 樣式表CSS簡明教程
樣式表CSS簡明教程
樣式表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模式下，切記切記，否則無效。
