怎么在css中使用外部样式表
CSS（层叠样式表） 是一种非常重要的 Web 开发技术，用于设置 HTML 文档的样式和布局。在CSS中使用外部样式表可以帮助我们将样式集中到一个文件中，这样可以使代码更加清晰、易于维护和组织。
外部样式表是使用链接标签在HTML文档中引入样式信息的一种方法。在本文中，我们将介绍如何使用外部样式表来管理网页的样式。
1. 创建样式表文件
首先，我们需要创建一个存放 CSS 样式集的文件。该文件通常以 .css 作为扩展名，并保存在网站的所在目录下或者子目录中。下面是一个简单的样式表示例：
/* style.css */
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
font-size: 2em;
margin: 0 0 20px 0;
}
p {
color: #777;
font-size: 1.2em;
line-height: 1.5;
}
2. 使用链接标签引入样式表
在需要将样式应用于HTML文档的页面中，我们可以使用链接标签将样式表文件链接进来。
下面是一个简单的 HTML 文件示例：
<!DOCTYPE html>
<html>
<head>
<title>My page title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Welcome to my page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
在上面的例子中，<link> 标签被放置在 HTML 页面 <head> 元素区块中。要链接样式表，我们需要提供以下信息：
- rel 属性：指定关系类型，通常是 'stylesheet'。
- type 属性：指定样式表文件的类型，通常是 'text/css'。
- href 属性：指定样式表文件的链接地址。
3. 链接多个样式表文件
如果需要使用多个样式表文件，您只需要将它们以相同的方式链接到HTML文档中。例如：
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> <link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-width: 768px)">
在上面的例子中，我们链接了三个不同的样式表文件：
- style.css：应用于所有屏幕大小，提供了页面的基本样式。
- print.css：应用于打印页面，覆盖了某些元素的样式，例如图片、广告等。
- mobile.css：应用于小屏幕设备，重新排列布局和样式，使页面更加易于访问。
在最后一个链接中，我们还使用 media 属性来确定样式表应该在哪种媒体类型下生效。
4. 使用 @import 引入样式表
另外一种引入外部样式表的方式是使用 CSS 的 @import 指令。该指令在样式表中声明，使您能够通过其他样式表中引入，也可以像上面的链接标签一样在 HTML 文件中使用。
例如：
/* main.css */
@import url("normalize.css");
@import url("layout.css");
/* ... */
/* index.html */
<!DOCTYPE html>
<html>
<head>
<title>My page title</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
...
</body>
</html>
在上面的例子中，我们在 main.css 中使用了 @import 指令来引入 normalize.css 和 layout.css。
在这种情况下，您需要注意的是：使用多个 @import 语句可能会引起加载页面时的性能问题。这是因为每个文件都需要花费额外的时间来加载。
总结：
使用外部样式表，可以帮助我们更好地组织和管理页面样式，而不需要将样式代码直接写入 HTML 页面中。为了链接样式表，我们需要通过链接标签链接样式表文件，也可以使用 @import 指令在样式表中声明。我们还可以链接多个样式表文件，并且针对特定的媒体类型使用 media 属性来控制样式表在不同设备上的应用。