1. CSS的概念：Cascading Style Sheets：层叠样式表 2. CSS的使用：CSS与HTML结合的方式 （1）内联样式：在标签内使用style属性指定的CSS代码，不推荐：复用性低，代码凌乱，一次只能控制一个标签的展示样式 （2）内部样式：配合选择器，进行标签的选择，进而对标签的样式进行控制。一次可以一个或多个标签 （3）外部样式：将CSS代码单独抽取到一个独立的文件中，页面用来引用即可 （4）开发中常用（2）或者（3） 3. CSS语法
选择器{ 属性名1:属性值1; 属性名2:属性值2; ...:... }4. 选择器 （1）选择器的概念：筛选具有相似特征的元素 （2）注意：每一对属性需要使用 ; 隔开，最后一对属性可以不加 ;
5. CSS的基础属性 （1）字体，文本
font-size：字体大小 color：文本颜色 text-align：对齐方式 line-hieght：行高（2）背景
background：设置背景（3）边框
border：设置边框，符合属性（4）尺寸
width：宽度 height：高度（5）盒子模型：控制布局
margin：外边距 padding：内边距 float：浮动 * left * right6. 基础选择器的学习 （1）id选择器：一次只能选择一个标签
语法： #id名{ 属性1:属性值1 属性2:属性值2 ...... }（2）类选择器：选择具有相同class属性的元素
语法： .class属性名{ 属性1:属性值1 属性2:属性值2 ...... }（3）标签名选择器：具有相同标签名称的元素
语法： 标签名称{ 属性1:属性值1 属性2:属性值2 ...... }（4）选择器的优先级
如果多个选择器选中了同一个标签，如果标签的样式没有冲突，则叠加生效 如果有冲突时，选择器根据优先级来进行渲染，选择器优先级高的控制强度比较强 【优先级关系】内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器7. 扩展选择器的学习 （1）伪类选择器：选择一些元素具有的状态
语法： 元素:状态{ 属性1:属性值1 属性2:属性值2 ...... } 状态： 1.链接状态：link 2.鼠标悬浮状态：hover 3.鼠标按下状态：active 4.链接访问过后的状态：visited 其中 鼠标悬浮状态 鼠标按下状态 这两种状态对于其他标签，也是有用的（2）包含选择器：筛选选择器1下的选择器2的元素
语法： 选择器1 选择器2{ 属性1:属性值1 属性2:属性值2 ...... }（3）子选择器：筛选选择器2的父元素选择器1
语法： 选择器1>选择器2{ 属性1:属性值1 属性2:属性值2 ...... }（4）相邻选择器：选择同级下的下一个元素
语法： 选择器 + 另外一个{ 属性1:属性值1 属性2:属性值2 ...... }（5）通配符选择器：选择所有元素
语法： *{ 属性1:属性值1 属性2:属性值2 ...... }（6）属性选择器：选择元素的属性，进行渲染
语法： 元素名称[属性名="属性值"]{ 属性1:属性值1 属性2:属性值2 ...... }8. CSS的浮动属性：float 9. CSS的字体属性 10.CSS的背景属性 11. CSS的边框属性 12. CSS的内间距 13. CSS的字母大小写转换属性 14. CSS的列表属性
1. 过渡动画 2. transform动画效果 （1）基本动画效果：鼠标移至红色块，红色块向右移动100px；鼠标移至粉色块，粉色块将旋转45°；鼠标移至黄色块，黄色块将变成原来的2倍；鼠标移至灰色快，灰色块将扭曲 （2）旋转动画效果：鼠标移至文件夹位置，文件夹旋转360°；鼠标移至新浪logo处，新浪logo旋转10°，缩小0.8倍 3. 模仿百度搜索栏 4. 自定义动画 （1）5s后红色小方块开始动，经过15秒变成粉红色大方块 （2）3D旋转：图标一直在3D旋转
