HTML嵌入CSS样式的方法有以下四种:
style标签嵌入CSS样式
在HTML文档的头部或body部分中通过style标签嵌入CSS样式。可以在style标签中添加任意数量的CSS样式规则。
代码示例:
<!DOCTYPE html>
<html>
<head>
<title>HTML嵌入CSS样式示例</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph with some text.</p>
</body>
</html>
style属性嵌入CSS样式
在HTML标签中使用style属性来嵌入CSS样式。可以在style属性中添加任意数量的CSS样式规则。
代码示例:
<!DOCTYPE html>
<html>
<head>
<title>HTML嵌入CSS样式示例</title>
</head>
<body>
<h1 style="color: red;">Hello World</h1>
<p style="font-size: 18px;">This is a paragraph with some text.</p>
</body>
</html>
link标签引入外部CSS文件
在HTML文档的头部中使用link标签来引入外部的CSS文件。外部CSS文件应该存储在服务器上,并以.CSS扩展名结尾。
代码示例:
<!DOCTYPE html>
<html>
<head>
<title>HTML引入外部CSS文件示例</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph with some text.</p>
</body>
</html>
@import引入外部CSS文件
在style标签中使用@import语法来引入外部CSS文件。外部CSS文件应该存储在服务器上,并以.CSS扩展名结尾。
代码示例:
<!DOCTYPE html>
<html>
<head>
<title>HTML引入外部CSS文件示例</title>
<style>
@import url("styles.css");
</style>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph with some text.</p>
</body>
</html>
以上是HTML嵌入CSS样式的四种方法,每种方法都有其优点和适用场景,可以根据具体情况选择使用。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:HTML嵌入CSS样式(四种方法) - Python技术站