pg电子游戏网站

書名： HTML5+CSS3+JavaScript 從入門到項目實踐（超值版）
作者名：聚慕課教育研發中心
本章字數： 897字
更新時間： 2020-06-29 17:37:20

3.3 HTML網頁應用CSS樣式的方法

CSS可以控制HTML文檔的顯示，但在控制文檔顯示之前，需要在文檔中引入CSS樣式，HTML提供了4種引入方式，包括行內樣式、內嵌樣式、鏈接樣式和導入樣式。

3.3.1 使用行內樣式表

行內樣式是最為簡單的CSS設置方式，需要給每一個標簽都設置style屬性。它和樣式所定義的內容在同一代碼行內，通常用于精確控制一個HTML元素的表現，代碼如下：

      <p style="color:red">行內樣式表</p>

【例3-1】（實例文件：ch03\Chap3.1.html）行內樣式表。

相關的代碼實例請參考Chap3.1.html文件，在IE瀏覽器中運行的結果如圖3-2所示。

圖3-2 行內樣式表作用效果

這種樣式表不經常用，CSS樣式與HTML結構沒有分離，導致代碼冗余，并且不利于維護。

3.3.2 使用內部CSS

內部CSS樣式表一般是將CSS寫在<head></head>標簽中，并使用<style></style>標簽進行聲明，代碼如下：

      <head>
      <style>
      ...
      </style>
      </head>

【例3-2】（實例文件：ch03\Chap3.2.html）內部樣式表。

相關的代碼實例請參考Chap3.2.html文件，在IE瀏覽器中運行的結果如圖3-3所示。

圖3-3 內部樣式表作用效果

3.3.3 引入外部樣式表

引入外部樣式表是使用頻率最高、也是最為實用的方法。它將HTML頁面本身與CSS樣式風格分離為兩個或者多個文件，實現了頁面框架HTML代碼與美工CSS代碼的完全分離，使得前期制作和后期維護都十分方便。

引入外部樣式表是指在外部定義CSS樣式表并形成以“.css”為擴展名的文件，然后在頁面中通過<link>引入頁面中，代碼如下：

      <link rel="stylesheet" href="style1"/>

● rel：指定引入樣式表，其值為stylesheet。

● href指定了CSS樣式表的位置，此處表示當前路徑下名稱為style1.css文件。

【例3-3】（實例文件：ch03\Chap3.3.html）引入外部樣式表。

      <!DOCTYPE html>
      <html>
      <head>
         <meta charset="UTF-8">
         <title>Title</title>
         /*引入style1.css文件*/
         <link rel="stylesheet" href="style1.css">
      </head>
      <body>
      <p>導入外部樣式表</p>
      <p>導入外部樣式表</p>
      <p>導入外部樣式表</p>
      </body>
      </html>

引入的外部樣式表style1.css代碼：