- 内联样式
在HTML标签中使用style属性来直接定义CSS样式。这种方式简单易用，但不适合复杂的样式设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联样式示例</title>
</head>
<body>
<h1 style="color: red; font-size: 24px;">这是一个标题</h1>
<p style="font-family: Arial; font-size: 14px;">这是一个段落。</p>
</body>
</html>- 内部样式表
在HTML文档的<head>标签内使用<style>标签来编写CSS样式。这种方式适用于简单的样式设置，但对于复杂的样式设置，建议使用外部样式表。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式表示例</title>
<style>
h1 {
color: red;
font-size: 24px;
}
p {
font-family: Arial;
font-size: 14px;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>- 外部样式表
将CSS样式代码保存在一个单独的文件中，然后在HTML文档的<head>标签内使用<link>标签来引入外部样式表。这种方式适用于复杂的样式设置，可以方便地管理和维护样式代码。
创建一个名为style.css的CSS文件：
h1 {
color: red;
font-size: 24px;
}
p {
font-family: Arial;
font-size: 14px;
}在HTML文档中引入外部样式表：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>- @import导入外部样式表（不推荐）
在HTML文档的<style>标签内使用@import规则来导入外部样式表。这种方式已经被废弃，不建议使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>@import导入外部样式表示例</title>
<style>
@import url("style.css");
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>相关问题与解答：
问题1：如何在JSP中设置全局CSS样式？
答：在JSP中设置全局CSS样式，可以使用内部样式表或外部样式表的方式。将需要设置的全局CSS样式代码放在<style>标签内或外部CSS文件中，然后在所有需要应用这些样式的HTML元素上添加相应的类名或ID，最后在CSS代码中使用这些类名或ID来定义样式。例如：
<!-- 内部样式表 -->
<style>
.global-class { color: blue; } /* 设置全局颜色为蓝色 */
</style>
...
<!-- HTML元素 -->
<p class="global-class">这是一个全局颜色的段落。</p>
<!-- 外部样式表 -->
/* style.css */
.global-class { color: blue; } /* 设置全局颜色为蓝色 */ ...原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/126621.html
微信扫一扫 