極客書

HTML - Style Sheet

層疊樣式表（CSS）描述了文檔在螢幕上的顯示方式、列印方式，或者它們的發音方式。自1994年成立以來，W3C一直在積極地促進Web上樣式表的使用。

層疊樣式表（CSS）提供了簡單有效的替代方法來指定HTML標記的各種屬性。使用CSS，可以爲給定的HTML元素指定許多樣式屬性。每個屬性都有一個名稱和一個值，用冒號（：）分隔。每個屬性聲明都用分號（;）分隔。

Example

首先，讓我們考慮一個HTML文檔示例，它使用<字體>標記和相關屬性來指定文本顏色和字體大小−

注意−字體標記已棄用，應該在將來的HTML版本中刪除它。所以不應該使用它們，而是建議使用CSS樣式來操作字體。但仍出於學習目的，本章將使用一個使用字體標記的示例。

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

我們可以在樣式表的幫助下重新編寫上面的示例，如下所示;

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

這將產生以下結果&負;

您可以在HTML文檔中以三種方式使用CSS−

  • 外部樣式表−在單獨的.css文件中定義樣式表規則，然後使用HTML<link>標記將該文件包含在HTML文檔中。

  • 內部樣式表−使用<樣式>標記在HTML文檔的標題部分定義樣式表規則。

  • 內聯樣式表−使用樣式屬性直接與HTML元素一起定義樣式表規則。

在適當的例子的幫助下，讓我們一個接一個地看這三個案例。

External Style Sheet

如果需要將樣式表用於不同的頁面，則始終建議在單獨的文件中定義通用樣式表。級聯樣式表文件的擴展名爲.css，它將使用<link>標記包含在HTML文件中。

Example

假設我們定義了一個樣式表文件style.css，它具有以下規則−

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

這裡我們定義了三個CSS規則，它們將適用於爲HTML標記定義的三個不同類。我建議你不必擔心這些規則是如何定義的，因爲你將在學習CSS的同時學習它們。現在讓我們在下面的HTML文檔中使用上面的外部CSS文件−

Live Demo 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

這將產生以下結果&負;

Internal Style Sheet

如果只想將樣式表規則應用於單個文檔，則可以使用<樣式>標記將這些規則包含在HTML文檔的標題部分中。

在內部樣式表中定義的規則將覆蓋在外部CSS文件中定義的規則。

Example

讓我們再次編寫上面的示例，但在這裡，我們將使用<style>tag−在同一個HTML文檔中編寫樣式表規則;

Live Demo 
<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

這將產生以下結果&負;

Inline Style Sheet

可以使用相關標記的style屬性將樣式表規則直接應用於任何HTML元素。只有當您有興趣僅對任何HTML元素進行特定更改時，才應執行此操作。

與元素內聯定義的規則將覆蓋在外部CSS文件中定義的規則以及在<style>元素中定義的規則。

Example

讓我們再次編寫上面的示例，但在這裡，我們將使用這些元素的style屬性來編寫樣式表規則和HTML元素。

Live Demo 
<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

這將產生以下結果&負;