CSS 创建与使用学习笔记

一、CSS 的作用

CSS（层叠样式表）用于控制 HTML 文档的样式和布局。当浏览器读取一个样式表时，它会根据样式表中的规则来格式化 HTML 文档，从而实现页面的美化和布局调整。

二、插入样式表的方法

CSS 可以通过以下三种方式插入到 HTML 文档中：

（一）外部样式表（External style sheet）

外部样式表是将 CSS 代码保存在一个单独的 .css 文件中，然后通过 HTML 文档中的 <link> 标签引入。这种方式适用于需要在多个页面中应用相同样式的情况，便于维护和更新。

示例代码

HTML复制

复制代码

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

预览

在 mystyle.css 文件中，可以定义如下样式：

css复制

复制代码

hr { color: sienna; }
p { margin-left: 20px; }
body { background-image: url("/images/back40.gif"); }

注意：在属性值与单位之间不要留有空格，例如正确的写法是 margin-left: 20px，而不是 margin-left: 20 px。

（二）内部样式表（Internal style sheet）

内部样式表是将 CSS 代码放在 HTML 文档的 <head> 部分的 <style> 标签中。这种方式适用于单个文档需要特殊样式的情况。

示例代码

HTML复制

复制代码

<head>
  <style>
    hr { color: sienna; }
    p { margin-left: 20px; }
    body { background-image: url("images/back40.gif"); }
  </style>
</head>

预览

（三）内联样式（Inline style）

内联样式是直接在 HTML 元素的 style 属性中定义样式。这种方式会将表现和内容混杂在一起，损失样式表的许多优势，但适用于样式仅需要在一个元素上应用一次的情况。

示例代码

HTML复制

复制代码

<p style="color: sienna; margin-left: 20px;">这是一个段落。</p>

预览

三、多重样式的优先级

当不同的样式表或样式定义冲突时，CSS 会根据以下优先级规则来决定最终应用的样式：

内联样式（Inline style）
内部样式表（Internal style sheet）
外部样式表（External style sheet）
浏览器默认样式

示例

假设外部样式表 style.css 中定义了如下样式：

css复制

复制代码

h3 {
  color: blue;
}

而内部样式表定义了如下样式：

css复制

复制代码

h3 {
  color: green;
}

那么在 HTML 文档中，<h3> 元素的样式将取决于它们的定义顺序：

如果外部样式表在内部样式表之前定义，则 <h3> 元素的颜色将是绿色（内部样式表的规则覆盖外部样式表的规则）。
如果外部样式表在内部样式表之后定义，则 <h3> 元素的颜色将是蓝色（外部样式表的规则覆盖内部样式表的规则）。

示例代码

HTML复制

复制代码

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
    h3 { color: green; }
  </style>
</head>
<body>
  <h3>显示绿色，是内部样式</h3>
</body>

预览

如果外部样式表在内部样式表之后定义：

HTML复制

复制代码

<head>
  <style>
    h3 { color: green; }
  </style>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h3>显示蓝色，是外部样式</h3>
</body>