CSS（网页样式语言）基础

所谓全栈，个体可以独立地完成系统的设计、开发、测试、部署以及运维。打通一个领域从无到有的全过程。

为什么会有 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;
}