用CSS美化你的網(wǎng)頁
2024-01-25 分類： 網(wǎng)站建設(shè)
現(xiàn)在我們設(shè)計網(wǎng)頁已經(jīng)離不開CSS，使用CSS可以美化我們的網(wǎng)頁，這已經(jīng)是大家所共知的了！
CSS是“Cascading Style Sheets”的縮寫，譯為樣式表。HTML允許我們利用CSS來實現(xiàn)風(fēng)格的顯示，舉個簡單的例子：我們可以使用<b>標(biāo)簽來使頁面的字體加粗。如：
<b>網(wǎng)頁教學(xué)網(wǎng)加粗字體顯示</b>
如果你使我們使字體顯示為紅色、宋體、并且加粗顯示我們可以使用下面的代碼：
<font color="#FF0000" face="宋體"><strong>網(wǎng)頁教學(xué)網(wǎng)字體演示</strong></font>
這時我們觀察上面的代碼時我們發(fā)現(xiàn)網(wǎng)頁中的元素比較多了，當(dāng)我們自己編寫時可能顯得很凌亂，這時我們該想有沒有一種方法使用的代碼比較少，而同時達(dá)到上面顯示的要求呢？回答是肯定的，這時我們就要用到CSS了。用CSS設(shè)置一種風(fēng)格，設(shè)置好我們需要的特性，給它命名一個唯一的名字，然后保存放在網(wǎng)站的其它地方，然后我們在編寫HTML時引用剛才的風(fēng)格的名字就可以達(dá)到這種要求。如：
<p class="myNewStyle">網(wǎng)頁教學(xué)網(wǎng)的 CSS 風(fēng)格文本</p>
然后在網(wǎng)頁的頭部<head></head>之間加上設(shè)置風(fēng)格的代碼，如：
<style type="text/css">
<!--
.myNewStyle {
font-family: 宋體;
font-weight: bold;
color: #FF0000;
}
-->
</style>
如果你想使上面的CSS控制你的網(wǎng)頁的每個頁面，那么我們復(fù)制粘貼上面的代碼就可以了，如果覺得比較麻煩或者說你覺得網(wǎng)頁的頭部很亂的話，我們也可以把CSS設(shè)置的風(fēng)格單獨保存為一個文件(文件的擴(kuò)展名為.CSS)，之后我們在HTML直接引用那個保存的文件就可以引用樣式了。如你保存的文件的名字為：myFirstStyleSheet.css，那么我們可以使用下面代碼來引用：
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">
注意：上述代碼要放到HTML頁面的<head>區(qū)域內(nèi)。
至于CSS的設(shè)置就在這里不提了，我們可以專門打開一個記事本，或使用專門的設(shè)計工具如DW等。
在編輯CSS注意不要再加上如下代碼了：
<style type="text/css">
</style>
我們在CSS文件中只要設(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)
最后我們在HTML代碼的BODY區(qū)域內(nèi)加入如下代碼就可以引用我們的設(shè)置了：
<p class="myNewStyle">網(wǎng)頁教學(xué)網(wǎng)CSS字體顯示1</p>
<h2 class="my2ndNewStyle">網(wǎng)頁教學(xué)網(wǎng)CSS字體顯示2</h2>
<h3 class="my3rdNewStyle">網(wǎng)頁教學(xué)網(wǎng)CSS字體顯示3</h3>
我們在上面的代碼中用到了<h2>標(biāo)簽，我們在CSS中也可以直接對標(biāo)簽進(jìn)行風(fēng)格的定義：
h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }
然后我們就可以直接在代碼中加入：
<h1>網(wǎng)頁教學(xué)網(wǎng)CSS字體顯示2</h1>
那么同樣按我們設(shè)置的風(fēng)格來顯示。
我們也可以對其它的標(biāo)簽設(shè)置風(fēng)格，舉個例子：我們對整個頁面的邊框進(jìn)行設(shè)置：
body { margin-left: 15%; margin-right: 15%; }
我們也可以對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)行顯示。
最后在舉個例子，關(guān)于超級連接的變色：
.a:link { color: rgb(0, 0, 153) } /* 未訪問連接的情況 */
.a:visited { color: rgb(153, 0, 153) } /* 訪問連接之后的連接 */
.a:hover { color: rgb(0, 96, 255) } /* 鼠標(biāo)盤旋的狀態(tài) */
.a:active { color: rgb(255, 0, 102) } /* 連接激活的狀態(tài) */
然后在HTML代碼中加入：
<a href="http://www.muchs.cn">網(wǎng)頁教學(xué)網(wǎng)</a>
上述代碼可以按我們設(shè)置的風(fēng)格顯示。
最后給大家擴(kuò)展一下，因為最近總有網(wǎng)友在論壇中問，如何使在同一頁面的連接不同呢？我們接最后這個例子給大家介紹一下。這時我們需要設(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 }/* 黑色、無下劃線*/
.a1:active { COLOR: #0000ff; TEXT-DECORATION: none }
然后在HTML代碼中加入：
<a href="http://www.muchs.cn">網(wǎng)頁教學(xué)網(wǎng)</a>
<a href="http://www.muchs.cn" class="a1">網(wǎng)頁教學(xué)網(wǎng)</a>
就會出現(xiàn)兩種連接效果了。
CSS在我們設(shè)置網(wǎng)頁時功能是非常強(qiáng)大的，希望大家在制作網(wǎng)頁時要熟練的運用，以使我們的頁面更加漂亮和統(tǒng)一。在本站有好多關(guān)于CSS的教材希望大家好好研究吧！希望這篇文章能起到畫龍點睛的作用。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！
CSS是“Cascading Style Sheets”的縮寫，譯為樣式表。HTML允許我們利用CSS來實現(xiàn)風(fēng)格的顯示，舉個簡單的例子：我們可以使用<b>標(biāo)簽來使頁面的字體加粗。如：
<b>網(wǎng)頁教學(xué)網(wǎng)加粗字體顯示</b>
如果你使我們使字體顯示為紅色、宋體、并且加粗顯示我們可以使用下面的代碼：
<font color="#FF0000" face="宋體"><strong>網(wǎng)頁教學(xué)網(wǎng)字體演示</strong></font>
這時我們觀察上面的代碼時我們發(fā)現(xiàn)網(wǎng)頁中的元素比較多了，當(dāng)我們自己編寫時可能顯得很凌亂，這時我們該想有沒有一種方法使用的代碼比較少，而同時達(dá)到上面顯示的要求呢？回答是肯定的，這時我們就要用到CSS了。用CSS設(shè)置一種風(fēng)格，設(shè)置好我們需要的特性，給它命名一個唯一的名字，然后保存放在網(wǎng)站的其它地方，然后我們在編寫HTML時引用剛才的風(fēng)格的名字就可以達(dá)到這種要求。如：
<p class="myNewStyle">網(wǎng)頁教學(xué)網(wǎng)的 CSS 風(fēng)格文本</p>
然后在網(wǎng)頁的頭部<head></head>之間加上設(shè)置風(fēng)格的代碼，如：
<style type="text/css">
<!--
.myNewStyle {
font-family: 宋體;
font-weight: bold;
color: #FF0000;
}
-->
</style>
如果你想使上面的CSS控制你的網(wǎng)頁的每個頁面，那么我們復(fù)制粘貼上面的代碼就可以了，如果覺得比較麻煩或者說你覺得網(wǎng)頁的頭部很亂的話，我們也可以把CSS設(shè)置的風(fēng)格單獨保存為一個文件(文件的擴(kuò)展名為.CSS)，之后我們在HTML直接引用那個保存的文件就可以引用樣式了。如你保存的文件的名字為：myFirstStyleSheet.css，那么我們可以使用下面代碼來引用：
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">
注意：上述代碼要放到HTML頁面的<head>區(qū)域內(nèi)。
至于CSS的設(shè)置就在這里不提了，我們可以專門打開一個記事本，或使用專門的設(shè)計工具如DW等。
在編輯CSS注意不要再加上如下代碼了：
<style type="text/css">
</style>
我們在CSS文件中只要設(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)
最后我們在HTML代碼的BODY區(qū)域內(nèi)加入如下代碼就可以引用我們的設(shè)置了：
<p class="myNewStyle">網(wǎng)頁教學(xué)網(wǎng)CSS字體顯示1</p>
<h2 class="my2ndNewStyle">網(wǎng)頁教學(xué)網(wǎng)CSS字體顯示2</h2>
<h3 class="my3rdNewStyle">網(wǎng)頁教學(xué)網(wǎng)CSS字體顯示3</h3>
我們在上面的代碼中用到了<h2>標(biāo)簽，我們在CSS中也可以直接對標(biāo)簽進(jìn)行風(fēng)格的定義：
h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }
然后我們就可以直接在代碼中加入：
<h1>網(wǎng)頁教學(xué)網(wǎng)CSS字體顯示2</h1>
那么同樣按我們設(shè)置的風(fēng)格來顯示。
我們也可以對其它的標(biāo)簽設(shè)置風(fēng)格，舉個例子：我們對整個頁面的邊框進(jìn)行設(shè)置：
body { margin-left: 15%; margin-right: 15%; }
我們也可以對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)行顯示。
最后在舉個例子，關(guān)于超級連接的變色：
.a:link { color: rgb(0, 0, 153) } /* 未訪問連接的情況 */
.a:visited { color: rgb(153, 0, 153) } /* 訪問連接之后的連接 */
.a:hover { color: rgb(0, 96, 255) } /* 鼠標(biāo)盤旋的狀態(tài) */
.a:active { color: rgb(255, 0, 102) } /* 連接激活的狀態(tài) */
然后在HTML代碼中加入：
<a href="http://www.muchs.cn">網(wǎng)頁教學(xué)網(wǎng)</a>
上述代碼可以按我們設(shè)置的風(fēng)格顯示。
最后給大家擴(kuò)展一下，因為最近總有網(wǎng)友在論壇中問，如何使在同一頁面的連接不同呢？我們接最后這個例子給大家介紹一下。這時我們需要設(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 }/* 黑色、無下劃線*/
.a1:active { COLOR: #0000ff; TEXT-DECORATION: none }
然后在HTML代碼中加入：
<a href="http://www.muchs.cn">網(wǎng)頁教學(xué)網(wǎng)</a>
<a href="http://www.muchs.cn" class="a1">網(wǎng)頁教學(xué)網(wǎng)</a>
就會出現(xiàn)兩種連接效果了。
CSS在我們設(shè)置網(wǎng)頁時功能是非常強(qiáng)大的，希望大家在制作網(wǎng)頁時要熟練的運用，以使我們的頁面更加漂亮和統(tǒng)一。在本站有好多關(guān)于CSS的教材希望大家好好研究吧！希望這篇文章能起到畫龍點睛的作用。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！
網(wǎng)站題目：用CSS美化你的網(wǎng)頁
文章位置：http://www.muchs.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)頁設(shè)計公司
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(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é)會協(xié)會數(shù)字化全場景探索 2024-01-25
- 服務(wù)器托管商如何維護(hù)服務(wù)器？|成都服務(wù)器托管 2024-01-25
- 簡潔網(wǎng)頁設(shè)計你需知的6點技巧 2024-01-25
- 分享PDCA循環(huán)在日常工作中的運用 2024-01-25
- 網(wǎng)站建設(shè)對企業(yè)品牌形象展示可以起到哪些作用？(企業(yè)商城網(wǎng)站建設(shè)價格) 2024-01-25
- 如何考慮老年用戶群的界面適合閱讀性 2024-01-25
- 什么是WEB應(yīng)用程序防火墻？它的類型有哪些？ 2024-01-25
- 淺談互聯(lián)網(wǎng)時代，中小企業(yè)如何用好網(wǎng)絡(luò)營銷 2024-01-25
- 什么是客戶端渲染和服務(wù)器端渲染？ 2024-01-25
- 網(wǎng)購竟是沖動惹的禍 2024-01-25
- 淺析網(wǎng)站建設(shè)要注意的幾個方面 2024-01-25
- 創(chuàng)新互聯(lián)教你原創(chuàng)文章的秘籍 2024-01-25
- 成都做網(wǎng)站：做一個網(wǎng)站要多少錢 2024-01-25
- 小程序的未來發(fā)展如何呢? 2024-01-25
- 高端網(wǎng)站開發(fā)需要注意的幾個關(guān)鍵點 2024-01-25
- 營銷型網(wǎng)絡(luò)建設(shè)如何做好SEO優(yōu)化的技巧 2024-01-25