📅 最后修改于: 2023-12-03 14:58:13.750000 🧑 作者: Mango
在网页设计中，样式表是一个重要的组成部分，可以将网页的内容、布局和样式分离。CSS 可以让我们在不改变 HTML 代码的情况下改变页面的样式，并且可以减少代码的重复率。
为了使用 CSS，我们需要在 HTML 文档中使用 元素将 CSS 文件链接到 HTML 文档中。
<link rel="stylesheet" href="style.css">
<link> 标签定义了文档与外部资源之间的关系。在这种情况下，rel 属性的值为 "stylesheet"，表示文档是一个样式文件。href 属性为样式表文件的链接路径。
在 HTML 文档中，样式表可以放在 <head> 元素内或者 <body> 元素内。
将样式表放在 <head> 元素内，可以使页面加载速度更快，因为页面顶部的内容是在加载之前加载的。
<!DOCTYPE html>
<html>
<head>
<title>Link CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is a page with linked CSS.</p>
</body>
</html>
将样式表放在 <body> 元素内，可以使页面更快地显示样式，但是页面加载速度会慢一些，因为样式表在文档内容之后加载。
<!DOCTYPE html>
<html>
<head>
<title>Link CSS</title>
</head>
<body>
<link rel="stylesheet" href="style.css">
<h1>Hello World!</h1>
<p>This is a page with linked CSS.</p>
</body>
</html>
外部样式表是将样式表代码放在一个单独的文件中，然后将该文件链接到 HTML 文档中。
为了使用外部样式表，我们需要创建一个文件，命名为 style.css，并将样式代码放在其中。
/* style.css */
body {
background-color: #f1f1f1;
}
h1 {
color: blue;
}
然后在 HTML 文件中链接该样式表：
<!DOCTYPE html>
<html>
<head>
<title>Link CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is a page with linked CSS.</p>
</body>
</html>
内部样式表是将样式表代码放在 <style> 标签内，并将其放在 HTML 文档的 <head> 元素内。
<!DOCTYPE html>
<html>
<head>
<title>Link CSS</title>
<style>
body {
background-color: #f1f1f1;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a page with linked CSS.</p>
</body>
</html>
行内样式是在 HTML 元素内部使用样式。这种方法不太方便，而且如果要修改样式，需要修改每个元素。因此，不推荐使用行内样式。
<!DOCTYPE html>
<html>
<head>
<title>Link CSS</title>
</head>
<body>
<h1 style="color: blue;">Hello World!</h1>
<p style="background-color: #f1f1f1;">This is a page with linked CSS.</p>
</body>
</html>
链接样式表是网页设计中的基础，学习如何正确链接样式表是极为重要的。