CSS

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。

CSS3

• 摘要
  • CSS介绍
  • CSS基础语法
  • CSS选择器
    • element/id/class/......
• 背景
  • CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
  • background-attachment
    • 背景图像固定或随着页面其他部分滚动
  • background-color
  • background-image
  • background-position
  • background-repeat
• 文本
  • color
    • 文本颜色
  • direction
    • 文本方向
  • line-height
    • 行高
  • letter-spacing
    • 字符间距
  • text-align
    • 对齐文本
  • text-decoration
    • 向文本添加修饰
  • text-indent
    • 缩进文本首行
  • text-transform
    • 元素中的字母
  • unicode-bidi
    • 文本方向
  • white-space
    • 元素中空白的处理方式
  • word-spaccing
    • 字间距
• 字体
  • font-family
  • font-size
  • font-style
  • font-variant
    • 以小型大写字体或正常字体显示文本
  • font-weight
    • 字体粗细
• 链接
  • a:link
  • a:visited
  • a:hover
    • 鼠标指针位于连接上
  • a:active
    • 被点击时刻
• 列表
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
• 表格
  • 表格边框
  • 折叠边框
  • 表格宽高
  • 表格文本对齐
  • 表格内边距
  • 表格颜色
• 轮廓
  • outline
    • 轮廓属性
  • outline-color
  • outline-style
  • outline-width
• 表单
  • 新增的主体结构元素
    • article
    • section
    • nav
    • aside
    • time
    • pubdate
  • 全局属性
    • contentEditable
      • 可编辑
    • designMode
    • hidden
    • spellcheck
      • 检查拼写
    • tabindex
  • 新增的非主体结构元素
    • header
    • footer
    • hgroup
    • address
  • 表单单独属性
    • formaction
    • formmethod
    • formenctype
      • 编码
    • formtarget
    • autofocus
    • required
    • labels
• 定位
  • positon
    • static
    • fixed
    • relative
    • absolutely
  • top/left/right/buttom
    • 方向偏移量
  • overflow
    • 元素溢出其区域发生的事情
  • clip
    • 元素显示形状
  • vertical-align
    • 垂直对齐方式
  • z-index
    • 堆叠顺序/越大越靠前
• 浮动
  • left
  • right
  • none
    • 不浮动
  • inherit
    • 从父级继承浮动属性
  • 去除浮动
    • clear
      • left
      • right
      • both
• 盒子模型
  • padding
    • padding-left
    • padding-right
    • padding-bottom
    • padding-top
  • border
    • border-top-style
    • border-width
  • margin
    • margin-top
  • content
    • width
    • height
• 常用操作
  • 对齐
    • 使用margin属性进行水平对齐
    • 使用position属性进行左右对齐
    • 使用float属性进行左右对齐
  • 尺寸
    • height
    • line-height
    • max-height
    • max/min-width
    • max/min-width
    • width
  • 分类
    • clear
      • 设置一个元素的侧面是否允许其他浮动元素
    • cursor
      • 规定当指向某元素之上时显示的指针类型
    • display
      • 设置是否以及如何显示元素
    • float
      • 定义浮动
    • position
    • visibility
      • 设置是否可见
  • 导航栏
    • 垂直导航栏
    • 水平导航栏
    • 导航栏效果
  • 图片
• 动画效果
  • 2D/3D转换
    • 2D
      • translate()
      • rotate()
      • scale()
      • skew()
      • matrix()
    • 3D
      • rotateX()
      • rotateY()
  • 过渡
    • transition
      • 设置四个过渡属性
    • transition-property
      • 过渡的名称
    • transition-duration
      • 过渡效果花费的时间
    • transition-timing-function
      • 过渡效果的时间曲线
    • transition-delay
      • 过渡效果开始时间
  • 动画
    • 遵循@keyframes规则
    • 动画时长
    • 动画名称
  • 多列
    • 创建多列来对文本或者区域布局
    • 属性
      • column-count
      • column-gap
      • column-rule