设计主页 > 网站制作 > 前端开发 >

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

优设 / Sunny萧萧 时间:2016-05-20 09:00

Sunny萧萧:本文作为小白入门级,相对基础,是写给现在想了解一点前端知识的设计师同行们,今天这章用设计师熟悉的PS来解释前端相关的术语,通俗易懂幽默风趣,绝对是小白入门的好教程!

一、样式大集合

之前介绍了“嵌入样式”及“内联样式”,前者只对自己所在的标签起作用,后者对当前页面所有通过了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里的样式叠加。

外联样式呢,即是把内联样式挪到了另一个专属它的地方,以方便管理和调用;

引入的方式是在头部(<head></head>)内title后加入一句:

<link type="text/css"  href=" 样式文件名.css "  rel="stylesheet" />

也就是说,只要是html文件有引入一个写了样式的CSS文件,都是起作用的,所以比起只管一个标签的嵌入样式和管理一个html的内联样式,外联的css文件作用域就相对比较大了。但是优先级却成反比。

15qd20160519

如果一定要问为什么,还记得前面讲的“后来居上”吗?无论是外联或者内联,一般都是放在头部的,而嵌入样式却是紧跟标签的,从浏览器从上到下和从左到右的解析方式来看,同一样式不同值,必定优先采用最后读取的样式。

好了,这便是html中样式的三大引用方式。当然后续还有使用JS添加和引用的,也基本是在这三种之上作文章。暂时用不上,在下面的例子中,由于样式还没有那么多,则还是先采用内联的,方便查看。

排版去咯,接着上期。