有四種方法可以將樣式與HTML文檔相關聯。最常用的方法是內聯CSS和外部CSS。
Embedded CSS - The <style> Element
可以使用<style>元素將CSS規則放入HTML文檔中。此標記放置在標記中。使用此語法定義的規則將應用於文檔中可用的所有元素。這裡是通用語法−
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "全部的">
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
它將產生以下結果&負;
Attributes
與<樣式>元素相關聯的屬性爲減號;
| Attribute | Value | Description |
|---|---|---|
| type | text/css | Specifies the style sheet language as a content-type (MIME type). This is required attribute. |
| media | 螢幕 tty公司公司 電視 投影 手持式 列印 盲文 聽覺的 全部的 |
Specifies the device the document will be displayed on. Default value is 全部的. This is an optional attribute. |
Inline CSS - The style Attribute
您可以使用任何HTML元素的style屬性來定義樣式規則。這些規則將僅應用於該元素。這裡是通用語法−
<element style = "...style rules....">
Attributes
| Attribute | Value | Description |
|---|---|---|
| style | style rules | The value of style attribute is a combination of style declarations separated by semicolon (;). |
Example
下面是基於上述語法的內聯CSS示例−
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>
它將產生以下結果&負;
External CSS - The <link> Element
<link>元素可用於在HTML文檔中包含外部樣式表文件。
An external style sheet is a separate text file with .css extension. You define 全部的 the Style rules within this text file and then you can include this file in any HTML document using <link> element.
下面是包含外部CSS文件的通用語法−
<head> <link type = "text/css" href = "..." media = "..." /> </head>
Attributes
與<樣式>元素相關聯的屬性爲減號;
| Attribute | Value | Description |
|---|---|---|
| type | text css | Specifies the style sheet language as a content-type (MIME type). This attribute is required. |
| href | URL | Specifies the style sheet file having Style rules. This attribute is a required. |
| media |
螢幕 tty公司公司 電視 投影 手持式 列印 盲文 聽覺的 全部的 |
Specifies the device the document will be displayed on. Default value is 全部的. This is optional attribute. |
Example
考慮一個名爲mystyle.css的簡單樣式表文件，其規則如下−
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
現在您可以將這個文件mystyle.css包含在任何HTML文檔中，如下所示−
<head> <link type = "text/css" href = "mystyle.css" media = " 全部的" /> </head>
Imported CSS - @import Rule
@導入用於以類似於<link>元素的方式導入外部樣式表。以下是@import rule的通用語法。
<head> <@import "URL"; </head>
這裡的URL是具有樣式規則的樣式表文件的URL。您也可以使用另一種語法−
<head>
<@import url("URL");
</head>
Example
下面的示例演示如何將樣式表文件導入到HTML文檔中;
<head> @import "mystyle.css"; </head>
CSS Rules Overriding
我們討論了在HTML文檔中包含樣式表規則的四種方法。下面是覆蓋任何樣式表規則的規則。
任何內聯樣式表都具有最高優先級。因此，它將覆蓋在任何外部樣式表文件中定義的標記或規則中定義的任何規則。
在標記中定義的任何規則都將覆蓋在任何外部樣式表文件中定義的規則。
在外部樣式表文件中定義的任何規則都具有最低優先級，並且只有當以上兩個規則不適用時，才會應用在此文件中定義的規則。
Handling old Browsers
仍然有許多舊的瀏覽器不支持CSS。因此，在HTML文檔中編寫嵌入的CSS時，我們應該小心。下面的代碼片段展示了如何使用注釋標記隱藏舊瀏覽器中的CSS−
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>
CSS Comments
很多時候，您可能需要在樣式表塊中添加其他注釋。因此，在樣式表中注釋任何部分都非常容易。你可以簡單地把你的評論放在/*….這是一個樣式表中的評論…..*/。
您可以使用/*./以類似C和C++程式語言的方式注釋多行塊。
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
它將產生以下結果&負;