应用视觉设计

align

 CSS 里面的 text-align 属性可以控制文本的对齐方式。

text-align: justify; 可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。

text-align: center; 可以让文本居中对齐。

text-align: right; 可以让文本右对齐。

text-align: left; 是默认值，它可以让文本左对齐。 

size

width

你可以使用 CSS 里的 width 属性来指定元素的宽度。 属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。

height

tag

stron加粗

<strong>  内容</strong>

=font-weight:bold;

underline下划线

<u>内容</u>

=text-decoration: underline;

emphasize斜体

<em> 内容 </em>

=font-style: italic;

strick删除线

<s>内容</s>

=text-decoration: line-through;

hr水平线

人力资源（bushi

Horizontal Rule<hr>自闭合

backgrounhd-color

rgba 代表：
  r = red 红色
  g = green 绿色
  b = blue 蓝色
  a = alpha 透明度( 0 代表完全透明，1 代表完全不透明)

允许使用background：url()添加背景

font-size

标签属性值用font-size更改字体大小

font-weight

字体粗细

box-shadow阴影

box-shadow 属性的阴影依次由下面这些值描述，由逗号分隔的一个或多个阴影列表。：

• offset-x 阴影的水平偏移量；
• offset-y 阴影的垂直偏移量；
• blur-radius 模糊半径（可选）；
• spread-radius 阴影扩展半径（可选）；
• color

 opacity透明度

由0到1：透明->不透明

text-transform大小写

lowercase	"transform me"
uppercase	"TRANSFORM ME"
capitalize	"Transform Me"
initial	使用默认值
inherit	使用父元素的 text-transform 值。
none	Default:不改变文字。

  line-height

行高，行间距

hover

悬停状态

  a {
    color: #000;正常黑色
  }
  a:hover{
    color:blue;悬停蓝色
  }

position

relative

当元素的定位设置为 relative 时，它允许你通过 CSS 指定该元素在当前文档流页面下的相对偏移量。 CSS 里控制各个方向偏移量的属性是 left、right、top 和 bottom。 它们代表从原来位置向远离该方向偏移指定的像素、百分比或者 em。

p {
  position: relative;
  bottom: 10px;
}

 absolute

周围的元素会忽略它。

fixed

它是一种特殊的绝对（absolute）定位，将元素相对于浏览器窗口定位。不会随着屏幕滚动而移动。

float

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

z-index

解决重叠问题，数值大的放在上面

居中margin：auto

 图片默认是内联元素，但是可以通过设置其 display 属性为 block来把它变成块级元素。

hsl(Hue, Saturation, Lightness)

CSS3 引入了 hsl() 做为颜色的描述方式。

色相是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。 在 hsl() 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。

饱和度是指色彩的纯度，也就是颜色里灰色的占比。 饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。

亮度决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。 其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。

linear-gradient

线性渐变

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
第一个参数指定了颜色过渡的方向——它的值是角度，90deg 表示垂直渐变（从左到右），45deg 表示沿对角线渐变（从左下方到右上方）。 其他参数指定了渐变颜色的顺序：

 linear-gradient(35deg,#CCFFFF,#FFCCCC)有点好看

linear-gradient

重复线性渐变

repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 40px,同色起止像素相同，不渐变
      black 40px,同像素起止色不同，则不渐变
      blue 80px 不同像素不同色，渐变
    );

transform

:scale(n)

放缩n倍

:hover

transform又很多函数可调用，比如用伪类hover可使悬停时完成效果

:skewX()

按x（y）轴翻转角度，

::after()

伪元素 ::before 和 ::after。 伪元素可以在所选元素之前或之后添加一些内容。

动画

#anim {
  animation-name: colorful;animation-name 用来设置动画的名称
  animation-duration: 3s;设置动画所花费的时间。
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

如果不想动画重置，可加入

animation-fill-mode: forwards;

 iteration

animation-iteration-count: 3;infinete则一直播放

动画

在 CSS 动画里，animation-timing-function 用来定义动画的速度曲线。 速度曲线决定了动画从一套 CSS 样式变为另一套所用的时间。 如果要描述的动画是一辆车在指定时间内（animation-duration）从 A 运动到 B，那么 animation-timing-function 表述的就是车在运动中的加速和减速等过程。

有一些预定义的关键字可用于常见的选项。 比如，默认值是 ease，动画以低速开始，然后加快，在结束前变慢。 其它常用的值包括 ease-out：动画以高速开始，以低速结束；ease-in，动画以低速开始，以高速结束；linear：动画从头到尾的速度是相同的。

 除了预定义值之外，CSS 还提供了贝塞尔曲线（Bezier curves）来更细致地控制动画的速度曲线。

在 CSS 动画里，我们可以用 cubic-bezier 来定义贝塞尔曲线。 曲线的形状代表了动画的速度。 曲线在 1 * 1 的坐标系统内， 其中 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。

cubic-bezier 函数包含了 1 * 1 网格里的4个点：p0、p1、p2、p3。 其中 p0 和 p3 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。 你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。