樣式表CSS簡(jiǎn)明教程
2024-01-24 分類： 網(wǎng)站建設(shè)
樣式表CSS在網(wǎng)頁(yè)中占著極重要的地位，它的使用一直是熱門(mén)討論的話題。CSS是Cascading Style Sheet的簡(jiǎn)寫(xiě)，譯為“層疊樣式表單”。CSS幾乎可以定義所有的網(wǎng)頁(yè)元素，CSS雖然功能強(qiáng)大，但平時(shí)我們用到的是很少的，最常見(jiàn)的有：定義字體大小(用CSS定義的字體大小不會(huì)瀏覽器的字體設(shè)置而改變)、去掉超鏈下劃線、超鏈接變色等等。下面詳細(xì)、簡(jiǎn)練地講如何使用CSS。
1.CSS加在什么位置？編輯CSS時(shí)候，強(qiáng)烈建議使用記事本之類的文本編輯工具打開(kāi)你的網(wǎng)頁(yè)代碼。找到<head>和</head>，在<head>和</head>之間加入這句，<STYLE></STYLE>，然后所有的樣式表都定義在<STYLE>和</STYLE>之間。
有很多網(wǎng)站喜歡把樣式表寫(xiě)成一個(gè)CSS文件，然后所有文件都指向這里來(lái)調(diào)用它。我個(gè)人不喜歡這樣做，因?yàn)槊宽?yè)的CSS都不一樣，這樣做的缺點(diǎn)還有，當(dāng)由于網(wǎng)速慢、或服務(wù)器負(fù)擔(dān)重CSS文件連接不上時(shí)，網(wǎng)頁(yè)就變得很亂。直接把CSS嵌在網(wǎng)頁(yè)中，是比較明智的做法。如果你的許多網(wǎng)頁(yè)幾乎完全一樣，堅(jiān)持想使用CSS文件，可使用這句<link href=***.css rel=stylesheet>來(lái)連接CSS文件。
實(shí)例1：<STYLE>td{font-size:9pt;line-height:150%}</STYLE>這句表示網(wǎng)頁(yè)的字體大小為9磅字，行距150%，td是“單元格”元素，這句也就是對(duì)單元格內(nèi)的字體起作用。這里的<style>后面的td，表示選擇符，網(wǎng)頁(yè)內(nèi)所有的td元素都會(huì)起作用。這些選擇符可以是所有的html標(biāo)記，例如p、table、hr等等，只有少數(shù)的br除外。
實(shí)例2：<STYLE>a{color:FF0000}input{font-size:9pt}</STYLE>表示超鏈接都為紅色，單行文本框的字體是9磅。
2.CSS作用很大的一方面就是可以用來(lái)大量減少網(wǎng)頁(yè)代碼，從而為網(wǎng)頁(yè)減肥，原理就是在網(wǎng)頁(yè)中自定義樣式表的選擇符，然后在網(wǎng)頁(yè)中大量引用這些選擇符。目前大部分網(wǎng)站都是使用class來(lái)引用的。
CSS中，class和id的作用是完全一樣的，“class”單詞比“id”多3個(gè)字母。id的使用方法，在網(wǎng)頁(yè)<STYLE>和</STYLE>之間定義選擇符名，選擇符名前加#，這些選擇符名可以是字母或數(shù)字、或組合，然后在網(wǎng)頁(yè)的元素中使用id=**來(lái)引用它。
實(shí)例3：<STYLE>#8{color:000080}#p2{margin-left:20}#14{font-size:14pt}</STYLE>，然后在網(wǎng)頁(yè)使用這句引用它：<a id=8>黑藍(lán)色</a>，<a id=14>14磅的字</a>。<p id=p2>段落……
也就是說(shuō)，<a id=8>黑藍(lán)色的字</a>等價(jià)于<a style=color:000080>黑藍(lán)色的字</a>；<a id=14>14磅的字</a>等價(jià)于<a style=font-size:14pt>14磅的字</a>，以此類推。這里的介紹可能有點(diǎn)不太好理解，你可以多實(shí)踐。
注意：在一定條件下，使用id來(lái)引用可能不起作用或報(bào)錯(cuò)、或與javascript的id發(fā)生沖突，這種情況下，你可以使用class來(lái)引用。class的使用方法與id一樣，所不同的是：在網(wǎng)頁(yè)的<STYLE>和</STYLE>之間定義選擇符名，名前加.(即點(diǎn))。例如<STYLE>.a1{color:FF0000}</STYLE>，然后用class=a1引用它。
3.樣式表語(yǔ)法。樣式表的項(xiàng)和它的值應(yīng)該用冒號(hào)連接，例如color:FF00000。樣式表也可直接嵌在段落當(dāng)中，而不用class或id引用，例如<a style=font-size:12pt>12磅字</a>。也就是使用<* style=*:*>的語(yǔ)法。
4.小技巧?？筛鶕?jù)需要靈活掌握，同一個(gè)選擇符名可以多次給它定義，也可以多個(gè)選擇符名定義同一句。例如<style>#a1{color:FF0000}#a1{font-size:9pt}</style>，它等效于#a1{color:FF0000;font-size:9pt}。多個(gè)選擇符名定義同一句的方法是，各選擇符名之間加逗號(hào)，例如<style>#a1,#b1{color:FF0000}#b1{font-size:9pt}</style>這句等效于#a1{color:FF0000}#b1{color:FF0000;font-size:9pt}?？赡苓@里不太好理解，你只要自己稍微實(shí)踐一下就可以靈活自己定義了。
5.樣式表手冊(cè)。下面列舉最常用的樣式表語(yǔ)句：
1)color (顏色，例如FF0000代表紅色，000000代表黑色……)
2)font-size (字體大小)
3)font-family (字體類型)
4)width和height (寬度和高度)
5)line-height (段落行距，建議使用百分比的形式，例如150%)
6)margin-top表示段前；margin-bottom表示段后。margin-left表示整個(gè)段落向右縮進(jìn)，margin-right表示段落右邊距離右邊的邊框的距離。例如這句<p style=margin-top:30;margin-left:20;margin-right:20>。而且也可直接定義在圖片中，例如<img src=**.jpg align=right style=margin-right:9>表示這張圖片向右對(duì)齊，并且圖片再向左移動(dòng)9像素。
7)text-align (段落的對(duì)齊方式，例如left、center、right)
8)background-color (背景顏色)
9)position:absolute;top:30;left:50 表示絕對(duì)定位(DW中的層)
總之，最常用的就是以上這幾種了，需要多多實(shí)踐。
6.最常用的樣式表代碼實(shí)例。
實(shí)例4：去掉超鏈接下劃線，<style>a{TEXT-DECORATION:none}</style>
實(shí)例5：超鏈接變色，<style>a{COLOR:000000}a:hover{COLOR:FF0000}</style>
實(shí)例6：超鏈接變色且去掉下劃線，<style>a{TEXT-DECORATION:none;COLOR:000000}a:hover{COLOR:FF0000}</style>
實(shí)例7：超鏈接變色且鼠標(biāo)停在超鏈接上有下劃線，鼠標(biāo)離開(kāi)下劃線消失，<style>a{color:000000;TEXT-DECORATION:none}a:hover{color:FF0000;TEXT-DECORATION:underline}</style>
實(shí)例8，請(qǐng)?jiān)俜仡^實(shí)例1：<STYLE>td{font-size:9pt;line-height:150%}</STYLE>，這句可以讓你網(wǎng)頁(yè)的字體擂打不動(dòng)，不隨IE瀏覽器的“查看→文字大小”的設(shè)置而改變。
如果您需要從網(wǎng)頁(yè)中復(fù)制代碼到FP或DW中，復(fù)制請(qǐng)注意：一定要先從這里復(fù)制到記事本，然后再?gòu)挠浭卤緩?fù)制到FP或DW的html模式下，切記切記，否則無(wú)效。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
1.CSS加在什么位置？編輯CSS時(shí)候，強(qiáng)烈建議使用記事本之類的文本編輯工具打開(kāi)你的網(wǎng)頁(yè)代碼。找到<head>和</head>，在<head>和</head>之間加入這句，<STYLE></STYLE>，然后所有的樣式表都定義在<STYLE>和</STYLE>之間。
有很多網(wǎng)站喜歡把樣式表寫(xiě)成一個(gè)CSS文件，然后所有文件都指向這里來(lái)調(diào)用它。我個(gè)人不喜歡這樣做，因?yàn)槊宽?yè)的CSS都不一樣，這樣做的缺點(diǎn)還有，當(dāng)由于網(wǎng)速慢、或服務(wù)器負(fù)擔(dān)重CSS文件連接不上時(shí)，網(wǎng)頁(yè)就變得很亂。直接把CSS嵌在網(wǎng)頁(yè)中，是比較明智的做法。如果你的許多網(wǎng)頁(yè)幾乎完全一樣，堅(jiān)持想使用CSS文件，可使用這句<link href=***.css rel=stylesheet>來(lái)連接CSS文件。
實(shí)例1：<STYLE>td{font-size:9pt;line-height:150%}</STYLE>這句表示網(wǎng)頁(yè)的字體大小為9磅字，行距150%，td是“單元格”元素，這句也就是對(duì)單元格內(nèi)的字體起作用。這里的<style>后面的td，表示選擇符，網(wǎng)頁(yè)內(nèi)所有的td元素都會(huì)起作用。這些選擇符可以是所有的html標(biāo)記，例如p、table、hr等等，只有少數(shù)的br除外。
實(shí)例2：<STYLE>a{color:FF0000}input{font-size:9pt}</STYLE>表示超鏈接都為紅色，單行文本框的字體是9磅。
2.CSS作用很大的一方面就是可以用來(lái)大量減少網(wǎng)頁(yè)代碼，從而為網(wǎng)頁(yè)減肥，原理就是在網(wǎng)頁(yè)中自定義樣式表的選擇符，然后在網(wǎng)頁(yè)中大量引用這些選擇符。目前大部分網(wǎng)站都是使用class來(lái)引用的。
CSS中，class和id的作用是完全一樣的，“class”單詞比“id”多3個(gè)字母。id的使用方法，在網(wǎng)頁(yè)<STYLE>和</STYLE>之間定義選擇符名，選擇符名前加#，這些選擇符名可以是字母或數(shù)字、或組合，然后在網(wǎng)頁(yè)的元素中使用id=**來(lái)引用它。
實(shí)例3：<STYLE>#8{color:000080}#p2{margin-left:20}#14{font-size:14pt}</STYLE>，然后在網(wǎng)頁(yè)使用這句引用它：<a id=8>黑藍(lán)色</a>，<a id=14>14磅的字</a>。<p id=p2>段落……
也就是說(shuō)，<a id=8>黑藍(lán)色的字</a>等價(jià)于<a style=color:000080>黑藍(lán)色的字</a>；<a id=14>14磅的字</a>等價(jià)于<a style=font-size:14pt>14磅的字</a>，以此類推。這里的介紹可能有點(diǎn)不太好理解，你可以多實(shí)踐。
注意：在一定條件下，使用id來(lái)引用可能不起作用或報(bào)錯(cuò)、或與javascript的id發(fā)生沖突，這種情況下，你可以使用class來(lái)引用。class的使用方法與id一樣，所不同的是：在網(wǎng)頁(yè)的<STYLE>和</STYLE>之間定義選擇符名，名前加.(即點(diǎn))。例如<STYLE>.a1{color:FF0000}</STYLE>，然后用class=a1引用它。
3.樣式表語(yǔ)法。樣式表的項(xiàng)和它的值應(yīng)該用冒號(hào)連接，例如color:FF00000。樣式表也可直接嵌在段落當(dāng)中，而不用class或id引用，例如<a style=font-size:12pt>12磅字</a>。也就是使用<* style=*:*>的語(yǔ)法。
4.小技巧?？筛鶕?jù)需要靈活掌握，同一個(gè)選擇符名可以多次給它定義，也可以多個(gè)選擇符名定義同一句。例如<style>#a1{color:FF0000}#a1{font-size:9pt}</style>，它等效于#a1{color:FF0000;font-size:9pt}。多個(gè)選擇符名定義同一句的方法是，各選擇符名之間加逗號(hào)，例如<style>#a1,#b1{color:FF0000}#b1{font-size:9pt}</style>這句等效于#a1{color:FF0000}#b1{color:FF0000;font-size:9pt}?？赡苓@里不太好理解，你只要自己稍微實(shí)踐一下就可以靈活自己定義了。
5.樣式表手冊(cè)。下面列舉最常用的樣式表語(yǔ)句：
1)color (顏色，例如FF0000代表紅色，000000代表黑色……)
2)font-size (字體大小)
3)font-family (字體類型)
4)width和height (寬度和高度)
5)line-height (段落行距，建議使用百分比的形式，例如150%)
6)margin-top表示段前；margin-bottom表示段后。margin-left表示整個(gè)段落向右縮進(jìn)，margin-right表示段落右邊距離右邊的邊框的距離。例如這句<p style=margin-top:30;margin-left:20;margin-right:20>。而且也可直接定義在圖片中，例如<img src=**.jpg align=right style=margin-right:9>表示這張圖片向右對(duì)齊，并且圖片再向左移動(dòng)9像素。
7)text-align (段落的對(duì)齊方式，例如left、center、right)
8)background-color (背景顏色)
9)position:absolute;top:30;left:50 表示絕對(duì)定位(DW中的層)
總之，最常用的就是以上這幾種了，需要多多實(shí)踐。
6.最常用的樣式表代碼實(shí)例。
實(shí)例4：去掉超鏈接下劃線，<style>a{TEXT-DECORATION:none}</style>
實(shí)例5：超鏈接變色，<style>a{COLOR:000000}a:hover{COLOR:FF0000}</style>
實(shí)例6：超鏈接變色且去掉下劃線，<style>a{TEXT-DECORATION:none;COLOR:000000}a:hover{COLOR:FF0000}</style>
實(shí)例7：超鏈接變色且鼠標(biāo)停在超鏈接上有下劃線，鼠標(biāo)離開(kāi)下劃線消失，<style>a{color:000000;TEXT-DECORATION:none}a:hover{color:FF0000;TEXT-DECORATION:underline}</style>
實(shí)例8，請(qǐng)?jiān)俜仡^實(shí)例1：<STYLE>td{font-size:9pt;line-height:150%}</STYLE>，這句可以讓你網(wǎng)頁(yè)的字體擂打不動(dòng)，不隨IE瀏覽器的“查看→文字大小”的設(shè)置而改變。
如果您需要從網(wǎng)頁(yè)中復(fù)制代碼到FP或DW中，復(fù)制請(qǐng)注意：一定要先從這里復(fù)制到記事本，然后再?gòu)挠浭卤緩?fù)制到FP或DW的html模式下，切記切記，否則無(wú)效。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
網(wǎng)站標(biāo)題：樣式表CSS簡(jiǎn)明教程
網(wǎng)站路徑：http://www.rwnh.cn/news37/315187.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、品牌網(wǎng)站建設(shè)、、搜索引擎優(yōu)化、商城網(wǎng)站、微信小程序
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 什么是裸機(jī)服務(wù)器？裸機(jī)服務(wù)器的好處 2024-01-24
- 高端品牌網(wǎng)站定制你需要注意的幾個(gè)要點(diǎn)(櫥柜頂級(jí)高端定制品牌) 2024-01-24
- p2p系統(tǒng)開(kāi)發(fā)網(wǎng)站建設(shè)有哪些功能？ 2024-01-24
- 成都建設(shè)企業(yè)網(wǎng)站前期需要準(zhǔn)備哪些規(guī)劃？ 2024-01-24
- 成都網(wǎng)站建設(shè)過(guò)程中遇到的問(wèn)題及流程 2024-01-24
- 成都微信小程序開(kāi)發(fā)定制為什么會(huì)這么受歡迎？有什么優(yōu)點(diǎn)？ 2024-01-24
- 想學(xué)平面設(shè)計(jì)又沒(méi)時(shí)間怎么辦？戳這里，選擇線上課程隨時(shí)學(xué) 2024-01-24
- 高防ddos服務(wù)器-如何防止慢速DDoS攻擊？ 2024-01-24
- 網(wǎng)站運(yùn)營(yíng)過(guò)程中應(yīng)該注意的幾點(diǎn) 2024-01-24
- 新環(huán)境下做網(wǎng)站優(yōu)化也需要新思維！ 2024-01-24
- 六元素講解成都網(wǎng)站建設(shè)需要注重的地方 2024-01-24
- 90%的成都小程序開(kāi)發(fā)公司都有可能死掉怎么成為活下來(lái)的10%？ 2024-01-24
- 服裝行業(yè)為什么適合微信小程序開(kāi)發(fā)呢？ 2024-01-24
- 公共云主機(jī)有哪些優(yōu)勢(shì)？誰(shuí)應(yīng)該選擇公共云主機(jī)？ 2024-01-24
- 網(wǎng)站建成后如何管理 2024-01-24
- 成都英文網(wǎng)站制作那個(gè)比較好 2024-01-24
- 美國(guó)網(wǎng)站服務(wù)器掉包的原因 2024-01-24
- 專用服務(wù)器和云服務(wù)器的配置以及五個(gè)比較的領(lǐng)域 2024-01-24
- 做一個(gè)外貿(mào)獨(dú)立站要多少錢(qián) 2024-01-24