设计师的前端小知识之排版三步走起来

一、样式大集合
　　之前介绍了“嵌入样式”及“内‌‌联样式”，前者只对自己所在的标签起作用，后者对当前页面所有通过了class引用了该样式的标签起作用。内联样式一般写在头部，但是当样式积少成多，且其他html页面也要引用当前页面的样式的时候(比如针对body的)就比较麻烦了。你肯定不想再写一遍的
　　所以又出现了“外联样式”，是的，嵌入不足，内联不够，所以拉个外场援助。
　　外联样式是写在另一个文件内的，其文件即格式为 .css ，也称“样式表”，之所以是表我想大概是因为浏览器要像查表一样根据类名来查询吧，然后获取里面的样式内容。其写法跟style/style里的是一模一样的，只不过已经有了专用的 .css文件来装了，自然也就不需要style标签包装了。如果你还稍微有点晕，那下面我就用PS来讲一下吧。
19qd20160519
　　这是在html(psd)文件中“写的”几个div(矩形)，其颜色……咳咳……是不大好看……
18qd20160519
　　其中第几个div(矩形)，添加(或称更改)了样式，此时其他矩形是不受影响，即————嵌入样式
　　然后我新建了一个类(组)class1，颜色叠加值为#e75555
17qd20160519
　　好!!!现在我要变形啦，，哦 不，我要引用了，注意!!注意!!!把第三第四个矩形引用(放入)一下class1类(文件夹)。则可以看到03、04都变了颜色。
hbbb20160519
　　其实作为设计师的我们都知道，如果把四个矩形都放入class1 中，无论01之前是否有叠加颜色，四个都将变为一个颜色，也就是说，在PS中，内联样式(class1-红色)的优先级比嵌入样式(01已叠加的紫色)高。BUT!!! 在html中却是反的，反的，反的……记住哦，之所以这么介绍只是为了告诉你，引用了样式，相当于PS里的样式叠加。
　　外联样式呢，即是把内联样式挪到了另一个专属它的地方，以方便管理和调用;
　　引入的方式是在头部()内title后加入一句：
　　
　　也就是说，只要是html文件有引入一个写了样式的CSS文件，都是起作用的，所以比起只管一个标签的嵌入样式和管理一个html的内联样式，外联的css文件作用域就相对比较大了。但是优先级却成反比。
15qd20160519
　　如果一定要问为什么，还记得前面讲的“后来居上”吗?无论是外联或者内联，一般都是放在头部的，而嵌入样式却是紧跟标签的，从浏览器从上到下和从左到右的解析方式来看，同一样式不同值，必定优先采用较后读取的样式。
　　好了，这便是html中样式的三大引用方式。当然后续还有使用JS添加和引用的，也基本是在这三种之上作文章。暂时用不上，在下面的例子中，由于样式还没有那么多，则还是先采用内联的，方便查看。
　　排版去咯，接着上期。