CSS 使用方式

插入CSS的三种方法

插入样式表有三种方法：

外部样式表
内部样式表
内联样式

外部样式表

使用外部样式表，您只需更改一个文件即可更改整个网站的外观！每个页面必须包含对<link>元素内外部样式表文件的引用。<link>元素位于<head>部分内：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

尝试一下

可以在任何文本编辑器中编写外部样式表。该文件不应包含任何html标记。样式表文件必须以.css扩展名保存。以下是“mystyle.css”的外观：

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

注意：请勿在属性值和单位之间添加空格（例如margin-left:20 px;）。正确的方法是：margin-left:20px;

内部样式表

如果一个页面具有唯一样式，则可以使用内部样式表。内部样式在<style>元素内定义，位于HTML页面的<head>部分内：

<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>

尝试一下

内联样式

内联样式可用于为单个元素应用唯一样式。要使用内联样式，请将style属性添加到相关元素。style属性可以包含任何CSS属性。下面的示例显示了如何更改<h1>元素的颜色和左边距：

<h1 style="color:blue;margin-left:30px;">这是标题</h1>

尝试一下

提示：内联样式失去了样式表的许多优点（通过将内容与表示混合）。谨慎使用这种方法。

多个样式表

多重样式表的优先级：

内联样式（在HTML元素中）
外部和内部样式表（在头部）
浏览器默认

第一个具有最高优先级，因此，内联样式具有最高优先级，并将覆盖外部和内部样式和浏览器默认值。

如果在指向外部样式表的链接之后定义了内部样式，则<h1>元素将为“orange”：

<head>
  <meta charset="utf-8">
  <title>菜鸟教程（cainiaoya.com）</title>
  <link rel="stylesheet" type="text/css" href="/jc_script/mystyle.css">
  <style>
  h1 {
    color: orange;
  }
  </style>
</head>

尝试一下

但是，如果在链接到外部样式表之前定义了内部样式，则<h1>元素将为“navy”：

<head>
  <meta charset="utf-8">
  <title>菜鸟教程（cainiaoya.com）</title>
  <style>
  h1 {
    color: orange;
  }
  </style>
  <link rel="stylesheet" type="text/css" href="/jc_script/mystyle.css">
</head>

尝试一下

插入CSS的三种方法

外部样式表

内部样式表

内联样式

多个样式表

相关页面