前言
前文再续，书接上一回【前端学习之路】html 的结构与语义化标签
我们终于看到了这个新世界的大门，但是大门好 dry 噢~
要不给他上个色吧（￣︶￣）↗
css的引入
在前端的世界里，一般我们都把各种风格设计的实现叫做样式。
那想要实现的第一步就是引入样式了。（无论是自己写，还是当勤劳的搬运工）。
引入的三种方式：
| 方式 | 例子 |
|---|---|
| 外部引入 | <link href='你的css地址（可外网，可内部）'> @import(路径.css) |
| 内部引入 | <head>标签里，加入<style>标签 |
| 内联样式 | <div style="color: red;"></div> |
除内联以外添加样式的其他方法：
假设我们有这么一个页面上有这么一个标签： <div id='a' class='b'></div>
| 方式 | 例子 |
|---|---|
| 标签 | div { color: black; } |
| class | .b { color: blue; } |
| id | #b { color: red; } |
还有一系列的伪类和伪元素之类的等等……就以后深入的时候再研究啦~
css的优先级
知道了怎样引入了以后，就要了解一下，哪种情况的引入，才是他最终的输出结果喔。就好比每个人都拿着一块钱，但不同的货币代表他的购买能力是不一样的。
首先从引入方式来对比：
外部引入 < 内部引入 < 内联样式
接着从不同挂载方式对比：
标签 < class < id < !important
像上面假设的例子一样个，最后我们得到的就是红色的字体啦（￣︶￣）↗
css命名规范
市面上比较流行的规范是 BEM，当然也有其他类似 OOCSS、SMACSS等等。
BEM 规范
.block {} /** 代表了更高级别的抽象或组件。 **/
.block__element {} /** 代表 .block 的后代，用于形成一个完整的 .block 的整体。 **/
.block-name { } /** 代表 .block 连字符 **/
.block--modifier {} /** 代表 .block 的不同状态或不同版本。 ** /
一般来说这种东西自己看得懂就行，只要不是无意义，或者别的奇奇怪怪的符号。
规范也只是为了方便管理和能快速找到具体位置而已~
（未完待续……）
