CSS 包含

有四种方法可以将样式与HTML文档关联起来。最常用的方法是内联CSS和外部CSS。

嵌入式CSS – `<style>`元素

您可以使用<style>元素将CSS规则放入HTML文档中。该标签放置在<head>...</head>标签之内。使用此语法定义的规则将应用于文档中的所有可用元素。以下是通用的语法示例：

<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         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>

它将产生以下结果 −

CSS 包含

属性

与<style>元素相关联的属性如下：

属性	值	描述
type	text/css	指定样式表语言作为内容类型（MIME类型）。这是必需的属性。
media	screen tty tv projection handheld print braille aural all	指定文档将在哪种设备上显示。默认值为all。这是可选的属性。

内联CSS – `style`属性

您可以使用任何HTML元素的style属性来定义样式规则。这些规则将仅应用于该元素。以下是一般的语法示例：

<element style = "...style rules....">

属性

属性	值	描述
style	样式规则	`style` 属性的值是由分号 (`;`) 分隔的一组样式声明组成的组合。

示例

以下是基于上述语法的内联 CSS 的示例 −

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

它将产生以下结果 −

CSS 包含

外部 CSS – `<link>` 元素

<link> 元素可用于在 HTML 文档中包含外部样式表文件。

外部样式表是一个具有 .css 扩展名的单独文本文件。您可以在此文本文件中定义所有的样式规则，然后使用 <link> 元素将该文件包含到任何 HTML 文档中。

下面是包含外部 CSS 文件的通用语法示例：

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

属性

与 <style> 元素相关联的属性包括：

属性	值	描述
type	text css	指定样式表语言为内容类型（MIME 类型）。此属性是必需的。
href	URL	指定具有样式规则的样式表文件。此属性是必需的。
media	screen tty tv projection handheld print braille aural all	指定文档将在哪种设备上显示。默认值为 `all`。这是可选属性。

示例

考虑一个名为 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 = " all" />
</head>

导入的 CSS – @import 规则

@import 用于以类似于 <link> 元素的方式导入外部样式表。下面是 @import 规则的通用语法。

<head>
   @import "URL";
</head>

在这里的URL是样式表文件的URL，其中包含样式规则。你也可以使用另一种语法。

<head>
   @import url("URL");
</head>

示例

以下是一个示例，向您展示如何将样式表文件导入到HTML文档中−

<head>
   @import "mystyle.css";
</head>

CSS规则覆盖

我们已经讨论了四种在HTML文档中包含样式表规则的方式。以下是覆盖任何样式表规则的规则。

任何内联样式表具有最高优先级。因此，它将覆盖在<style>...</style>标签中定义的任何规则或在任何外部样式表文件中定义的规则。
在<style>...</style>标签中定义的任何规则将覆盖在任何外部样式表文件中定义的规则。
外部样式表文件中定义的任何规则都具有最低优先级，并且仅当以上两条规则不适用时才应用此文件中的规则。

处理旧浏览器

仍然有许多不支持CSS的旧浏览器。因此，在HTML文档中编写嵌入式CSS时应该注意。以下代码片段显示了如何使用注释标签来隐藏CSS以兼容旧浏览器—

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

CSS 注释

很多时候，你可能需要在样式表中添加额外的注释。所以，在样式表中添加注释非常简单。你可以将注释放在/*.....这是样式表中的注释.....*/之内。

你可以使用/* ....*/来注释多行代码块，就像在C和C++编程语言中一样。

示例

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

它将产生以下结果 −

CSS 包含