HTML - 樣式表

層疊樣式表(CSS)描述了如何在屏幕上，印刷品中顯示文檔，或者如何將它們發音.自該聯盟成立于1994年以來，W3C一直積極推動在網絡上使用樣式表.

層疊樣式表(CSS)為HTML標簽指定各種屬性提供了簡單有效的替代方案.使用CSS，您可以為給定的HTML元素指定許多樣式屬性.每個屬性都有一個名稱和一個值，用冒號(:)分隔.每個屬性聲明用分號(;)分隔.

示例

首先讓我們考慮一個使用&lt的HTML文檔示例;字體&GT;標簽和相關屬性，用于指定文本顏色和字體大小 :

注意 : 不推薦使用 font 標記，它應該在將來的HTML版本中刪除.因此不應該使用它們，建議使用CSS樣式來操作字體.但仍然出于學習目的，本章將使用字體標記的示例.

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

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

<!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文檔中。
內部樣式表:使用<style>標簽在HTML文檔的標題部分定義樣式表規則。
內聯樣式表:使用style屬性直接與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文件:

<!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

如果僅要將樣式表規則應用于單個文檔，則可以使用<style>標記將這些規則包括在HTML文檔的標題部分中。

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

Example

讓我們再次重寫上面的示例，但是這里我們將使用<style>標簽在同一HTML文檔中編寫樣式表規則:

<!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元素一起編寫。

<!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>

免責聲明：以上內容（如有圖片或視頻亦包括在內）有轉載其他網站資源，如有侵權請聯系刪除

軟件更多