DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 1.3 CSS在HTML中的引用方式
1.3 CSS在HTML中的引用方式
編輯:CSS基礎知識     

在HTML中引入CSS共有3種方式:

  • (1)外部樣式表;
  • (2)內部樣式表;
  • (3)內聯樣式表;

下面我們詳細為大家介紹這3種CSS引入方式。

一、CSS的3種引用方式

1、外部樣式表

外部樣式表是最理想的CSS引用方式,在實際開發當中,為了提升網站的性能和維護性,一般都是使用外部樣式表。所謂的“外部樣式表”,就是把CSS代碼和HTML代碼都單獨放在不同文件中,然後在HTML文檔中使用link標簽來引用CSS樣式表。

當樣式需要被應用到多個頁面時,外部樣式表是最理想的選擇。使用樣式表,你就可以通過更改一個CSS文件來改變整個網站的外觀。

外部樣式表在單獨文件中定義,並且在<head></head>標簽對中使用link標簽來引用。

舉例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--在HTML頁面中引用文件名為index的css文件-->
    <link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div></div>
</body>
</html>

說明:

外部樣式表都是在head標簽內使用link標簽來引用的。

2、內部樣式表

內部樣式,指的就是把CSS代碼和HTML代碼放在同一個文件中,其中CSS代碼放在<style></style>標簽對內,並且<style></style>標簽對是放在<head></head>標簽對內的。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--這是內部樣式表,CSS樣式在style標簽中定義-->
    <style type="text/css">
        p{color:Red;}
    </style>
</head>
<body>
    <p> 學習網</p>
    <p> 學習網</p>
    <p> 學習網</p>
</body>
</html>

在浏覽器預覽效果如下:

說明:

對於內部樣式表,CSS樣式在<style>標簽內定義,而<style>標簽必須放在<head>標簽內。

3、內聯樣式表

內聯樣式表,也是把CSS代碼和HTML代碼放在同一個文件中,但是跟內部樣式表不同,CSS樣式不是在<style></style>標簽對中定義,而是在標簽的style屬性中定義。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p style="color:Red; "> 學習網</p>
    <p style="color:Red; "> 學習網</p>
    <p style="color:Red; "> 學習網</p>
</body>
</html>

在浏覽器預覽效果如下:

說明:

大家仔細對比一下這個例子和內部樣式表中的例子,其實這兩段代碼實現的是同一個效果。三個p元素都定義了color屬性,那麼如果采用以下內部樣式表,樣式只需要寫一遍;而如果采用內聯樣式表,則三個p元素都要單獨寫一遍。

內聯樣式是在單個元素內定義的,對於網站來說,冗余代碼很多,而且由於冗余代碼多,每次改動CSS樣式都要到具體的標簽內修改,這樣使得網站的維護性也非常差。

在“HTML入門教程”中為什麼強烈不推薦使用Dreamweaver那種“點點點”的方式來制作網頁,就是因為在那種方式產生的代碼中,CSS樣式全部都是使用內聯樣式,導致冗余代碼非常多,網站的維護性也非常差。

二、CSS引用方式用途

在實際開發中,我們一般使用外部樣式表,而在在線代碼測試工具和CSS入門的過程中,我們使用的是內部樣式表,因為代碼量不是很多,HTML代碼和CSS代碼放在同一個文件,這樣也方便我們修改和測試。不管是在測試或者實際開發中,我們都不建議使用內聯樣式表。不過呢,我們可以使用內聯樣式表進行細節的微調,這個技巧我們在“CSS進階教程”再給大家介紹,敬請關注。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved