在HTML中使用CSS美化網頁的三種方法

2021-05-04 15:37:20 字數 2009 閱讀 7240

css

是cascading style sheets

(級聯樣式表)的縮寫,

css是一種樣式表語言,用於為

html

文件定義布局。例如,

css涉及字型、顏色、邊距、高度、寬度、背景影象、高階定位等方面。它可以省去你大量時間,令你可以採用一種全新的方式來設計**。

css是每個網頁設計人員所必須掌握的。

為html

文件應用

css,有三種方法可供選擇。下面對這三種方法進行了概括。我們建議你對第三種方法(即外部樣式表)予以關注。

●方法一:行內樣式表(

style

屬性)為

html

應用css

的第一種方法,是使用

html

屬性style

,將屬性和值放在

style

屬性中即可。我們在上例的基礎之上,通過行內樣式表將頁面背景設為紅色:

這個頁面是紅色的

●方法二:內部樣式表(

style

元素)為

html

應用css

的另一種方法,是採用

html

元素style

,新增在

元素之間。比如下面這樣:

這個頁面是紅色的

●方法三:外部樣式表(引用乙個樣式表檔案)

我們推薦採用這種引用外部樣式表的方法。外部樣式表就是乙個擴充套件名為

css的文字檔案。跟其他檔案一樣,你可以把樣式表檔案放在

web伺服器上或者本地硬碟上。比方說你的樣式表檔名為

style.css

。style.css

檔案的**如下例所示:

body

在乙個html

文件裡引用乙個外部樣式表檔案(

style.css

)的方法是:在

html

文件裡建立乙個指向外部樣式表檔案的鏈結(

link

)即可:

要在href

屬性裡給出樣式表檔案的位址。這行**必須被插入

html

**的頭部(

header

),即放在標籤

之間:

這個頁面是紅色的

這個鏈結告訴瀏覽器:在顯示該

html

檔案時,應使用給出的

css檔案進行布局。

這種方法的優越之處在於:多個

html

文件可以同時引用乙個樣式表。換句話說,可以用乙個

css檔案來控制多個

html

文件的布局。這一方法可以令你省去許多任務作。例如,假設你要修改某**的所有網頁(比方說有

100個網頁)的背景顏色,採用外部樣式表可以避免你手工一一修改這

100個

html

文件的工作。採用外部樣式表,這樣的修改只需幾秒鐘即可搞定——修改外部樣式表檔案裡的**即可。

css可以使用更多的屬性來定義網頁的顯示樣式,先來讓我們看看下面這段沒有

css樣式修飾的

html

**的顯示效果: 登入

使用者名稱:

style="width: 120px;" />

密碼:

style="width: 120px;" />

type="submit" name="submit" value="

登入" style="width: 80px;"> 註冊

顯示的介面樣式如下所示: 圖

3-1

使用css

之前的頁面

然後我們在該頁面的

中新增如下的樣式表**:

經過美化後的效果如圖

3-2所示: 圖

3-2

使用css

以後的頁面

對比上面兩個頁面的**,我們發現,兩者的唯一區別就是乙個沒有使用

css而另乙個使用了,其餘的**完全一樣。由此可見

css在

web頁面中發揮的重要作用。

CSS美化網頁元素

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

CSS 網頁的樣式美化

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

前端 CSS(二)美化網頁

span標籤 span 和 div 是兩個習慣用來更改字型樣式的 span div body p1style head class p1 座落在景區內的湖光山色酒店門前,三五成群的遊客,酒店出來的食者,p 站在月光下,賞月留影。孩子們穿梭逗樂 姑娘們月下聊天 情侶打情罵俏 男人們談笑風生,好不熱鬧p...