一. 常用选择器

1. 通配符选择器（＊{}）

*通配符——通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素

*{margin：0； padding：0；}

2. 元素选择器(标签名{})

元素选择器其实就是文档的元素，如html,body,p,div等等

3. 类选择器（.类名{}）

1、使用类选择器之前需要在html元素上定义类名
2、类选择器还可以结合元素选择器来使用（.类名 标签{}）

4. id选择器（#ID{}）

和上面说的类选择器很相似，不同的是ID选择器是一个页面中唯一的值

5. 后代选择器（Ｅ Ｆ）

前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，中间用空格隔开

6. 子元素选择器(E>F)

子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素

7. 相邻兄弟元素选择器(E + F)

EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻

8. 通用兄弟选择器（Ｅ 〜 Ｆ）

E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择
所有Ｅ元素后面的Ｆ元素。

9. 群组选择器（selector1,selector2,...,selectorN）

将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开

二、属性选择器

1. E[attr]

只使用属性名，但没有确定任何属性值；
也可以使用多属性进行选择元素，如E[attr1][attr2], 这样只要是同时具有这两属性
的元素都将被选中

2. Ｅ[attr="value"]

E[attr="value"]是指定了属性值“value”
也可以多个属性并写，进一步缩小选择范围
注：属性和属性值必须完全匹配，特别是对于属性值是词列表的形式时

3. E[attr~="value"]

只要属性值中有一个value相匹配就可以选中该元素

4. E[attr^="value"]

选择attr属性值以“value”开头的所有元素

5. E[attr$="value"]

选择元素attr属性，并且他的属性值是以value结尾的

6. E[attr*="value"]

所选择的属性，其属性值中有这个"value"值都将被选中

7. E[attr^="value"]

选择器会选择attr属性值等于value或以value-开头的所有元素

三. 伪类选择器

1. 动态伪类

遵循爱（LoVe）恨（HAte）
a:link
a:visited
a:hover
a:active

:hover用于当用户把鼠标移动到元素上面时的效果；
:active用于用户点击元素那一下的效果；
:focus用于元素成为焦点，这个经常用在表单元素上。

2. UI元素状态伪类

:enabled :disabled :checked

主要是针对于HTML中的Form元素操作

3. CSS3的:nth选择器

1、:first-child
2、:last-child
3、:nth-child(n) 数字、even偶数、odd奇数
4、:nth-last-child(n)
5、:only-child

注： :nth-child(n)，其中n是一个简单的表达式，那么"n"取值从“1”开始计算,不能取负值

4. CSS3的:nth选择器

:nth-of-type() :nth-child()
:nth-last-of-type() :nth-last-child()
:first-of-type :first-child
:last-of-type :last-child
:only-of-type :only-child

5. 否定选择器 :not()

6. 伪元素

CSS 伪元素用于将特殊的效果添加到某些选择器。

::first-letter
::first-line
::before
::after
::selection 改变网页被选中文本的样式

四 、文字相关样式

4.1 颜色 (Color)

透明度：
opacity: 0.1;
opacity: 0.5;

RGBA：
color: rgba(255, 0, 0, 0.6);

4.2 文本阴影(Box-shadow)

a. text-shadow

//text-shadow: h-shadow v-shadow blur color;
text-shadow:2px 2px 5px #000;

• h-shadow：必需，水平阴影的位置允许负值
• v-shadow：必需，垂直阴影的位置允许负值
• blur：可选，模糊的距离。
• color：可选，阴影的颜色

五、边框阴影(Box-shadow)

使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。

5.1 基本用法

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

syntax-1.png

box-shadow:2px 2px 5px #000;

image.png

box-shadow:0px 0px 10px #000;

image.png

5.2 内阴影

image.png

box-shadow:inset 2px 2px 5px #000;

image.png

5.3 阴影扩展长度值

image.png

box-shadow:0px 0px 5px 10px #000;

image.png

box-shadow:0px 15px 10px -15px #000;

image.png

box-shadow:inset 0px 15px 10px -15px #000;

image.png

5.4 多重阴影

box-shadow:0px 0px 0px 3px #bb0a0a,
           0px 0px 0px 6px #2e56bf,
           0px 0px 0px 9px #ea982e;

image.png

5.5 伪元素::before和::after的乐趣

使用伪元素::before和::after，我们能创造出非常逼真的只有图片才能实现的阴影效果。让我来看一个例子：

image.png

<div class="box11 shadow"></div>

