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样式的四种方法，每种方法都有其优点和适用场景，可以根据具体情况选择使用。
此文章发布者为：Python技术站作者[metahuber]，转载请注明出处：http://pythonjishu.com/html-embedded-css-style/
微信扫一扫 
支付宝扫一扫 