码农教程 - 一技在手,衣食无忧! tools

目录

CSS 如何使用

❮ 上一节 下一节 ❯

当浏览器读取样式表时，它将根据样式表中的信息格式化HTML文档。

插入 CSS 的三种方法

插入样式表的方法有以下三种：

  • 外部CSS
  • 内部CSS
  • 内联CSS

外部CSS

使用外部样式表，您只需更改一个文件即可更改整个网站的外观！

每个 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

示例

外部样式在 HTML 页面的 <head> 部分的 <link> 元素内定义：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
亲自试一试 »

外部样式表可以在任何文本编辑器中编写，并且必须使用 .css 扩展名保存。

外部 .css 文件不应包含任何 HTML 标记。

"mystyle.css" 文件的外观如下：

"mystyle.css"

body {
  background-color: lightblue;
}

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

笔记：不要在属性值 (20) 和单位 (px) 之间添加空格：
错误（空格）：margin-left: 20 px;
正确（无空格）：margin-left: 20px;

内部CSS

如果单个 HTML 页面具有独特的样式，则可以使用内部样式表。

内部样式在 head 部分的 <style> 元素内定义。

示例

内部样式在 HTML 页面的 <head> 部分的 <style> 元素内定义：

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

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
亲自试一试 »

内联CSS

内联样式可用于为单个元素应用独特的样式。

要使用内联样式，请将 style 属性添加到相关元素。 style 属性可以包含任何 CSS 属性。

示例

内联样式在相关元素的 "style" 属性中定义：

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
亲自试一试 »

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

多种样式表

如果在不同样式表中为同一选择器（元素）定义了某些属性，则将使用上次读取样式表中的值。

假设一个外部样式表<h1> 元素具有以下样式：

h1 {
  color: navy;
}

然后，假设一个内部样式表<h1> 元素还具有以下样式：

h1 {
  color: orange;   
}

示例

如果定义了内部样式后到外部样式表的链接，<h1> 元素将为 "orange"：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
亲自试一试 »

示例

但是，如果定义了内部样式前到外部样式表的链接，<h1> 元素将为 "navy"：

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
亲自试一试 »

级联顺序

当为 HTML 元素指定多个样式时，将使用哪种样式？

页面中的所有样式都会按照以下规则 "cascade" 放入新的 "virtual" 样式表中，其中第一个样式具有最高优先级：

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

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

亲自试一试 »

通过练习测试一下

练习:

添加外部样式表，其 URL 为："mystyle.css"。

<head>

</head>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

开始练习


❮ 上一节 下一节 ❯