跳转到内容

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。