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>

它将产生以下结果 -

属性

与 <style> 元素关联的属性是 -

属性 价值 描述
类型 文本/CSS 将样式表语言指定为内容类型（MIME 类型）。这是必需的属性。
媒体

屏幕

终端

电视

投影

手持式

打印

盲文

听觉的

全部

 指定将显示文档的设备。默认值为全部。这是一个可选属性。

内联 CSS - style属性

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

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

属性

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

例子

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

现场演示 
<html>
   <head>
   </head>

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

它将产生以下结果 -

外部 CSS - <link> 元素

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

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

以下是包含外部 CSS 文件的通用语法 -

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

属性

与 <style> 元素关联的属性是 -

属性 价值 描述
类型 文本样式 将样式表语言指定为内容类型（MIME 类型）。该属性是必需的。
链接地址 网址 指定具有样式规则的样式表文件。该属性是必需的。
媒体

屏幕

终端

电视

投影

手持式

打印

盲文

听觉的

全部

 指定将显示文档的设备。默认值为全部。这是可选属性。

例子

考虑一个名为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>

它将产生以下结果 -