包含（Inclusion）

优质

小牛编辑

120浏览

2023-12-01

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

嵌入式CSS - 元素

您可以使用元素将CSS规则放入HTML文档中。此标记位于 ... 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>

属性 (Attributes)

与元素关联的属性是 -

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

属性

值

描述

type

text/css

将样式表语言指定为内容类型（MIME类型）。这是必需属性。

media

screen

tty

projection

handheld

braille

aural

all

指定将在其上显示文档的设备。默认值为all 。这是一个可选属性。

内联CSS - style属性

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

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

属性 (Attributes)

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

例子 (Example)

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

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

外部CSS - 元素

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

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

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

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

属性 (Attributes)

与元素关联的属性是 -

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

属性

值

描述

type

文字css

将样式表语言指定为内容类型（MIME类型）。此属性是必需的。

href

URL

指定具有样式规则的样式表文件。此属性是必需的。

media

screen

tty

projection

handheld

braille

aural

all

指定将在其上显示文档的设备。默认值为all 。这是可选属性。

例子 (Example)

考虑一个名为mystyle.css的简单样式表文件，其中包含以下规则 -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

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

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

导入的CSS - @import规则

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

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

此处URL是具有样式规则的样式表文件的URL。您也可以使用其他语法 -

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

例子 (Example)

以下是演示如何将样式表文件导入HTML文档的示例 -

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

CSS规则覆盖

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

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

处理旧浏览器

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

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

CSS评论

很多时候，您可能需要在样式表块中添加其他注释。因此，在样式表中评论任何部分都非常容易。你可以简单地把你的评论放在/*.这是样式表中的评论..... * /。

您可以使用/ * .... * /以与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>