Css 简明教程

CSS - Inclusion

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

Embedded CSS - The <style> Element

你可以使用 <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>

它将产生以下结果 −

Attributes

与 <style> 元素关联的属性为 −

Inline CSS - The style Attribute

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

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

Attributes

Example

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

<html>
   <head>
   </head>

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

它将产生以下结果 −

External CSS - The <link> Element

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

以下是在通用语法中包含外部 CSS 文件 −

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

Attributes

与 <style> 元素关联的属性为 −

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 = " all" />
</head>

Imported CSS - @import Rule

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

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

这里 URL 是包含样式规则的样式表文件的 URL。您也可以使用另一种语法 −

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

Example

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

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

CSS Rules Overriding

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

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

Handling old Browsers

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

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

CSS Comments

很多时候，您可能需要在您的样式表块中放置额外的注释。因此，在样式表中注释任何部分非常容易。您可以将注释简单地放在 / …..this is a comment in style sheet….. / 中。

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

它将产生以下结果 −