用CSS美化你的網頁

2021-04-01 01:22:03 字數 1613 閱讀 2324

現在我們設計網頁已經離不開css,使用css可以美化我們的網頁,這已經是大家所共知的了!

css是「cascading style sheets」的縮寫,譯為樣式表。html允許我們利用css來實現風格的顯示,舉個簡單的例子:我們可以使用標籤來使頁面的字型加粗。如:

網頁教學網加粗字型顯示

如果你使我們使字型顯示為紅色、宋體、並且加粗顯示我們可以使用下面的**:

網頁教學網字型演示

這時我們觀察上面的**時我們發現網頁中的元素比較多了,當我們自己編寫時可能顯得很凌亂,這時我們該想有沒有一種方法使用的**比較少,而同時達到上面顯示的要求呢?回答是肯定的,這時我們就要用到css了。用css設定一種風格,設定好我們需要的特性,給它命名乙個唯一的名字,然後儲存放在**的其它地方,然後我們在編寫html時引用剛才的風格的名字就可以達到這種要求。如:

網頁教學網的 css 風格文字

然後在網頁的頭部之間加上設定風格的**,如:

如果你想使上面的css控制你的網頁的每個頁面,那麼我們複製貼上上面的**就可以了,如果覺得比較麻煩或者說你覺得網頁的頭部很亂的話,我們也可以把css設定的風格單獨儲存為乙個檔案(檔案的擴充套件名為.css),之後我們在html直接引用那個儲存的檔案就可以引用樣式了。如你儲存的檔案的名字為:myfirststylesheet.css,那麼我們可以使用下面**來引用:

注意:上述**要放到html頁面的區域內。

至於css的設定就在這裡不提了,我們可以專門開啟乙個記事本,或使用專門的設計工具如dw等。

我們在css檔案中只要設定css風格就行了,如:

.mynewstyle

.my2ndnewstyle

.my3rdnewstyle

然後直接儲存為擴充套件名為css的檔案就行了(如:myfirststylesheet.css)

最後我們在html**的body區域內加入如下**就可以引用我們的設定了:

網頁教學網css字型顯示1

我們在上面的**中用到了標籤,我們在css中也可以直接對標籤進行風格的定義:

h1

然後我們就可以直接在**中加入:

那麼同樣按我們設定的風格來顯示。

我們也可以對其它的標籤設定風格,舉個例子:我們對整個頁面的邊框進行設定:

body

我們也可以對div標籤進行設定:

div

在html**中只要在 和

之間的內容將都按上述的風格進行顯示。

最後在舉個例子,關於超級連線的變色:

.a:link /* 未訪問連線的情況 */

.a:visited /* 訪問連線之後的連線 */

.a:hover /* 滑鼠盤旋的狀態 */

.a:active /* 連線啟用的狀態 */

然後在html**中加入:

網頁教學網

上述**可以按我們設定的風格顯示。

.a1:link /* 紅色、有下劃線*/

.a1:hover

.a1:visited /* 黑色、無下劃線*/

.a1:active

然後在html**中加入:

網頁教學網

網頁教學網

就會出現兩種連線效果了。

網頁製作必學技巧之用CSS美化你的網頁

現在我們設計 網頁已經離不開 css,使用 css可以美化我們的 網頁,這已經是大家所共知的了!css是 cascading style sheets 的縮寫,譯為樣式表。html允許我們利用css來實現風格的顯示,舉個簡單的例子 我們可以使用標籤來使頁面的字型加粗。如 網頁教學網加粗字型顯示 如果...

CSS美化網頁元素

一.span標籤 能讓某幾個文字或者某個詞語凸顯出來 今天是11月份的第一天,地鐵卡不打折了 二.字型風格 font family 字型型別 font size 字型大小 font style 字型風格 font weight 字型粗細 font 風格 粗細 大小 型別 三.文字樣式 color 設...

CSS 網頁的樣式美化

內部樣式表 不用通過引入css檔案來設定樣式,直接在head的 style 雙標籤中設定。內聯樣式表 行內樣式 在html中,直接將樣式屬性寫在標籤上,優先順序高於其它所有方式設定的樣式,加了 important的除外。外部樣式表 通過引入外部css檔案設定樣式,引入方式有兩種,一種是通過link標...