1、外部样式表 :也是最常用的一种,是将css附加到文档中的最常见和最有用的方法,可以将css链接到多个页面,从而允许使用相同的样式表设置所有页面的样式。在大多数情况下,一个站点的不同页面看起来几乎都是一样的(每个页面的这两个部分header、footer都是一样的),因此可以使用相同的规则集来获得基本的外观。外部样式表是指将CSS编写在扩展名为 .css的单独文件中,并从HTML<link>元素引用它即可!
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body></html>
2、内部样式表:是指不使用外部CSS文件,而是将CSS放在HTML文件<head>标签里的<style>标签之中。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {color: red; }
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body></html>
有时候,这种方法会比较有用(比如你使用的内容管理系统不能直接编辑CSS文件),但该方法和外部样式表比起来更加低效 。在一个站点里,不得不在每个页面里重复添加相同的CSS,并且在需要更改CSS时修改每个页面文件。
3、内联样式表:存在于HTML元素的style属性之中。其特点是每个CSS表只影响一个元素:
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
除非你有充足的理由,否则不要这样做!它难以维护(在需要更新时,你必须在修改同一个文档的多处地方),并且这种写法将文档结构和文档表现混合起来了,这使得代码变得难以阅读和理解。将不同类型的代码分开存放在不同的文档中,会让我们的工作更加清晰。在某些地方,内联样式更常见,甚至更可取。 如果您的工作环境确实很严格(也许网站管理系统(CMS)仅允许您编辑HTML正文),则可能不得不使用它们。
本回答被网友采纳