如何应用外链样式
时间: 2023-07-20 17:13:35 浏览: 63
要应用外链样式,需要在 HTML 文档中使用 `<link>` 标签来引入样式表文件,并将样式表文件的路径指定为 `href` 属性的值。下面是一个简单的例子:
1. 首先,在 HTML 文档的 `<head>` 标签内添加 `<link>` 标签来引入外链样式,如下所示:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- HTML 页面内容 -->
</body>
</html>
```
在这个例子中,`<link>` 标签指定了一个外链样式表,文件路径为 `style.css`。
2. 创建样式表文件 `style.css`,并在其中编写 CSS 样式规则:
```
/* style.css */
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
h1 {
font-size: 24px;
color: #0088cc;
}
p {
line-height: 1.5;
margin-bottom: 20px;
}
```
在这个例子中,`style.css` 文件定义了三个基本的 CSS 样式规则,分别应用于页面的 `body`、`h1` 和 `p` 元素。
3. 最后,打开 HTML 页面,即可看到应用了外链样式的页面效果。
通过外链样式,我们可以将单独的样式表文件应用于多个 HTML 页面,使得页面样式的管理变得更加灵活和方便。