- 内联样式
在HTML文件中，可以直接使用<style>标签来编写CSS代码。这种方式适用于较小的项目或者需要快速修改样式的情况。例如：
<!DOCTYPE html>
<html>
<head>
<title>内联样式示例</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个使用内联样式的示例。</p>
</body>
</html>- 外部样式表
将CSS代码保存在一个单独的文件中，然后在HTML文件中通过<link>标签引入该文件。这种方式适用于较大的项目，可以方便地管理和维护样式代码。例如：
创建一个名为styles.css的CSS文件：
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}在HTML文件中引入styles.css文件：
<!DOCTYPE html>
<html>
<head>
<title>外部样式表示例</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个使用外部样式表的示例。</p>
</body>
</html>- 内部样式表（内嵌样式）
在HTML文件中，可以使用<style>标签将CSS代码直接放在<head>标签内。这种方式与内联样式类似，但不会直接将样式应用到元素上，而是作为外部样式表的备选方案。例如：
<!DOCTYPE html>
<html>
<head>
<title>内部样式表示例</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个使用内部样式表的示例。</p>
</body>
</html>- 导入外部样式表（@import）
在CSS文件中，可以使用@import规则导入其他CSS文件。这种方式与外部样式表类似，但需要在CSS文件中进行导入操作。例如：
创建一个名为styles.css的CSS文件：
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}在另一个名为main.css的CSS文件中导入styles.css文件：
@import url("styles.css");原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/128980.html
微信扫一扫