所谓全栈，个体可以独立地完成系统的设计、开发、测试、部署以及运维。打通一个领域从无到有的全过程。
为什么会有 markdown 文本编辑显示工具呢，因为 html 太重了。markdown 是 html 的一种简化思路，css 则是另外一种。css 是对 html 其中部分工作的提取和分担，这部分的工作就在于 html 各种标签的属性以及 style 属性的定制等。使得 html 单纯用于文档结构格式和整体布局。
css 是 html 的一个辅助语言，用来描述网页样式，html 没有css也可以工作（可以通过标签的各种属性以及 style 属性定制样式），但 css 可以把样式做抽象，和 html 剥离，这样 html 单纯用作布局（css 与 html 的关系因此也可以看做，抽象和分离的关系）。
hello_world.html
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>hello world</h1> </body> </html>style.css
h1 { color: red }
1. 设置标签样式
CSS 样式通常写在
<head></head>下的<style></style>下：<html> <head> <style type="text/css"> </style> </head> <body> ... </body> </html>我们可以在 style 标签内将 body 标签的前景色设置为红色：
<style type="text/css"> body { color: red; } </style>
2. 设置 id 样式
比如我们在网页主体（body）中使用
<div>标签（div，division，区块，用于划分版区），定义一个 id 为 swatch 的版区：<body> <div id="swatch"> </div> </body>通过 # 进行索引，然后设置样式：
<style type="text/css"> #swatch { width: 150px; height: 100px; color: #fff; background-color:blue; } </style>
3. 设置 class 的样式
class 类属性用来标识一组具有相同性质的元素；
<body> <p class="marker">....</p> <p> <span class="marker">....</span> <span class="marker">....</span> </p> </body>通过 . 进行选择定位：
<style type="text/css"> .marker { background-color:#ff; } </style>
4. 复合选择器（compound selector）
<div id="bt">
<a >....</a>
</div>
<p>
<a ...></a>
</p>这时如何定位<div>下的 <a>而不是<p>下的呢？就要用到 compound selector 的概念了：
#bt a {
text-decoration: none;
}