关键词

HTML如何引用CSS?

链接外部样式表

<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;
}

本文链接:http://task.lmcjl.com/news/15984.html

展开阅读全文