有三种方法可以为网站添加CSS样式:可以使用内部CSS并在<head>HTML文档部分包含CSS规则,链接到包含所有CSS规则的外部.css文件或使用内联CSS来应用特定元素的规则,本教程包含这三种方式的优缺点。

内部CSS

内部CSS代码放在<head>特定页面的部分中,类和ID可用于引用CSS代码,但它们仅在该特定页面上处于活动状态。每次页面加载时都会下载以这种方式嵌入的CSS样式,这样可以提高加载速度。

内部样式表的一个示例:

<head>

  <style type="text/css">

    p {color:white; font-size: 10px;}

    .center {display: block; margin: 0 auto;}

    #button-go, #button-back {border: solid 1px black;}

  </style>

</head>

内部CSS的优点:

样式表只影响一个页面

内部样式表可以使用类和ID

无需上传多个文件,HTML和CSS可以在同一个文件中

内部CSS的缺点:

增加页面加载时间

它只影响一个页面 – 如果要在多个文档上使用相同的CSS,则无用

外部CSS

将CSS添加到网站最方便的方法可能是将其链接到外部.css文件,这样,对外部CSS文件所做的任何更改都将全局反映在网站上,对外部CSS文件的引用放在<head>页面的部分中:

<head>

  <link rel="stylesheet" type="text/css" href="style.css" />

</head>

而style.css包含所有样式规则,例如:

.xleftcol {

   float: left;

   width: 33%;

   background:#809900;

}

.xmiddlecol {

   float: left;

   width: 34%;

   background:#eff2df;

}

外部CSS的优点:

HTML页面的提及更小,结构更清晰

加载速度更快

相同的.css文件可以在多个页面上使用

外部CSS的缺点:

在加载外部CSS之前,页面可能无法正确呈现

内联CSS

内联CSS用于特定的HTML标记,<style>attribute用于设置特定HTML标记的样式。建议不要使用CSS,因为每个HTML标记都需要单独设置样式。如果只使用内联CSS,管理网站可能会变得太难。

使用内联CSS的HTML页面示例:

<!DOCTYPE html>

<html>

<body style="background-color:black;">

<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>

<p style="color:white;">Something usefull here.</p>

</body>

</html>

内联CSS的优点:

如果要测试和预览更改,则非常有用

对快速修复有用

降低HTTP请求

内联CSS的缺点:

内联CSS必须应用于每个元素