应用视觉设计

如何定义什么是好设计呢？
见仁见智，从来没有一个标准的答案，但好设计背后都隐藏着相同的设计原则，这些原则在很多设计方面的书籍中都有所体现。
在 Web 开发中，HTML 为页面的内容提供结构和语义，CSS 控制页面的布局和外观。

使用 text-align 属性创建视觉平衡

web 内容大部分都是文本。CSS 里面的text-align属性可以控制文本的对齐方式。
text-align: justify;可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。
text-align: center;可以让文本居中对齐。
text-align: right;可以让文本右对齐。
text-align: left;是text-align的默认值，它可以让文本左对齐。

使用 width 和 height 属性调整元素的宽度和高度

使用 CSS 里面的width属性来指定元素的宽度。属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。
和width属性类似，你可以使用 CSS 里面的height属性来指定元素的高度。
.fullcard { height: 25px; width: 250px; }

字体样式

使用 strong 标签加粗文本，术语：Strong => s => 加粗。添加了strong标签后，浏览器会自动给元素应用font-weight:bold;。

使用 u 标签给文本添加下划线，术语：Underline => u => 下划线。添加了u标签后，浏览器会自动给元素应用text-decoration: underline;。

使用 em 标签强调文本，术语：emphasis => em => 强调。添加了em标签后，浏览器会自动给元素应用font-style: italic;。

使用 s 标签给文本添加删除线，术语：Strikethrough => s => 删除线。添加了s标签后，浏览器会自动给元素应用text-decoration: line-through;。

调整标题与段落的大小，标题（h1到h6）的文字应该比的段落的文字大，使用font-size属性来设置元素内文字的大小。

使用 text-transform 属性给文本添加大写效果，它通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本，不同值对文字 “Transform me” 的影响。

其他样式

使用 hr 标签创建水平线，术语：Horizontal Rule => hr => 水平线。用hr标签来创建一条宽度撑满父元素的水平线。

调整文本的背景色，rgba 代表： r = red 红色 g = green 绿色 b = blue 蓝色 a = alpha 透明度 。RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。background-color: rgba(45, 45, 45, 0.1)，它表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。

给卡片元素添加 box-shadow，box-shadow属性的每个阴影依次由下面这些值描述：

• offset-x阴影的水平偏移量；
• offset-y阴影的垂直偏移量;
• blur-radius模糊距离；可选
• spread-radius阴影尺寸；可选
• 颜色==》box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

降低元素的 opactiy，CSS 里的opacity属性用来设置元素的透明度。 值 1 代表完全不透明。值 0.5 代表半透明。值 0 代表完全透明。a { opacity: 0.7; }

设置段落的 line-height，CSS 提供line-height属性来设置行间的距离。行高，顾名思义，用来设置每行文字所占据的垂直空间。

调整锚点的悬停状态，超链接可以使用:hover伪类选择器定义它的悬停状态样式。

定位

更改元素的相对位置，块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。
当元素的 position 设置为relative时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是left、right、top和bottom。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者ems。
p { position: relative; bottom: 10px; }

绝对定位的参照物是元素的父元素， CSSposition属性的取值选项absolute，absolute相对于其包含块定位。和relative定位不一样，absolute定位会将元素从当前的文档流里面移除，周围的元素会忽略它。
absolute定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是position:relative;）,浏览器会继续寻找直到默认的 body 标签。

固定定位的参照物是浏览器的窗口，fixed定位，它是一种特殊的绝对（absolute）定位，区别是其包含块是浏览器窗口。fixed定位和absolute定位的最明显的区别是fixed定位元素不会随着屏幕滚动而移动。

浮动

使用 float 属性将元素左浮动或右浮动，浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用width属性来指定浮动元素占据的水平空间。

层级

使用 z-index 属性更改重叠元素的位置，z-index的取值是整数，数值大的元素优先于数值小的元素显示。

外边距

使用 margin 属性将元素水平居中，在应用设计中经常需要把一个块级元素水平居中显示。一种常见的实现方式是把块级元素的margin值设置为auto。图片默认是内联元素，但是可以通过设置其display属性为block来把它变成块级元素。

互补色

色环是我们认识颜色关系的好工具 - 它是一个近色相邻异色相离的圆环。当两个颜色恰好在色环的两端时，这两个颜色叫做补色。绘画中两只补色在混合后会变成灰色。补色搭配能形成强列的对比效果，传达出活力、能量、兴奋等意义。
十六进制码（hex code）补色的例子：

红色（#FF0000）和蓝绿色 (#00FFFF)
绿色（#00FF00）和品红色（#FF00FF）
蓝色（#0000FF）和黄色（#FFFF00）

三原色

两种原色相加产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G）。二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。三次色是由原色和二次色相加产生的颜色，例如红色（原色）和黄色（二次色）相加产生橙色。将这六种颜色中相邻的颜色相加，便产生了十二色色环。
涉及到三次色的一种配色方法是分裂补色搭配法。选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。

色相

HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标系中的表示法，描述了色相（hue）、饱和度（saturation）、亮度（lightness）。CSS3 引入了对应的hsl()属性做为对应的颜色描述方式。
色相 是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。在hsl()里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
饱和度 是指色彩的纯度，也就是颜色里灰色的占比，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
亮度 决定颜色的明暗程度，也就是颜色里白色或者黑色的占比，100% 亮度是白色， 0% 亮度是黑色，而 50% 亮度是“一般的”。
使用hsl()描述颜色的例子，颜色都为满饱和度，中等亮度:

色调

hsl()使 CSS 更改色调更方便。给纯色添加白色可以创造更浅的色调，添加黑色可以创造更深的色调。另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。

渐变色

通过background里面的linear-gradient()来实现线性渐变：

background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);

第一个参数指定了颜色过渡的方向 - 它的值是角度，90deg 代表垂直渐变，45deg 的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序：

使用 CSS 线性渐变创建条纹元素，repeating-linear-gradient()函数和linear-gradient()很像，主要区别是repeating-linear-gradient()重复指定的渐变。
角度就是渐变的方向。起止渐变颜色值代表渐变颜色及其宽度值，由颜色值和起止位置组成，起止位置用百分比或者像素值表示。
background: repeating-linear-gradient( 90deg, yellow 0px, blue 40px, green 40px, red 80px );渐变开始于 0 像素位置的yellow，然后过渡到距离开始位置 40 像素的blue。由于下一个起止渐变颜色值的起止位置也是 40 像素，所以颜色直接渐变成第三个颜色值green，然后过渡到距离开始位置 80 像素的red。
0px [黄色 -- 过渡 -- 蓝色] 40px [绿色 -- 过渡 -- 红色] 80px
background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px );

背景图片

background属性支持使用url()函数通过链接的方式引入一个指定纹理或样式的图片。图片链接地址在括号内，一般会用引号包起来。

缩放

CSS 属性transform里面的scale()函数，可以用来改变元素的显示比例。p { transform:scale(2); }
transform属性有很多函数，可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类描述元素的指定状态如:hover时，transform属性可以方便的给元素添加交互。

倾斜

使用 CSS Transform skex 属性沿X轴倾斜元素，skewX使选择的元素沿着 X 轴（横向）翻转指定的角度。p { transform: skewX(-32deg); }
skewY属性使指定元素沿 Y 轴（垂直方向）翻转指定角度。

使用 CSS 创建一个图形

术语表：blur-radius => 模糊半径，spread-radius => 辐射半径，transparent => 透明的，border-radius => 圆角边框。
div { background-color: transparent; border-radius: 50%; box-shadow: 25px 10px 0px 0px blue; }

伪元素

:before和:after伪类用来在选择元素之前和之后添加一些内容。
:before和:after必须配合content来使用。这个属性通常用来给元素添加内容诸如图片或者文字。当:before和:after伪类用来添加某些形状而不是图片或文字时，content属性仍然是必需的，但是它的值可以是空字符串。

.heart {
  position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; // 盒子居中
  background-color: pink; height: 50px; width: 50px;
  transform: rotate(-45deg);
}
.heart:after {
  background-color: pink; content: ""; border-radius: 50%;
  position: absolute;  width: 50px; height: 50px; top: 0px; left: 25px;
}
.heart:before {
  content: ""; background-color: pink; border-radius: 50%;
  position: absolute; width: 50px; height: 50px; top: -25px; left: 0px;
}    //  粉色心形

动画

如果要给元素添加动画，你需要了解animation属性以及@keyframes规则。animation属性控制动画的外观，@keyframes规则控制动画中各阶段的变化。总共有 8 个animation属性。

animation-name设置动画的名称， 也就是要绑定的选择器的@keyframes的名称。
animation-duration设置动画所花费的时间。
@keyframes能够创建动画。创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。具体是通过设置动画期间对应的“frames”的 CSS 的属性，以百分比来规定改变的时间，或者通过关键词“from”和“to”，等价于 0% 和 100%。

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}
@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

animation-fill-mode指定了在动画结束时元素的样式。设置成forwards，使按钮悬停时保持高亮。
animation-iteration-count，这个属性允许你控制动画循环的次数。把animation-iteration-count属性改成 infinite，以使右边的球持续跳跃。
animation-duration属性为不同的值来使其具有不同的闪烁频率，延时执行。
animation-timing-function规定动画的速度曲线。默认的值是ease，动画以低速开始，然后加快，在结束前变慢。其它常用的值包括ease-out，动画以高速开始，以低速结束;ease-in，动画以低速开始，以高速结束；linear，动画从头到尾的速度是相同的。

贝塞尔曲线

在 CSS 动画里，用cubic-bezier来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在 1*1 的坐标系统内，曲线的 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。
cubic-bezier函数包含了 1 * 1 网格里的4个点：p0、p1、p2和p3。其中p0和p3是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

当animation-iteration-count值为 infinite 时animation-timing-function会自动循环 keyframe。由于是在动画周期中间（50%处）设置的 keyframe 规则，最终的结果是球向上和球向下是两个同样的动画过程.

动画简写

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}