CSS３知识体系

CSS3知识体系是职业院校学生在学习CSS3中常用的必要的知识点和技能点，可以作为高中生、中职生、自学人员学习使用，也可以作为HTML５大赛以及Web前端技能等级证书的复习和训练使用。

CSS3主要内容

• css基础选择器
  • 标签（元素）选择器
  • 类别选择器
  • id选择器
  • 后代选择器
  • 群组选择器
  • 伪类选择器
• 子元素伪类选择器
  • 父元素的第一个子元素 E:first-child{}
  • 父元素的最后一个元素E:last-child{}
  • 父元素下的唯一子元素E:only-child{}
  • 父元素下的第n个子元素（有三种，n,odd,even) E:nth-child(n){}
  • 各种变形
  • 请参照手册，熟练使用
• UI伪类选择器
  • ：focus (获取焦点和失去焦点---表单和超链接中使用）
  • ：：selection页面中被选中文本的样式（伪元素）
  • ：checked（选中和未选中）
  • ：enabled可用
  • ：disabled不可用
  • ：read-write可读写
  • ：read-only只读
  • 针对超链接和表单的选择器
• 其他伪类选择器
  • 选择页面根元素:root
  • :empty选择一个空元素
  • :target选取页面中的一个target元素
  • :not选取某个元素之外的所有元素（除了某个元素，其他都选）
  • 结合案例灵活使用这些伪类元素
• 定位布局
  • 定位：position
  • 绝对定位：position:absolute;
  • 相对定位:position:relative;
  • 常用的定位方式
  • 静态定位:position:static;(默认）
  • 固定定位：position：fixed;
• 浮动布局
  • 浮动float
  • 清除浮动clear
• 属性选择器
  • 带有**属性的元素[属性]；例如：[target]
  • 带有**属性的所有元素[属性=**]
  • 以**开头的任何元素[属性^=**]
  • 以**结尾的任何元素[属性$=**]
  • 包含**的任何元素[属性*=**]
  • 这些要具体问题具体分析，灵活使用案例
• 颜色样式
  • 透明度opacity
  • RGBA---rgba(color1,color2,color3,alpha);
  • HLSA---hlsa(色相，饱和度，亮度，alpha）；
  • 十六进制颜色#RRGGBB
  • 渐变色
    • 径向渐变radial-gradient(position,shap size,start-color,stop-color)
    • 重复径向渐变repeating-radial-gradient(circle at center,.........)
    • 线性渐变linear-gradient(oriental,start-color,stop-color)
    • 重复线性渐变repeating-linear-gradient(to oriental, , ....)
• 字体样式
  • 字体类型font-family
  • 字体大小font-size
  • 字体粗细font-weight
  • 字体风格font-style
  • 字体颜色color
  • 小型大写字体显示font-variant（不常用）
• 文本样式
  • 首行缩进text-indent
  • 水平对齐text-align
  • 垂直对齐vertical-align
  • 文本修饰text-decoration
  • 大小写转换 text-transfer
  • 行高 line-height
  • 字符间距（英文）letter-space
  • 字（词）间距 word-space
  • 文本阴影text-shadow
  • 描边text-stroke
  • 溢出 text-overflow
  • 强制换行word-wrap
  • 嵌入字体@font-face
• 盒子模型和边框样式
  • 内边距padding
  • 外边距margin
  • 边框宽度border-width
  • 外观border-style
  • 颜色border-color
  • 圆角边框border-radius
  • 边框阴影box-shadow
  • 多色边框border-colors
  • 图片边框border-image
  • top;right;bottom;left
• 列表样式
  • 符号列表list-style-type
  • 图片符号列表list-style-image
• 表格样式
  • 标题位置caption-side
  • 边框合并border-collapse
  • 边框间距border-spacing
• 图片样式
  • 图片大小width ,height
  • 边框border
  • 对齐text-align和vertical-align（重点体会各种取值的图片为止）
  • 环绕方式float（体会和文字或者其他元素环绕效果）
  • 重点体会图片在各种参数下的位置
• 背景样式
  • 背景色background-color
  • 背景图片background-image
  • 背景图片的位置background-position
  • 重复方向background-repeat
  • 是否固定background-attachment
  • 背景的大小background-size
  • 背景的位置background-position
  • 背景剪切（裁切）background-clip
• 超链接样式
  • 超链接伪类（LoVe&HAte）
    • a:link{}
    • a:visited{}
    • a:hover{}
    • a:active{}
• 变形
  • 平移translate()
  • 缩放scale()
  • 倾斜skew()
  • 旋转roatete()
  • 中心原点transform-origin()
• 过渡
  • 过渡属性transition-property
  • 过渡时间transition-duration
  • 过渡方式transition-timing-founction
  • 延迟时间transition-delay
• 动画
  • 定义动画@keyframes
  • 动画名称animation-name
  • 持续时间animation-duration
  • 动画方式animation-tinming-function
  • 延迟时间animation-delay
  • 播放次数animation-iteration-count
  • 播放方向animation-direction
  • 播放状态animation-play-state
  • 三维动画的基本用法
• 多列布局
  • 列数column-count
  • 每一列的宽度column-width
  • 两列之间的距离column-gap
  • 两列之间的边框样式column-rule
  • 定义跨列样式column-span
  • 经典应用瀑布流效果
• 弹性盒子
  • 放大比例flex-grow
  • 缩小比例flex-shrink
  • 元素宽度flex-basis
  • 复合属性flex
  • 排列方向flex-direction
  • 多行显示flex-wrap
  • 复合属性flex-flow
  • 排列顺序order
  • 水平对齐justify-content
  • 垂直对齐align-items
• 滤镜