CSS包含 - 如何添加CSS？

原创

admin 4个月前 (08-07) 阅读数 21 #CSS

CSS包含 - 如何添加CSS？

在使用CSS之前，您需要将其包含在HTML文档中。有几种方法可以将CSS添加到HTML文件中，例如编写内联CSS、内部CSS或包含CSS文件。

样式可以通过以下不同方式与HTML文档关联：

内联CSS - CSS样式放在HTML元素标签内部，仅对该元素有效。
内部CSS - CSS样式放在<head>标签内的<style>标签中。
外部CSS - CSS样式放在外部文件（.css扩展名）中，并通过<head>标签内的<link>标签包含。

内联CSS - style属性

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

语法

以下是通用语法：

<element style = "样式规则...">

style属性的值是由分号(;)分隔的样式声明组合。

示例

以下示例演示了内联CSS样式的使用：

<html>
<head>
</head>   
<body>
   <div style = "border: 5px inset gold; background-color: black; width: 300px; text-align: center;">
      <h1 style = "color:#36C;">Hello World !!!</h1>
      <p style = "font-size: 1.5em; color: white;">这是一个示例CSS代码。</p>
   </div>
</body>
</html>

内部CSS - style元素

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

语法

以下是通用语法：

<head>
   <style type = "text/css">
      h1 {
         color: #36CFFF; 
      }

      p {
         font-size: 1.5em;
         color: white;
      }

      div {
         border: 5px inset gold;
         background-color: black;
         width: 300px;
         text-align: center;
      }
   </style>
</head>

示例

以下示例应用了相同的样式：

<html>
<head>
   <style type = "text/css">
      h1 {
         color: #36CFFF; 
      }

      p {
         font-size: 1.5em;
         color: white;
      }

      div {
         border: 5px inset gold;
         background-color: black;
         width: 300px;
         text-align: center;
      }
   </style>
</head>   
<body>
   <div>
      <h1>Hello World !!!</h1>
      <p>这是一个示例CSS代码。</p>
   </div>
</body>
</html>

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

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

外部CSS - link元素

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

语法

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

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

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

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

创建一个名为ext_style.css的样式表文件，包含以下规则：

h1 {
   color: #36CFFF; 
}

p {
   font-size: 1.5em;
   color: white;
}

div {
   border: 5px inset gold;
   background-color: black;
   width: 300px;
   text-align: center;
}

示例

现在您可以在任何HTML文档中包含此文件ext_style.css，如下所示：

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

以下示例演示了如何在HTML文件中包含外部CSS文件：

<html>
<head>
   <link type = "text/css" href = "ext_style.css"/>
</head>   
<body>
   <div>
      <h1>Hello World !!!</h1>
      <p>这是一个示例CSS代码。</p>
   </div>
</body>
</html>

导入CSS - @import规则

@import用于导入外部样式表，方式类似于<link>元素。唯一需要注意的是，@import规则必须声明在文档顶部。以下是@import规则的通用语法。

语法

参考以下两个CSS文件：style.css和demostyle.css

style.css

body {
   background-color: peachpuff;
}

demostyle.css

@import url("style.css");

h1 {
   color: #36CFFF; 
}

p {
   font-size: 1.5em;
   color: white;
}

div {
   border: 5px inset gold;
   background-color: black;
   width: 300px;
   text-align: center;
}

您只需要在HTML文档的<link>标签中包含定义了@import规则的样式表，如下所示：

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

示例

以下示例演示了@import规则的使用，其中一个样式表可以导入到另一个样式表中：

<html>
<head>
   <link type = "text/css" href = "demostyle.css">
</head>   
<body>
   <div>
      <h1>Hello World !!!</h1>
      <p>这是一个示例CSS代码。</p>
   </div>
</body>
</html>

CSS规则覆盖

我们讨论了在HTML文档中包含样式表规则的不同方法。以下是覆盖任何样式表规则的规则。

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

CSS注释包含

很多时候，您可能需要在样式表块中添加额外的注释。因此，在样式表中注释任何部分非常容易。您只需将注释放在/*...这是样式表中的注释...*/中。

您可以使用/*...*/来注释多行块。

示例

<html>
<head>
   <style>
      h1 {
         color: #36CFFF; 
      }

      p {
         font-size: 1.5em;
         color: red;
         /* 这是一个单行注释 */
         text-align: center;
      }
      
      div {
         border: 5px inset gold;
         /* 这是一个多行注释
         background-color: black;
         width: 300px;
         text-align: center;
         */
      }
   </style>
</head>

<body>
   <div>
      <h1>Hello World !!!</h1>
      <p>这是一个示例CSS代码。</p>
   </div>
</body>
</html>