在HTML中引用CSS有几种方法，包括内部样式表、外部样式表和内联样式，下面将详细介绍这些方法，并提供相应的示例代码。
（图片来源网络，侵删）
1. 内部样式表
内部样式表是将CSS代码直接嵌入到HTML文档的<head>标签内的<style>标签中，这种方法适用于较小的项目或单个HTML文件。
<!DOCTYPE html>
<html>
<head>
<title>内部样式表示例</title>
<style>
body {
backgroundcolor: lightblue;
}
h1 {
color: white;
textalign: center;
}
p {
fontfamily: verdana;
fontsize: 20px;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个使用内部样式表的示例。</p>
</body>
</html>
2. 外部样式表
外部样式表是将CSS代码保存在一个独立的外部文件中，然后在HTML文档中使用<link>标签引用该文件，这种方法适用于较大的项目或多个HTML文件共享相同的样式。
创建一个名为styles.css的外部CSS文件：
body {
backgroundcolor: lightblue;
}
h1 {
color: white;
textalign: center;
}
p {
fontfamily: verdana;
fontsize: 20px;
}
在HTML文档中使用<link>标签引用该外部样式表：
<!DOCTYPE html>
<html>
<head>
<title>外部样式表示例</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个使用外部样式表的示例。</p>
</body>
</html>
3. 内联样式
内联样式是将CSS属性直接应用于HTML元素，通过在元素的style属性中添加CSS规则来实现，这种方法可以快速修改单个元素的样式，但不建议在整个页面上广泛使用。
<!DOCTYPE html>
<html>
<head>
<title>内联样式示例</title>
</head>
<body>
<h1 style="color: white; textalign: center;">欢迎来到我的网站</h1>
<p style="fontfamily: verdana; fontsize: 20px;">这是一个使用内联样式的示例。</p>
</body>
</html>
本文来自投稿，不代表科技代码立场，如若转载，请注明出处https://www.cwhello.com/443930.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
