用CSS美化你的網(wǎng)頁(yè)
2024-01-25 分類(lèi)： 網(wǎng)站建設(shè)
現(xiàn)在我們?cè)O(shè)計(jì)網(wǎng)頁(yè)已經(jīng)離不開(kāi)CSS，使用CSS可以美化我們的網(wǎng)頁(yè)，這已經(jīng)是大家所共知的了！
CSS是“Cascading Style Sheets”的縮寫(xiě)，譯為樣式表。HTML允許我們利用CSS來(lái)實(shí)現(xiàn)風(fēng)格的顯示，舉個(gè)簡(jiǎn)單的例子：我們可以使用<b>標(biāo)簽來(lái)使頁(yè)面的字體加粗。如：
<b>網(wǎng)頁(yè)教學(xué)網(wǎng)加粗字體顯示</b>
如果你使我們使字體顯示為紅色、宋體、并且加粗顯示我們可以使用下面的代碼：
<font color="#FF0000" face="宋體"><strong>網(wǎng)頁(yè)教學(xué)網(wǎng)字體演示</strong></font>
這時(shí)我們觀察上面的代碼時(shí)我們發(fā)現(xiàn)網(wǎng)頁(yè)中的元素比較多了，當(dāng)我們自己編寫(xiě)時(shí)可能顯得很凌亂，這時(shí)我們?cè)撓胗袥](méi)有一種方法使用的代碼比較少，而同時(shí)達(dá)到上面顯示的要求呢？回答是肯定的，這時(shí)我們就要用到CSS了。用CSS設(shè)置一種風(fēng)格，設(shè)置好我們需要的特性，給它命名一個(gè)唯一的名字，然后保存放在網(wǎng)站的其它地方，然后我們?cè)诰帉?xiě)HTML時(shí)引用剛才的風(fēng)格的名字就可以達(dá)到這種要求。如：
<p class="myNewStyle">網(wǎng)頁(yè)教學(xué)網(wǎng)的 CSS 風(fēng)格文本</p>
然后在網(wǎng)頁(yè)的頭部<head></head>之間加上設(shè)置風(fēng)格的代碼，如：
<style type="text/css">
<!--
.myNewStyle {
font-family: 宋體;
font-weight: bold;
color: #FF0000;
}
-->
</style>
如果你想使上面的CSS控制你的網(wǎng)頁(yè)的每個(gè)頁(yè)面，那么我們復(fù)制粘貼上面的代碼就可以了，如果覺(jué)得比較麻煩或者說(shuō)你覺(jué)得網(wǎng)頁(yè)的頭部很亂的話，我們也可以把CSS設(shè)置的風(fēng)格單獨(dú)保存為一個(gè)文件(文件的擴(kuò)展名為.CSS)，之后我們?cè)贖TML直接引用那個(gè)保存的文件就可以引用樣式了。如你保存的文件的名字為：myFirstStyleSheet.css，那么我們可以使用下面代碼來(lái)引用：
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">
注意：上述代碼要放到HTML頁(yè)面的<head>區(qū)域內(nèi)。
至于CSS的設(shè)置就在這里不提了，我們可以專(zhuān)門(mén)打開(kāi)一個(gè)記事本，或使用專(zhuān)門(mén)的設(shè)計(jì)工具如DW等。
在編輯CSS注意不要再加上如下代碼了：
<style type="text/css">
</style>
我們?cè)贑SS文件中只要設(shè)置CSS風(fēng)格就行了，如：
.myNewStyle {
font-family: 宋體;
font-weight: bold;
font-size: 8pt;
color: #FF0000;
}
.my2ndNewStyle {
font-family: 宋體;
font-weight: bold;
font-size: 9pt;
color: #FF0000;
}
.my3rdNewStyle {
font-family: 宋體;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
然后直接保存為擴(kuò)展名為css的文件就行了(如：myFirstStyleSheet.css)
最后我們?cè)贖TML代碼的BODY區(qū)域內(nèi)加入如下代碼就可以引用我們的設(shè)置了：
<p class="myNewStyle">網(wǎng)頁(yè)教學(xué)網(wǎng)CSS字體顯示1</p>
<h2 class="my2ndNewStyle">網(wǎng)頁(yè)教學(xué)網(wǎng)CSS字體顯示2</h2>
<h3 class="my3rdNewStyle">網(wǎng)頁(yè)教學(xué)網(wǎng)CSS字體顯示3</h3>
我們?cè)谏厦娴拇a中用到了<h2>標(biāo)簽，我們?cè)贑SS中也可以直接對(duì)標(biāo)簽進(jìn)行風(fēng)格的定義：
h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }
然后我們就可以直接在代碼中加入：
<h1>網(wǎng)頁(yè)教學(xué)網(wǎng)CSS字體顯示2</h1>
那么同樣按我們?cè)O(shè)置的風(fēng)格來(lái)顯示。
我們也可以對(duì)其它的標(biāo)簽設(shè)置風(fēng)格，舉個(gè)例子：我們對(duì)整個(gè)頁(yè)面的邊框進(jìn)行設(shè)置：
body { margin-left: 15%; margin-right: 15%; }
我們也可以對(duì)DIV標(biāo)簽進(jìn)行設(shè)置：
div {
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
}
在HTML代碼中只要在 <div>和</div>之間的內(nèi)容將都按上述的風(fēng)格進(jìn)行顯示。
最后在舉個(gè)例子，關(guān)于超級(jí)連接的變色：
.a:link { color: rgb(0, 0, 153) } /* 未訪問(wèn)連接的情況 */
.a:visited { color: rgb(153, 0, 153) } /* 訪問(wèn)連接之后的連接 */
.a:hover { color: rgb(0, 96, 255) } /* 鼠標(biāo)盤(pán)旋的狀態(tài) */
.a:active { color: rgb(255, 0, 102) } /* 連接激活的狀態(tài) */
然后在HTML代碼中加入：
<a href="http://www.rwnh.cn">網(wǎng)頁(yè)教學(xué)網(wǎng)</a>
上述代碼可以按我們?cè)O(shè)置的風(fēng)格顯示。
最后給大家擴(kuò)展一下，因?yàn)樽罱傆芯W(wǎng)友在論壇中問(wèn)，如何使在同一頁(yè)面的連接不同呢？我們接最后這個(gè)例子給大家介紹一下。這時(shí)我們需要設(shè)置CSS的另一種風(fēng)格：
.a1:link { COLOR: #ff0000; TEXT-DECORATION: underline }/* 紅色、有下劃線*/
.a1:hover { COLOR: #ff0000; TEXT-DECORATION: underline }
.a1:visited { COLOR: #000000; TEXT-DECORATION: none }/* 黑色、無(wú)下劃線*/
.a1:active { COLOR: #0000ff; TEXT-DECORATION: none }
然后在HTML代碼中加入：
<a href="http://www.rwnh.cn">網(wǎng)頁(yè)教學(xué)網(wǎng)</a>
<a href="http://www.rwnh.cn" class="a1">網(wǎng)頁(yè)教學(xué)網(wǎng)</a>
就會(huì)出現(xiàn)兩種連接效果了。
CSS在我們?cè)O(shè)置網(wǎng)頁(yè)時(shí)功能是非常強(qiáng)大的，希望大家在制作網(wǎng)頁(yè)時(shí)要熟練的運(yùn)用，以使我們的頁(yè)面更加漂亮和統(tǒng)一。在本站有好多關(guān)于CSS的教材希望大家好好研究吧！希望這篇文章能起到畫(huà)龍點(diǎn)睛的作用。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
CSS是“Cascading Style Sheets”的縮寫(xiě)，譯為樣式表。HTML允許我們利用CSS來(lái)實(shí)現(xiàn)風(fēng)格的顯示，舉個(gè)簡(jiǎn)單的例子：我們可以使用<b>標(biāo)簽來(lái)使頁(yè)面的字體加粗。如：
<b>網(wǎng)頁(yè)教學(xué)網(wǎng)加粗字體顯示</b>
如果你使我們使字體顯示為紅色、宋體、并且加粗顯示我們可以使用下面的代碼：
<font color="#FF0000" face="宋體"><strong>網(wǎng)頁(yè)教學(xué)網(wǎng)字體演示</strong></font>
這時(shí)我們觀察上面的代碼時(shí)我們發(fā)現(xiàn)網(wǎng)頁(yè)中的元素比較多了，當(dāng)我們自己編寫(xiě)時(shí)可能顯得很凌亂，這時(shí)我們?cè)撓胗袥](méi)有一種方法使用的代碼比較少，而同時(shí)達(dá)到上面顯示的要求呢？回答是肯定的，這時(shí)我們就要用到CSS了。用CSS設(shè)置一種風(fēng)格，設(shè)置好我們需要的特性，給它命名一個(gè)唯一的名字，然后保存放在網(wǎng)站的其它地方，然后我們?cè)诰帉?xiě)HTML時(shí)引用剛才的風(fēng)格的名字就可以達(dá)到這種要求。如：
<p class="myNewStyle">網(wǎng)頁(yè)教學(xué)網(wǎng)的 CSS 風(fēng)格文本</p>
然后在網(wǎng)頁(yè)的頭部<head></head>之間加上設(shè)置風(fēng)格的代碼，如：
<style type="text/css">
<!--
.myNewStyle {
font-family: 宋體;
font-weight: bold;
color: #FF0000;
}
-->
</style>
如果你想使上面的CSS控制你的網(wǎng)頁(yè)的每個(gè)頁(yè)面，那么我們復(fù)制粘貼上面的代碼就可以了，如果覺(jué)得比較麻煩或者說(shuō)你覺(jué)得網(wǎng)頁(yè)的頭部很亂的話，我們也可以把CSS設(shè)置的風(fēng)格單獨(dú)保存為一個(gè)文件(文件的擴(kuò)展名為.CSS)，之后我們?cè)贖TML直接引用那個(gè)保存的文件就可以引用樣式了。如你保存的文件的名字為：myFirstStyleSheet.css，那么我們可以使用下面代碼來(lái)引用：
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">
注意：上述代碼要放到HTML頁(yè)面的<head>區(qū)域內(nèi)。
至于CSS的設(shè)置就在這里不提了，我們可以專(zhuān)門(mén)打開(kāi)一個(gè)記事本，或使用專(zhuān)門(mén)的設(shè)計(jì)工具如DW等。
在編輯CSS注意不要再加上如下代碼了：
<style type="text/css">
</style>
我們?cè)贑SS文件中只要設(shè)置CSS風(fēng)格就行了，如：
.myNewStyle {
font-family: 宋體;
font-weight: bold;
font-size: 8pt;
color: #FF0000;
}
.my2ndNewStyle {
font-family: 宋體;
font-weight: bold;
font-size: 9pt;
color: #FF0000;
}
.my3rdNewStyle {
font-family: 宋體;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
然后直接保存為擴(kuò)展名為css的文件就行了(如：myFirstStyleSheet.css)
最后我們?cè)贖TML代碼的BODY區(qū)域內(nèi)加入如下代碼就可以引用我們的設(shè)置了：
<p class="myNewStyle">網(wǎng)頁(yè)教學(xué)網(wǎng)CSS字體顯示1</p>
<h2 class="my2ndNewStyle">網(wǎng)頁(yè)教學(xué)網(wǎng)CSS字體顯示2</h2>
<h3 class="my3rdNewStyle">網(wǎng)頁(yè)教學(xué)網(wǎng)CSS字體顯示3</h3>
我們?cè)谏厦娴拇a中用到了<h2>標(biāo)簽，我們?cè)贑SS中也可以直接對(duì)標(biāo)簽進(jìn)行風(fēng)格的定義：
h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }
然后我們就可以直接在代碼中加入：
<h1>網(wǎng)頁(yè)教學(xué)網(wǎng)CSS字體顯示2</h1>
那么同樣按我們?cè)O(shè)置的風(fēng)格來(lái)顯示。
我們也可以對(duì)其它的標(biāo)簽設(shè)置風(fēng)格，舉個(gè)例子：我們對(duì)整個(gè)頁(yè)面的邊框進(jìn)行設(shè)置：
body { margin-left: 15%; margin-right: 15%; }
我們也可以對(duì)DIV標(biāo)簽進(jìn)行設(shè)置：
div {
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
}
在HTML代碼中只要在 <div>和</div>之間的內(nèi)容將都按上述的風(fēng)格進(jìn)行顯示。
最后在舉個(gè)例子，關(guān)于超級(jí)連接的變色：
.a:link { color: rgb(0, 0, 153) } /* 未訪問(wèn)連接的情況 */
.a:visited { color: rgb(153, 0, 153) } /* 訪問(wèn)連接之后的連接 */
.a:hover { color: rgb(0, 96, 255) } /* 鼠標(biāo)盤(pán)旋的狀態(tài) */
.a:active { color: rgb(255, 0, 102) } /* 連接激活的狀態(tài) */
然后在HTML代碼中加入：
<a href="http://www.rwnh.cn">網(wǎng)頁(yè)教學(xué)網(wǎng)</a>
上述代碼可以按我們?cè)O(shè)置的風(fēng)格顯示。
最后給大家擴(kuò)展一下，因?yàn)樽罱傆芯W(wǎng)友在論壇中問(wèn)，如何使在同一頁(yè)面的連接不同呢？我們接最后這個(gè)例子給大家介紹一下。這時(shí)我們需要設(shè)置CSS的另一種風(fēng)格：
.a1:link { COLOR: #ff0000; TEXT-DECORATION: underline }/* 紅色、有下劃線*/
.a1:hover { COLOR: #ff0000; TEXT-DECORATION: underline }
.a1:visited { COLOR: #000000; TEXT-DECORATION: none }/* 黑色、無(wú)下劃線*/
.a1:active { COLOR: #0000ff; TEXT-DECORATION: none }
然后在HTML代碼中加入：
<a href="http://www.rwnh.cn">網(wǎng)頁(yè)教學(xué)網(wǎng)</a>
<a href="http://www.rwnh.cn" class="a1">網(wǎng)頁(yè)教學(xué)網(wǎng)</a>
就會(huì)出現(xiàn)兩種連接效果了。
CSS在我們?cè)O(shè)置網(wǎng)頁(yè)時(shí)功能是非常強(qiáng)大的，希望大家在制作網(wǎng)頁(yè)時(shí)要熟練的運(yùn)用，以使我們的頁(yè)面更加漂亮和統(tǒng)一。在本站有好多關(guān)于CSS的教材希望大家好好研究吧！希望這篇文章能起到畫(huà)龍點(diǎn)睛的作用。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！
網(wǎng)站題目：用CSS美化你的網(wǎng)頁(yè)
文章位置：http://www.rwnh.cn/news7/315457.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、企業(yè)建站、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)公司
聲明：本網(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)容
- 成都住房和建設(shè)局網(wǎng)站 2024-01-25
- 成都網(wǎng)站建設(shè)的水準(zhǔn)怎么樣反映在哪兒 2024-01-25
- 網(wǎng)站優(yōu)化作用是什么 2024-01-25
- 即刻在線科技×南京公共關(guān)系協(xié)會(huì)協(xié)會(huì)數(shù)字化全場(chǎng)景探索 2024-01-25
- 服務(wù)器托管商如何維護(hù)服務(wù)器？|成都服務(wù)器托管 2024-01-25
- 簡(jiǎn)潔網(wǎng)頁(yè)設(shè)計(jì)你需知的6點(diǎn)技巧 2024-01-25
- 分享PDCA循環(huán)在日常工作中的運(yùn)用 2024-01-25
- 網(wǎng)站建設(shè)對(duì)企業(yè)品牌形象展示可以起到哪些作用？(企業(yè)商城網(wǎng)站建設(shè)價(jià)格) 2024-01-25
- 如何考慮老年用戶群的界面適合閱讀性 2024-01-25
- 什么是WEB應(yīng)用程序防火墻？它的類(lèi)型有哪些？ 2024-01-25
- 淺談互聯(lián)網(wǎng)時(shí)代，中小企業(yè)如何用好網(wǎng)絡(luò)營(yíng)銷(xiāo) 2024-01-25
- 什么是客戶端渲染和服務(wù)器端渲染？ 2024-01-25
- 網(wǎng)購(gòu)竟是沖動(dòng)惹的禍 2024-01-25
- 淺析網(wǎng)站建設(shè)要注意的幾個(gè)方面 2024-01-25
- 創(chuàng)新互聯(lián)教你原創(chuàng)文章的秘籍 2024-01-25
- 成都做網(wǎng)站：做一個(gè)網(wǎng)站要多少錢(qián) 2024-01-25
- 小程序的未來(lái)發(fā)展如何呢? 2024-01-25
- 高端網(wǎng)站開(kāi)發(fā)需要注意的幾個(gè)關(guān)鍵點(diǎn) 2024-01-25
- 營(yíng)銷(xiāo)型網(wǎng)絡(luò)建設(shè)如何做好SEO優(yōu)化的技巧 2024-01-25