维基教科书

CSS/Applying CSS to HTML and XHTML

< CSS

CSS可使用链接、嵌入、内联方法用于HTML或XHTML。对于链接方法，CSS不是存储在HTML页中，而是存储在单独文件中。对于嵌入方法，CSS存放在HTML页面的header section中。对于内联方法，CSS存放在HTML tags的style属性中，例如<div style="font-weight:bold">Bold Font</div>.

最整洁的方法可能是链接，但其它两种方法在网页原型开发时更方便更快。内联方法避免考虑文档包含哪些CSS类。对于大型网站，很多网页共享相同的用户定制样式，链接方法是唯一可行的。

链接

编辑

对于链接形式的CSS, CSS规则保存在单独的文件中。从HTML页引用该文件，增加link元素到head元素中。如下例假定使用文件"style.css"： 

  <head>
    <title>Example Web Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

link元素有3个属性。第一个属性rel告诉浏览器链接目标的类型。第二个属性type告诉浏览器哪种样式表被使用。第三个属性href告诉浏览器到哪个URL去寻找样式表。本例中是相对的URL，也可用绝对URL。

在"style.css"包含如下单条规则： 

 p {
   font-weight:bold;
 }

这告诉浏览器段落(p)中的文本应该绘制为黑体。

绘制例子：

Text that will be formatted.

完整的HTML文档如下： 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example Web Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>Text that will be formatted.</p>
  </body>
</html>

嵌入

编辑

嵌入CSS被放置于HTML文档的头部的样式（style）元素中。例如，希望HTML中的文字为黑体： 

 <!DOCTYPE html>
 <html lang="en">
  <head>
   <title>Example Web Page</title>
  </head>
  <body>
   <p>
    Text that will be formatted.
   </p>
  </body>
 </html>

在文档头部可放入CSS： 

  <head>
   <title>Example Web Page</title>
   <style type="text/css">
    p {
     font-weight:bold;
    }
   </style>
  </head>

CSS被放入style元素中。该元素的属性type的值为text/css，告诉浏览器元素包含的样式表是CSS。如果属性type缺失或者设为不可识别值，CSS将不能用于页面。

例子中的这段CSS告诉浏览器把所有的段落(p)元素的内容显式为黑体。看起来这样：

Text that will be formatted.

嵌套了CSS的完整的页面文件： 

 <!DOCTYPE html">
 <html lang="en">
  <head>
   <title>Example Web Page</title>
   <style type="text/css">
    p {
     font-weight:bold;
     color:green;
    }
   </style>
  </head>
  <body>
   <p>
    Text that will be formatted.
   </p>
  </body>
 </html>

记住，可能的话，总是应该优先使用链接方法而不是嵌入的样式表。这使得可以轻易修改样式表而不必去跟踪不同的HTML文件中的样式信息。

内联

编辑

内联CSS师在元素的开始标记（tag）的style属性中直接指出。例如： 

 <div style="font-weight:bold; color:red;">Bold Font</div>

将被绘制为：

Bold Font

注意，链接的CSS优于嵌入的CSS，而二者都优于内联的CSS。

检索自“https://zh.wikibooks.org/w/index.php?title=CSS/Applying_CSS_to_HTML_and_XHTML&oldid=166757”