1、创建一个名为styles.css的CSS文件,并添加一些样式:
body {
font-family: Arial, sans-serif;
background-color: lightblue;
}
h1 {
color: darkblue;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
}
2、创建一个名为index.html的HTML文件,并使用<link>标签引用styles.css文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>引用CSS示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>在这个例子中,我们将展示如何在HTML中引用CSS,我们需要创建一个CSS文件(如上所示),然后在HTML文件中使用<link>标签引用它,这样,我们就可以在HTML文件中使用CSS定义的样式了。</p>
<p>在这个例子中,我们为页面设置了字体、背景颜色、标题颜色和段落样式,通过这种方式,我们可以为整个网站或特定部分应用一致的样式,我们还可以使用外部CSS文件来组织和管理样式,使代码更加整洁和易于维护。</p>
<p>在HTML中引用CSS是一种非常有效的方法,可以帮助我们创建美观且具有一致性的网站,通过学习和实践,我们可以更好地利用这一技术来提升我们的网页设计水平。</p>
</body>
</html>
现在,当你打开index.html文件时,你应该能看到一个带有标题和段落样式的页面,这些样式来自于我们在styles.css文件中定义的CSS规则。



还没有评论,来说两句吧...