资源

1. Google: 关键词 MDN
2. CSS Tricks
3. Google: 阮一峰 css
4. 张鑫旭的 240 多篇 CSS 博客
5. Codrops 炫酷 CSS 效果
6. CSS揭秘
7. CSS 2.1 中文 spec
8. Magic of CSS 免费在线书

引入CSS

1. 内联样式 ==> style属性 ==> style= 'color: red; width: 200px; height:200px;'
2. 内嵌样式 ==> style 标签 ==>

<style>
  body{
    background: gray;
    font-size: 12px;
  }
</style>

3. 外联样式 ==> <link> 标签 ==>

<link rel= 'stylesheet' href= ''>

4. @import url(./b/css)

最佳实践 & 套路

reset CSS

*{ margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p{ margin: 0; padding: 0; }

清除浮动

添加到浮动元素的父元素上。

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

相关知识点

元素分类：

• 块级元素：block ==> display: block;
• 内联元素：inline ==> display: inline;
• 内联块级元素：inline-block ==> display: inline-block;

Animation（帧动画）

Animation功能是通过改变元素的属性值来实现动画效果。

Animation和Transition的区别：

• Animation：通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果
• Transition：通过指定属性的开始值和结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，不能实现更为复杂的动画效果。

animation-attribute（动画属性）:

将动画属性与CSS选择器绑定，注意浏览器的前缀。
（.css3{ animation : css3 1s ease backwards; }）

• animation-name ==> 定义动画名称

• animation-duration ==> 定义动画持续时间

• animation-delay ==> 定义动画延迟时间

• animation-timing-function ==> 定义动画类型

  1. ease ==> 平滑过渡
  2. linear ==> 线性过渡
  3. ease-in ==> 加速
  4. ease-out ==> 减速
  5. ease-in-out ==> 先加速后减速

• animation-iteration-count ==> 定义播放次数
  infinite（无限次）

• animation-fill-mode ==> 播放外状态

  1. forwards ==> 动画结束时状态
  2. backwards ==> 动画开始时状态

关键帧（@keyframes）

设计关键帧时必须定义from-to或者0%-100%位置帧，并且为每帧定义样式。注意浏览器的前缀。

@keyframes animation-name {
    from{ property：startValue }
    to{ property：endValue }
}

或者

@keyframes animation-name {
    0%{ property：startValue }

    //可以添加更多的百分数，从而控制中间过程

    100%{ property：endValue }
}