免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

用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>標簽來使頁面的字體加粗。如:

<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)我們自己編寫時可能顯得很凌亂,這時我們該想有沒有一種方法使用的代碼比較少,而同時達到上面顯示的要求呢?回答是肯定的,這時我們就要用到CSS了。用CSS設(shè)置一種風(fēng)格,設(shè)置好我們需要的特性,給它命名一個唯一的名字,然后保存放在網(wǎng)站的其它地方,然后我們在編寫HTML時引用剛才的風(fēng)格的名字就可以達到這種要求。如:

<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)格單獨保存為一個文件(文件的擴展名為.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;

}

然后直接保存為擴展名為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>標簽,我們在CSS中也可以直接對標簽進行風(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)格來顯示。

我們也可以對其它的標簽設(shè)置風(fēng)格,舉個例子:我們對整個頁面的邊框進行設(shè)置:

body { margin-left: 15%; margin-right: 15%; }

我們也可以對DIV標簽進行設(shè)置:

div {

background: rgb(204,204,255);

padding: 0.5em;

border: 1px solid #000000;

}

在HTML代碼中只要在 <div>和</div>之間的內(nèi)容將都按上述的風(fēng)格進行顯示。

最后在舉個例子,關(guān)于超級連接的變色:

.a:link { color: rgb(0, 0, 153) } /* 未訪問連接的情況 */

.a:visited { color: rgb(153, 0, 153) } /* 訪問連接之后的連接 */

.a:hover { color: rgb(0, 96, 255) } /* 鼠標盤旋的狀態(tài) */

.a:active { color: rgb(255, 0, 102) } /* 連接激活的狀態(tài) */

然后在HTML代碼中加入:

<a href="http://m.newbst.com">網(wǎng)頁教學(xué)網(wǎng)</a>

上述代碼可以按我們設(shè)置的風(fēng)格顯示。

最后給大家擴展一下,因為最近總有網(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://m.newbst.com">網(wǎng)頁教學(xué)網(wǎng)</a>

<a href="http://m.newbst.com" class="a1">網(wǎng)頁教學(xué)網(wǎng)</a>

就會出現(xiàn)兩種連接效果了。

CSS在我們設(shè)置網(wǎng)頁時功能是非常強大的,希望大家在制作網(wǎng)頁時要熟練的運用,以使我們的頁面更加漂亮和統(tǒng)一。在本站有好多關(guān)于CSS的教材希望大家好好研究吧!希望這篇文章能起到畫龍點睛的作用。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司!

網(wǎng)站題目:用CSS美化你的網(wǎng)頁
文章位置:http://m.newbst.com/news7/315457.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站網(wǎng)站導(dǎo)航手機網(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)

成都網(wǎng)頁設(shè)計公司