Css 简明教程

CSS - Inclusion

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

There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.

Embedded CSS - The <style> Element

你可以使用 <style> 元素将 CSS 规则放到 HTML 文档中。此标签会放在 <head>…​</head> 标签中。使用此语法定义的规则将应用于文档中所有可用的元素。以下是通用语法 −

You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside the <head>…​</head> tags. Rules defined using this syntax will be applied to all the elements available in the document. Here is the generic syntax −

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

它将产生以下结果 −

It will produce the following result −

Attributes

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

Attributes associated with <style> elements are −

Inline CSS - The style Attribute

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

You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. Here is the generic syntax −

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

Attributes

Example

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

Following is the example of inline CSS based on the above syntax −

<html>
   <head>
   </head>

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

它将产生以下结果 −

It will produce the following result −

External CSS - The <link> Element

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

The <link> element can be used to include an external stylesheet file in your HTML document.

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

An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element.

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

Here is the generic syntax of including external CSS file −

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

Attributes

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

Attributes associated with <style> elements are −

Example

考虑一个名为 mystyle.css 且具有以下规则的简单样式表文件 −

Consider a simple style sheet file with a name mystyle.css having the following rules −

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

现在，您可以像下面这样将此文件 mystyle.css 包含在任何 HTML 文档中 −

Now you can include this file mystyle.css in any HTML document as follows −

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

Imported CSS - @import Rule

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

@import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of @import rule.

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

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

Here URL is the URL of the style sheet file having style rules. You can use another syntax as well −

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

Example

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

Following is the example showing you how to import a style sheet file into HTML document −

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

CSS Rules Overriding

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

We have discussed four ways to include style sheet rules in a an HTML document. Here is the rule to override any Style Sheet Rule.

  1. Any inline style sheet takes highest priority. So, it will override any rule defined in <style>…​</style> tags or rules defined in any external style sheet file.

  2. Any rule defined in <style>…​</style> tags will override rules defined in any external style sheet file.

  3. Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable.

Handling old Browsers

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

There are still many old browsers who do not support CSS. So, we should take care while writing our Embedded CSS in an HTML document. The following snippet shows how you can use comment tags to hide CSS from older browsers −

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

CSS Comments

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

Many times, you may need to put additional comments in your style sheet blocks. So, it is very easy to comment any part in style sheet. You can simple put your comments inside /…​..this is a comment in style sheet…​../.

您可以使用 /* …​ */ 以与在 C 和 C++ 编程语言中类似的方式注释多行块。

You can use /* …​.*/ to comment multi-line blocks in similar way you do in C and C++ programming languages.

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>

它将产生以下结果 −

It will produce the following result −