链接外部样式表
在<head>
标签内,使用<link>
标签将外部CSS文件链接到HTML文件。如下所示:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
属性rel规定文档与被链接文档之间的关系,type属性规定被链接文档的MIME类型,href属性指定被链接文档的URL。
在上述代码中,样式表文件名为“style.css”,保存在HTML文件所在目录中。
嵌入样式表
在<head>
标签内,使用<style>
标签将CSS样式直接嵌入到HTML文件中。如下所示:
<head>
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: red;
}
</style>
</head>
使用内联样式
在HTML标签内,使用style属性添加行内样式。如下所示:
<h1 style="color: red;">Hello world!</h1>
示例代码:
HTML文件:
<!DOCTYPE html>
<html>
<head>
<title>HTML引用CSS示例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>欢迎来到HTML引用CSS示例</h1>
<p>这是一个段落</p>
<button class="myBtn">点击我</button>
</body>
</html>
CSS文件:
body {
background-color: #f0f0f0;
}
h1 {
color: red;
}
.myBtn {
background-color: blue;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
}
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:HTML如何引用CSS? - Python技术站