写给设计师的前端指南：一小时搞懂 CSS 属性应用
扫一扫 
扫一扫 
扫一扫 
扫一扫 这个系列会用所有人能看懂的讲解方式，帮助大家掌握 HTML 和 CSS 的基础。 往期回顾： 写给设计师的编程基础：HTML 和 CSS 是什么？有不少同学讨论过，在找工作时老是看见招聘信息要求懂代码，觉得是不是要懂代码才可以当UI设计师，为什么做设计还需要编程？ 阅读文章 >设计师需要了解的 HTML 基础疾速入门指南上期我们已经了解了 HTML 是什么，并完成学习的准备工作，那么这一篇，我们就展开对 HTML 的具体学习。 阅读文章 >写给设计师的速成指南：一小时快速了解 CSS 基础这一章，我们开始学习 CSS 样式表有关的知识点，通过 CSS 来控制 HTML 标签和元素的样式的方法和规范。 阅读文章 >这一节中，我们来讲讲 CSS 的具体应用细则，也就是 CSS 的属性。 CSS 包含了非常多的属性和规则，学习 CSS 就是学习这些属性的用法，本篇内容中我们会挑选出最常用的属性做说明。 文字相关属性1. 文本属性 在 CSS 中，文本指的是标签中的文字内容，我们可以控制一些特定的文本属性，常用的包含：
这里就不每个属性都演示一次了，大家可以自己动手试试。我们主要关注 text-align 这个属性。 text-align 这个属性有向下继承的特性，即我们在父标签中定义了对齐方向，那么子标签也会遵守这个方向。 2. 字体属性 在 CSS 中，字体属性和本文属性是分开的，这是很容易搞混的东西。字体属性用的是 font 属性，而在 font 下还包含若干常用的属性：
在字体设置的规则上，并不是我们想怎么设置都可以，而是考虑用户有什么字体。 因为浏览器对文字的渲染是通过用户本地的字库来完成的，这也是为什么我们设计 UI 和网页的时候不能随心所欲用字体的原因之一。 在中文界面中，通常我们不用去设置中文字体，但可以为英文或数字文本设置一些常见的英文字体，例如 「Arial」，「Futura」 等。 并且可以设置多个字体，通过逗号隔开，如果第一个字体用户没有，那么会自动替换成下一个字体。
3. 列表属性 列表在实际应用中非常的普遍，CSS 有专门针对列表的属性设置，即 list-style 属性，它还包含下面一些属性类型：
list-style 这个属性只能作用在 ul、ol、li 标签，对其它标签无效。对于列表项的图像设置我们先撇开不谈，我们设置最多的数值就是采用 none，否则浏览器会自带列表项符号（很丑）。 背景设置前面为了展示模块实际区域，我们应用过很多次 background 属性来定义背景色，相信大家已经有所了解。但是，background 的作用可不仅仅只是定义背景色而已，它包含：
背景色我们已经知道，关键就在背景图的使用上。比如淘宝中包含了各种酷炫的图片，虽然多数图片是内容图，但是，也有少部分图片是网站本来的基础设计内容之一，也就是——切图。
比如在上图案例中，右上角个人头像卡片的底图，就是页面切图元素，这种图片的引用，并不是通过 image 标签来完成的，而是通过设置 background 属性来完成。 换句话说，我们通过长宽制定了一个矩形区域，然后对这个矩形区域采取类似 Sketch 填充中的图片填充。
而如果填充图片本身的尺寸和定义的矩形尺寸不同，我们就可以通过 background-postion 属性来设置它的位置，可以是指定 x y 轴距离，也可以使用居中的方法：
除了直接定义一张完整的图片外，background 还有个特别有用的设置，就是重复属性。比如我们要定义一个整屏宽的背景，要使用渐变色，那么我们就可以调用一个1像素宽的图片背景，然后让它水平方向平铺:
在正常情况下，background 属性是默认 x、y 轴都有 repeat 的平铺效果，所以如果不想出现重复，就可以添加 no-repeat 值。 背景属性的应用，就是我们网站设计稿切图进行实现的具体步骤之一，和设计师有密切的关联，值得大家更深入的去认识。 排版定位属性如果我们通过浏览器的检查功能去查看界面的框架，就会发现实际上一个完整的网页是由无数矩形拼接起来的，我在自己的教学中为了方便大家理解称其为 —— 矩阵视图。
要把这些矩形框架合理搭建起来，就需要应用到定位相关的属性，来控制它们的顺序和位置，主要应用到的属性包含下面几个：
1. 定位类型 我们主要在 postion 中会使用的几种定位类型，是绝对能把新手绕晕的内容，先简单介绍一下：
这么简单的解释大家肯定已经被绕晕了，所以我们换个角度，有过一定 AE 基础的同学一定都知道，一个元素的坐标轴数值，完全是由其 「 中心点」来确定，但是这个中心点并不是只固定在画布左上定点 （fixed），有可能是画布中任意一点（relative），也可能是关联了上级图层（absolute）。
不同中心点制定逻辑，就会造成不同的元素运动效果，但这和网页布局有什么关系？ 确实在一个固定了宽高的页面中，定位没太多使用的必要，但是，有「 响应式」布局的概念，我们可以拖动浏览器大小修改画布尺寸，以及类似苹果详情页这种喜欢使用大量动效的骚操作，这些都是 「运动」 的过程。
于是我们就必须采取定位的措施，确保元素的显示正常…… 应用 static 以外的定位类型以后，z-index、top/left/right/bottom 等其它属性才能生效，这四个位置属性只是设置相对 「中心点」 的移动方向，但是 z-index 就比较有趣了。 它可以制定元素间堆叠的顺序，因为当我们使用特殊的定位类型以后，元素之间就可以相交，比如我们在 Sketch 中添加了很多图层，这些图层也能相交，但上方的图层会覆盖下方的图层，包括上面的苹果官网案例也是，安卓 MD 规范中也有应用。
Z-index 就是就是由正常的数字序号决定优先级，它可以是正数，也可以是负数（负数就处于页面水平层下方，优先级比正常标签更低）。 2. 浮动元素 讲完定位方式，然后我们就要聊聊浮动属性 float 了。大家可以放心，它可没有前面的 Position 属性复杂（但也没简单到哪里去啊）。 对于网页标签来说，多数标签（具有 block 特性的）有独占一行的特征，即使它的宽度并不是100%，但它们也不会允许别的标签和自己并列，大家可以自己输入两个 h1 标签，看看它们是不是有了 「换行效果」。 而 float 属性的主要作用，就是让它们可以根据某个方向进行对齐，并且不会再排斥有别的元素和自己出现在同一行中。 比如 @花瓣中这种常见的卡片列表，我们就可以通过 float 属性来轻易实现。
而 clear 属性，则是用来清除特定方向浮动元素的属性，指定左右 left、right，或者两侧 both 都清除浮动元素。 我就不做具体演示了，这个属性妙用无穷，感兴趣的同学可以自己搜索相关的细节分享。 动画相关设置1. 过渡效果 动效在 web 2.0 以后的需求越来越强，尤其是对于交互的反馈表现，在过去，我们只能依托 JS 来实现操作的动效，但在更新到了 CSS3 以后，就为我们提供了直接操控动效的属性 —— transition。它包含了 4 个下级属性，分别是：
看一个鼠标悬浮在按钮上，背景色在2秒从灰色过渡成红色的代码案例：
默认和 hover 相当于制定了两个关键帧，而我们把需要制作成补间动画的参数在起始帧（div选择器）进行声明，那么动画效果就可以实现。 当然，这个效果还可以包含宽、高、字号、边框、角度等其它属性。一条 transition 属性中可以声明多个需要执行过度动画的元素和对应参数，用逗号隔开：
在设置缓动效果上，transition 除了默认自带的几种标准缓动外，还支持创建贝塞尔曲线的函数，其输入格式为 —— cubic-bezier(n,n,n,n)，在很多动效软件中都有提供该数值方便我们直接输入。
2. 动画属性 前面的过度，是通过 hover 的定制来实现两个关键帧之间的补间。但是，部分情况下我们也会希望什么操作也不做，元素自己会执行动画事件，或者出现更多的关键帧。 于是，就引入了 animation 属性，它主要包含下面几种下级属性：
然后我们会用一个专门的动画控制指令 @keyframes 来对动画实现具体的定义，可以看看下面的代码案例：
也就是说，我们对一个需要发生动画的标签进行 animation 的设置，先声明一个动画事件的名称和执行规则，然后通过 @keyframes 来关联这个动画，并具体定义动画关键帧的开始和结束属性值。 上方案例的 from 和 to，就是起始关键帧和结束关键帧的属性值，补间的内容会自动生成。但除了只设置这两个帧以外，@keyframes 也允许我们设置一些更具体的关键帧出来，通过使用 % 的形式来制定时间线上的关键帧，比如：
这就等于在这两秒中，我们关键帧制定在了 0秒、0.5秒、1秒、1.5秒、2秒 上，补间动画就会根据这些关键帧开始执行，这就可以帮助我们制作出丰富多样的动画。
其它常用样式属性复杂的东西告一段落，最后再整理一些基本的内容，让大家缓缓。 1. 色彩设置原理 前面我们使用的 color、background-color 等属性，都是用来指定色彩的属性。但是设置色彩本身，不仅仅只是 16 进制色或者已经给出的颜色命名，还包括可以使用 RGB 和 RGBA 色值。
2. 边框其它属性 boder 除了我们看到的描边设置外，还可以用来控制元素圆角的大小，虽然字面理解起来它们关联不是太大，但是 CSS3 中提供了 boder-radius 属性定义元素的四个边角，除了它本身外还包含下级：
我们可以通过增加对应的像素数值，来实现圆角矩形的效果，尤其在按钮的实现中。例如：
除了圆角，同属于这个类型的属性中还有一个阴影的属性，那就是 box-shadow 属性。它的设置和 XD 以及 Sketch 的阴影设置是一样的，下方案例分别是阴影的 X轴距、Y轴距离、BLUR模糊值、色彩：
3. 元素透明度设置 CSS 中提供了一个 Opacity 属性专门用来控制元素的透明度，透明度的值和 RGBA 的使用方法一致，并且，这个透明度会影响下级元素，相当于我们为 Sketch 中制作的编组设置了透明度。
4. 盒子属性 在页面的展示中，经常要实现一个遮罩的效果，那么我们就会用到 overflow 盒子属性，这个属性主要用来对标签内的元素状态做应对，比如下面这些设置：
5. 长宽的具体设置 之前的演示我们应该都知道了，元素尺寸中宽和高的具体设置属性是 width 和 heigh，但是这两个属性的设置除了使用数值外，同时还可以设置百分比，比如：
这样子，这个 div 的宽就是整个浏览器视图区域的 50% 宽，我们变更浏览器宽度的时候，它的宽也会一起变更。也就是说，百分比设置，是根据它的上层标签宽来决定的，50%的宽即上级标签实际尺寸宽度的一半。 除了百分比外，宽和高都提供了一个最小和最大值的设定，即 min-width、max-width、min-height、max-height，它可以限定标签的长宽在一个特定的范围中。
比如上方的设置中，就是基于浏览器视图50%的情况下，最大的尺寸只到 300px，就不会再超出了。min和max两个设置也是自适应中的重要环节。 结语对于 CSS 的解释就在此告一段落了，我们通过两小节一口气把它们解释完，相信多数同学有非常多的疑问，以及对内容不能完全的吸收。 但不要紧，下一节中，我们就会通过具体的网页案例，将 HTML 和 CSS 的知识完整的实践一遍，更好理解它们的功能和应用场景。 欢迎关注作者的微信公众号：「超人的电话亭」
手机扫一扫，阅读下载更方便˃ʍ˂ |
@版权声明
1、本网站文章、帖子等仅代表作者本人的观点，与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样，并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络，仅用作展示，如有侵权请联系站长！QQ: 13671295。
最新评论
