爲一個HTML文檔應用CSS的方法

爲一個HTML文檔應用CSS

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

方法1:行內樣式表(style屬性)

爲HTML應用CSS的一種方法是使用HTML屬性style。我們在上例的基礎之上,通過行內樣式表將頁面背景設爲紅色:

<html>
  <head>
<title>例子</title>
  </head>
  <body style="background-color: #FF0000;">
<p>這個頁面是紅色的</p>
  </body>
</html>

方法2:內部樣式表(style元素)

爲HTML應用CSS的另一種方法是採用HTML元素style。比如像這樣:

<html>
  <head>
<title>例子</title>
    <style type="text/css">
      body {background-color: #FF0000;}
    </style>
  </head>
  <body>
<p>這個頁面是紅色的</p>
  </body>
</html>

方法3:外部樣式表(引用一個樣式表文件)

我們推薦採用這種引用外部樣式表的方法。在本教程之後的例子中,我們將全部採用該方法。

外部樣式表就是一個擴展名爲css的文本文件。跟其他文件一樣,你可以把樣式表文件放在Web服務器上或者本地硬盤上。

 

 

現在的問題是:如何在一個HTML文檔裏引用一個外部樣式表文件(style.css)呢?答案是:在HTML文檔裏創建一個指向外部樣式表文件的鏈接(link)即可,就像下面這樣:

<link rel="stylesheet" type="text/css" href="style/style.css" />

注意要在href屬性裏給出樣式表文件的地址。

這行代碼必須被插入HTML代碼的頭部(header),即放在標籤<head>和標籤</head>之間。就像這樣:

<html>
  <head>
<title>我的文檔</title>
    <link rel="stylesheet" type="text/css" href="style/style.css" />
  </head>
  <body>
  ...

這個鏈接告訴瀏覽器:在顯示該HTML文件時,應使用給出的CSS文件進行佈局。
這種方法的優越之處在於:多個HTML文檔可以同時引用一個樣式表。換句話說,可以用一個CSS文件來控制多個HTML文檔的佈局。

 

 

這一方法可以令你省去許多工作。例如,假設你要修改某網站的所有網頁(比方說有100個網頁)的背景顏色,採用外部樣式表可以避免你手工一一修改這100個HTML文檔的工作。採用外部樣式表,這樣的修改只需幾秒鐘即可搞定——修改外部樣式表文件裏的代碼即可。

 

讓我們來實踐剛剛所學到的知識。

自己試試看

打開記事本(或其他文本編輯器),創建兩個文件——一個HTML文件,一個CSS文件——它們的內容如下:

default.htm

<html>
  <head>
<title>我的文檔</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
<h1>我的第一個樣式表</h1>
  </body>
</html>

style.css

body {
  background-color: #FF0000;
}

然後,把這兩個文件放在同一目錄下。記得在保存文件時使用正確的擴展名(分別爲“htm”和“css”)。

用瀏覽器打開default.htm,你所看到的頁面應該具有紅色背景。

發佈了36 篇原創文章 · 獲贊 1 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章