CSS如何工作
| 先决条件: | 基本计算机知识，安装的基本软件，基本知识 developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files\">处理文件和HTML基础知识(了解 HTML简介)。 |
|---|---|
| 目的: | 要了解CSS是什么，以及它是如何工作的基本水平。 |
什么是 CSS?
CSS是一种用于指定如何向用户呈现文档的语言 —如何指定他们的风格，布局 etc.
一个网页文档通常是用标记语言结构化的文本文件 — HTML 是最常用的标记语言, 但你依然可以遇见一些其他的标记语言，比如SVG或者XML| SVG or XML.
向用户呈现文档意味着将文档转换为适合受众群体的可用表单。 浏览器，例如 .org / zh-CN / docs / Glossary / Mozilla_Firefox"class ="glossaryLink"> Firefox ， class ="glossaryLink"> Chrome 或 Internet Explorer ， 被设计成例如在计算机屏幕，投影仪或打印机上可视地呈现文档。
CSS如何影响HTML？?
Web浏览器将CSS规则应用于文档以影响它们的显示方式。 CSS规则由以下形成:
- 一组 属性 的集合，它的内容表示 HTML 的内容如何呈现。比如，我想让元素的宽度是其父元素的50％，元素背景是红色。
- 一个 选择器，它选择了要应用这些属性值的元素。比如，我想要应用我的CSS规则到HTML文档中的所有段落。
样式表中包含的一组CSS规则确定了网页的外观，你将在下一篇文章中了解更多关于CSS语法的内容 — CSS Syntax.
一个基础CSS示例
上面的描述可能意义不明确，所以让我们通过提出一个快速示例来确保清楚描述的。首先，我们使用一个简单的HTML文档，包含一个 <h1> 元素和一个 <p> 元素((注意到，使用 <link> 元素将样式表应用到 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> 元素，它包含三个属性及其值(每个属性/值对称为声明):
- 第一个声明设置文本的颜色是蓝色；
- 第二个声明将背景颜色设置为黄色；
- 第三个声明在标题周围放置一个1像素宽的边框，实线(不是虚线、点线等)，边框颜色是黑色。
第二个规则从 p 选择器开始，这意味着规则仅仅对 <p> 元素生效。它包含一条设置字体颜色为红色的声明。
在Web浏览器中，上面的代码将产生以下输出:
这不怎么好看，但是说明了 CSS 是如何工作的。
主动学习:编写第一个CSS
现在我们给你一个机会来编写自己的一点CSS。你可以使用下面的实时可编辑示例的输入区域，有一些简单的HTML元素和一些CSS属性，用类似于上面看到的方式，试着添加一些简单的样式声明到你的CSS，来定义 HTML 的样式。
如果写错了，你可以随时点击 "重置" 按钮重置。如果你真的不知道怎么写，点击显示结果按钮看到一个可行的回答。
Playable code
<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
<h2>HTML Input</h2>
<textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><h1>Hello World!</h1>
<p>This is a paragraph.</p>
<ul>
<li>This is</li>
<li>A list</li>
</ul></textarea>
<h2>CSS Input</h2>
<textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">h1 {
}
p {
}
li {
}</textarea>
<h2>Output</h2>
<div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
<div class="controls">
<input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
<input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
</div>
</div>
var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");
var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);
function drawOutput() {
output.innerHTML = htmlInput.value;
styleElem.textContent = cssInput.value;
}
reset.addEventListener("click", function() {
htmlInput.value = htmlCode;
cssInput.value = cssCode;
drawOutput();
});
solution.addEventListener("click", function() {
htmlInput.value = htmlCode;
cssInput.value = 'h1 {\n color: blue;\n background-color: yellow;\n border: 1px solid black;\n}\n\np {\n color: red;\n}\n\nli {\n text-shadow: 2px 2px 3px purple;\n}';
drawOutput();
});
htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
CSS实际上如何工作？
当浏览器显示文档时，它将文档的内容与其样式信息组合。它分两个阶段处理文档:
关于 DOM
DOM具有树状结构。 标记语言中的每个元素，属性和文字都将成为 DOM节点 / a>。 节点由它们与其他DOM节点的关系定义。 一些元素是子节点的父节点，子节点具有兄弟节点。
了解DOM有助于您设计，调试和维护CSS，因为DOM是您的CSS和文档的内容满足。
DOM表示
而不是一个漫长而无聊的解释，让我们举一个例子来看看DOM和CSS如何一起工作。
让我们假设下面的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树，然后在浏览器中输出它:
p {margin:0;}
应用 CSS 到 DOM
假设我们在文档中添加了一些CSS，以便对其进行风格化。 同样，HTML如下:
<p> Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span> </p>
如果我们应用以下CSS:
span {
border: 1px solid black;
background-color: lime;
}
浏览器将解析HTML并从中创建一个DOM，然后解析CSS。 由于CSS中唯一可用的规则有一个 span 选择器，它将应用该规则到三个跨度中的每一个。 更新的输出如下:
如何将CSS应用到HTML
有三种不同的方式将CSS应用于HTML文档，有的方式比其他方式更有用。在这里，我们将简要回顾一下每一种方式:
外部样式表
你已经在这篇文章看到了外部样式表，但是并不知道它的名字。外部样式表是你的CSS写在一个单独的扩展名为.css的文件中，并从HTML <link> 元素中引用它，此时 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;
}
这种方法是最好的，因为你可以使用一个样式表来设置多个文档的样式，并且更新的时候只需要在一个地方更新CSS。
内部样式表
内部样式表是指不使用外部 CSS 文件，而是将你的 CSS 放置在包含在 HTML head 内的 <style> 元素中。此时HTML看起来像这样:
<!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将需要在每个页面重复，并且更新的时候需要更改的多个页面。
内联样式
内联样式是仅影响一个元素的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难以阅读和理解。保持不同类型的代码分离和纯净使得开发和维护代码更为容易。
您唯一使用内联样式是当您的工作环境是受限制性的(也许您的CMS只允许您编辑HTML主体)。
下一步
到了这里你应该理解了 CSS 的基本工作原理和你的浏览器如何处理 CSS。接下来你将会学习 CSS 语法 (CSS syntax).