CSS学习一:CSS如何工作
1.什么是CSS
CSS是一种用于向用户指定文档如何呈现的语言 — 它们如何被指定样式、布局等。
文档通常是用标记语言结构化的文本文件 — HTML 是最常用的标记语言, 但也有其他的标记语言,比如 SVG 或者 XML。
呈现文档给用户意味着将其转换为用户可用的形式。浏览器,比如 Firefox, Chrome 或者 Internet Explorer,被设计用于可视化呈现文档。
2. CSS如何影响HTML
Web浏览器将CSS规则应用于文档以影响它们的显示方式。一个CSS规则由以下组成:
- 一组 属性 ,属性的值更新了 HTML 的内容的显示方式。比如,我想让元素的宽度是其父元素的50%,或者元素背景变为红色。
- 一个 选择器,它选择元素,这(些)元素是你想应用这些最新的属性值于其上的元素。比如,我想将我的CSS规则应用到我HTML文档中的所有段落上。
样式表中的一组CSS规则确定了网页如何显示。
一个CSS示例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
对应的CSS
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
第一条规则从 h1
选择器开始,这意味着它将其属性值应用到 “ 元素上,它包含三个属性和属性各自的值(每个 属性/值 对称为一个声明):
- 第一个声明将文本颜色设置为蓝色;
- 第二个声明将背景颜色设置为黄色;
- 第三个声明将标题(h1是标题元素)边框(border)设置为:1像素宽、实线(不是虚线、点线等)、颜色黑色。
第二个规则从 p 选择器开始,这意味着它将其属性值应用到 “ 元素上。它包含一条声明,该声明设置字体颜色为红色。
在Web浏览器中,上面的代码将产生以下输出:
3. CSS实际上如何工作
当浏览器显示文档时,它必须将文档的内容与其样式信息结合。它分两个阶段处理文档:
DOM
DOM是一种树形结构. 标记语言中的每个元素,属性,文本片段都变为一个 DOM 节点。这些节点由它们与其它 DOM 节点的关系来定义。有的元素是某些子节点的父节点,且这些子节点有兄弟(节点)。
由于 DOM 是 CSS 与文档内容的相遇之处,理解 DOM 有助于设计,调试和维护 CSS 文件。
DOM的表示
先看一段HTML代码:
<p>
Let's use:
<span>Cascading</span>
<span>Style</span>
<span>Sheets</span>
</p>
在该 DOM 中, <p>
元素所对应的节点是父节点。它的子节点是一个文本节点和我们的一些 <span>
元素对应的节点。这些 SPAN
结点也是父节点,它们各自的文本节点就是它们的子节点:
P
├─ "Let's use:"
├─ SPAN
| └─ "Cascading"
├─ SPAN
| └─ "Style"
└─ SPAN
└─ "Sheets"
这就是浏览器解释先前的HTML片段的过程 —它渲染上述的DOM树,之后在浏览器中像这样输出它。
应用CSS到DOM
如果将下面CSS应用到上面HTML上:
span {
border: 1px solid black;
background-color: lime;
}
浏览器会解析 HTML 并通过它创建 DOM,之后解析 CSS。由于 CSS 只有一个可用的规则,该规则有一个span选择器,它会将这个规则应用到这三个<span>
的每一个上。更新后的输出如下所示:
## 4. 将 CSS 应用到 HTML 上
4.1 外部样式表
将 CSS 保存在一个独立的扩展名为 .css 的文件中,并从HTML的 “中引用它 ,即CSS与HTML是两个文件。
4.2 内部样式表
将你的 CSS 放置在
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
这在某些情况下很有用(也许正在使用一个内容管理系统,不能直接修改 CSS 文件),但它不如外部样式表高效 —— 在网站中,CSS 将需要在每个页面重复,并且需要更新时要更改的多个位置。
4.3 内联样式
内联样式是仅影响一个元素的CSS声明,被 style
属性包括着:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>
在不必要的情况下,不要这样做,这样不仅难以维护,且它还混合了 CSS 表示的样式信息和 HTML 的结构信息,使 CSS 难以阅读和理解。