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

2021-04-17 06:55:07 字數 1799 閱讀 9834

現在我們設計

網頁已經離不開

css,使用

css可以美化我們的

網頁,這已經是大家所共知的了!

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

網頁教學網加粗字型顯示

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

網頁教學網字型演示

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

網頁教學網的 css 風格文字

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

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

css" rel="stylesheet" type="text/css">

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

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

在編輯css注意不要再加上如下**了:

我們在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**中加入:

網頁教學網

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

最後給大家擴充套件一下,因為最近總有網友在論壇中問,如何使在同一頁面的連線不同呢?我們接最後這個例子給大家介紹一下。這時我們需要設定css的另一種風格:

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

.a1:hover

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

.a1:active

然後在html**中加入:

網頁教學網

網頁教學網

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

CSS美化網頁元素

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

網頁製作CSS樣式九條技巧

第一.css字型的簡寫 平時當你使用css定義字型時你可能會這樣做 font size 1em line height 1.5em font weight bold font style italic font variant small caps font family verdana,serif...

CSS網頁製作技巧之控制網頁背景

我想大家常常為一些比較合適於自己的網頁背景的而發愁吧,這個我想也是有的,因為這些不是太大就是太小,或者太亂,那麼有沒有辦法讓能合自己的主頁的胃口呢?答案是肯定的。想知道怎麼來實現嘛,好吧,大家現在開始跟著我做,我保證大家一定一學就會。不過,我想在網上 成家 的朋友一般分為在網咖裡 開業 就像我一樣,...