.box11 {
    width: 300px;
    height: 100px;
    background: #ccc;
    border-radius: 10px;
    margin: 10px;
}

.shadow {
    position: relative;
    max-width: 270px;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3),
                0px 0px 20px rgba(0,0,0,0.1) inset;
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   transform:rotate(-3deg);
}

.shadow::after{
   right:10px;
   left:auto;
   transform:rotate(3deg);
 }

六、CSS3 @font-face 规则

<style>
@font-face{
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
    url('Sansation_Light.eot'); /* IE9+ */
}
div{
    font-family:myFirstFont;
}
</style>

七、圆角边框 (Border)

圆角边框：border-radius: 20px 20px 20px 20px;

语法

border-radius: length/% ;
border-radius: 一个值； //四个角都一样
border-radius: 值1 值2； //值1表示左上角、右下角；值2表示右上角、左下角
border-radius: 值1 值2 值3； //值1表示左上角；值2表示右上角、左下角；值3表示右下角
border-radius: 值1   值2 值3 值4；//左上角、右上角、右下角、左下角

八、渐变 (Gradients)

8.1 线性渐变

background: linear-gradient(angle,颜色 0%,颜色 50% ,颜色 100%)
通过角度来确定渐变的方向。
后边的参数，表示渐变的颜色和位置。可以插入更多的颜色值。
可以用rgba产生渐隐效果
repeating-linear-gradient 重复渐变

8.2 径向渐变

background: radial-gradient(颜色 0%,颜色 50% 颜色 100%)
<position>：主要用来定义径向渐变的圆心位置。
length：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
percentage：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
left：设置左边为径向渐变圆心的横坐标值。
center：设置中间为径向渐变圆心的横坐标值或纵坐标。
right：设置右边为径向渐变圆心的横坐标值。
top：设置顶部为径向渐变圆心的纵标值。
bottom：设置底部为径向渐变圆心的纵标值

九、变换

transform: rotate | scale | skew | translate;

属性之间用空格隔开 注意：不是逗号“，”

缩写：transform : translate() rotate() scale() skew(); 用空格隔开

9.1 移动translate

1、translate(<translation-value>[, <translation-value>])
2、translateX(<translation-value>)
3、translateY(<translation-value>)

9.2 旋转rotate

rotate(<angle>)

Transform:rotate(45deg);
Transform:rotateX(45deg);
Transform:rotateY(45deg);
Transform:rotateZ(45deg);
Perspective : 500;      

设置元素被查看位置的视图

9.3 缩放scale

1、scale(<number>[, <number>])
2、scaleX(<number>)
3、scaleY(<number>)

9.4 扭曲skew

1、skew(<angle> [, <angle>])
2、skewX(<angle>)
3、skewY(<angle>)

9.5 改变元素基点transform-origin

transform-origin:X,Y

(1) transform-origin:left top:
(2) transform-origin:right
(3) transform-origin:25% 75%;

9.6 过渡

Transition: all 5s ease 0s;
transition-property:
transition-property ： none | all | [ <IDENT> ]

transition-duration:

transition-duration ： <time> [, <time>]*

<time>为数值，单位为s（秒）或者ms(毫秒),

transition-timing-function:

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2) 四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

十、动画

@Keyframes（关键帧）

@keyframes 动画名{
from{...}
to{...}
}

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

animation-name: 动画名称

animation-name: none | name 可以同时附几个animation给一个元素，用逗号“，”隔开

animation-duration 动画持续时间

取值:<time>为数值，单位为s （秒.）其默认值为“0”

animation-timing-function: 动画速度

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out

animation-delay: 动画延迟时间

取值为<time>为数值，单位为s(秒)，其默认值也是0。

animation-iteration-count 动画次数

animation-iteration-count:
infinite;（无限循环）
<number>;（循环次数）

animation-direction 动画运动方向

animation-direction:
normal (单向)
alternate (来回)
reverse （单向，结束——开始）
alternate-rever (来回，来回，开始-结束-开始-结束)

animation-fill-mode 动画填充模式

animation-fill-mode : none | forwards | backwards | both;
none 不改变默认行为。
both 向前和向后填充模式都被应用。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值 （在第一个关键帧中定义）。

animation-play-state: running/paused 动画的播放状态

简写

CSS 动画属性

下表列出了 @keyframes 规则和所有 CSS 动画属性：

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。(秒：3s)
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。(秒：3s)
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。 （次：3次）
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

等价于下面

div {
  animation: example 5s linear 2s infinite alternate;
}

补充

pointer-events