CSS 入门与实战

CSS简介 在HTML中导入样式表 CSS选择符 CSS 属性 - 值对 标签选择符 ID选择符 class选择符 属性选择器

display属性 块级元素display:block 行内元素display:inline 行内块级显示display:inline-block 行内、块级、行内块级相互转换

Flex 布局盒模型 flex盒成员属性 成员增长系数属性：flex-grow 成员收缩系数属性：flex-shrink 成员默认大小属性：flex-basis 盒方向属性：flex-direction 盒换行属性：flex-wrap 纵轴向对齐属性：align-content 纵轴分布属性：align-items 纵轴分布属性：align-self 主轴分布属性：justify-content 成员顺序属性：order

流动模型 绝对定位position：absolute 相对定位position：relative 层模型固定定位position：fixed 层模型top/bottom/left/right 层模型z-index 浮动布局float 清除浮动clear

盒模型的概念 宽高属性：width/height 宽度限值属性：min-width/max-width 高度限值属性：min-height/max-height 边框属性：border/border-top/right/bottom/left 外边距属性：margin/margin-top/right/bottom/left 内边距属性：padding/padding-top/right/bottom/left 计算模式属性：box-sizing

光标属性：cursor 尺寸调整属性：resize

变换属性： transform 位移变换：translate/translateX//translateY 缩放变换： scale/scaleX/sacleY 旋转变换：rotate 倾斜变换：skew/skewX/skewY 自定义变换：matrix

CSS3d元素变换 perspective 透视属性 perspective-origin透视原点属性 Z轴位移变换translateZ() Z旋转变换rotateZ Z轴缩放scaleZ 3D位移变换translate3d 3D缩放变换scale3d 3D旋转变换rotate3d

transition过渡 CSS3 transition-property CSS3 transition过渡时间 CSS3 transition-timing-function animation动画 animation关键帧 animation基本属性1 animation基本属性2 CSS3 animation-timing-function

font字体属性1 font字体属性2 在线字体格式 在线字体的引用

text-align对齐 text-transform变换 text-indent缩进 letter-sapcing和word-spacing

background-color color的颜色函数 background-image background-repeat background-orign background-position

不透明属性opacity 元素边框outline 溢出属性overflow 阴影属性box-shadow 可视属性visibility

线性渐变linear-gradient 径向渐变radial-gradient 重复线性渐变repeating-linear-gradient 重复径向渐变repeating-radial-gradient

滤镜属性filter 模糊滤镜bulr 亮度滤镜brightness 阴影滤镜drop-shadow 灰度滤镜grayscale 色相旋转滤镜hue-rotate 反色滤镜invert 不透明度滤镜opacity 泛黄滤镜sepia 饱和度saturate 对比度contrast

a:link链接伪类选择器 a:visited链接伪类选择器 悬停元素:hover伪类选择器 当前活动元素:active伪类选择器 焦点元素:focus伪类选择器 当前选中的元素:checked伪类 :enabled可用&:disabled禁用元素伪类

:empty无子元素 :not否定条件 :root根元素 :target目标元素 :first-child第一个子元素 :last-child最后一个子元素 :only-child唯一子元素 :nth-child(n)子元素位置模式 :nth-last-child(n)子元素反向位置模式 :first-of-type类型第一个子元素 :last-of-type同类型最后一个 :only-of-type类型中唯一的元素 :nth-of-type(n)类型位置模式 :nth-last-of-type(n)类型反向位置模式

charset设置字集 import导入样式文件 page打印样式 supports media媒体查询

E::first-letter E::first-line E::before E::after E::placeholder E::selection

E:read-only E:read-write E:optional E:required E:invalid E:valid

attr() calc() url()