樣式表CSS簡明教程

2023-04-24 來源：萬能知識網(wǎng)

樣式表CSS簡明教程

導語：樣式表CSS在網(wǎng)頁中占著極重要的地位，它的使用一直是熱門討論的話題。下面的是百分網(wǎng)小編為大家搜集的樣式表CSS簡明教程，希望對大家能有所幫助。

(資料圖片)

CSS是Cascading Style Sheet的簡寫，譯為“層疊樣式表單”。CSS幾乎可以定義所有的網(wǎng)頁元素，CSS雖然功能強大，但平時我們用到的是很少的，最常見的有：定義字體大小(用CSS定義的字體大小不會瀏覽器的字體設置而改變)、去掉超鏈下劃線、超鏈接變色等等。下面詳細、簡練地講如何使用CSS。

1.CSS加在什么位置？編輯CSS時候，強烈建議使用記事本之類的文本編輯工具打開你的網(wǎng)頁代碼。找到和，在和之間加入這句，，然后所有的樣式表都定義在之間。

有很多網(wǎng)站喜歡把樣式表寫成一個CSS文件，然后所有文件都指向這里來調(diào)用它。我個人不喜歡這樣做，因為每頁的CSS都不一樣，這樣做的缺點還有，當由于網(wǎng)速慢、或服務器負擔重CSS文件連接不上時，網(wǎng)頁就變得很亂。直接把CSS嵌在網(wǎng)頁中，是比較明智的做法。如果你的許多網(wǎng)頁幾乎完全一樣，堅持想使用CSS文件，可使用這句來連接CSS文件。

實例1：這句表示網(wǎng)頁的字體大小為9磅字，行距150%，td是“單元格”元素，這句也就是對單元格內(nèi)的字體起作用。這里的表示超鏈接都為紅色，單行文本框的字體是9磅。

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

CSS中，class和id的作用是完全一樣的，“class”單詞比“id”多3個字母。id的使用方法，在網(wǎng)頁之間定義選擇符名，選擇符名前加#，這些選擇符名可以是字母或數(shù)字、或組合，然后在網(wǎng)頁的元素中使用id=**來引用它。

實例3：，然后在網(wǎng)頁使用這句引用它：黑藍色，14磅的字。

段落……

也就是說，黑藍色的字等價于黑藍色的字；14磅的字等價于14磅的字，以此類推。這里的"介紹可能有點不太好理解，你可以多實踐。

注意：在一定條件下，使用id來引用可能不起作用或報錯、或與javascript的id發(fā)生沖突，這種情況下，你可以使用class來引用。class的使用方法與id一樣，所不同的是：在網(wǎng)頁的之間定義選擇符名，名前加.(即點)。例如，然后用class=a1引用它。

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

4.小技巧。可根據(jù)需要靈活掌握，同一個選擇符名可以多次給它定義，也可以多個選擇符名定義同一句。例如，它等效于#a1{color:FF0000;font-size:9pt}。多個選擇符名定義同一句的方法是，各選擇符名之間加逗號，例如這句等效于#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表示段落右邊距離右邊的邊框的距離。例如這句

。而且也可直接定義在圖片中，例如表示這張圖片向右對齊，并且圖片再向左移動9像素。