CSS 入门与实战
初识CSS
CSS简介
在HTML中导入样式表
CSS选择符
CSS 属性 - 值对
标签选择符
ID选择符
class选择符
属性选择器
HTML元素的基本显示类型
display属性
块级元素display:block
行内元素display:inline
行内块级显示display:inline-block
行内、块级、行内块级相互转换
CSS3弹性盒子(Flex Box)
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
设置2D元素变换
变换属性: transform
位移变换:translate/translateX//translateY
缩放变换: scale/scaleX/sacleY
旋转变换:rotate
倾斜变换:skew/skewX/skewY
自定义变换:matrix
CSS3d元素变换
CSS3d元素变换
perspective 透视属性
perspective-origin透视原点属性
Z轴位移变换translateZ()
Z旋转变换rotateZ
Z轴缩放scaleZ
3D位移变换translate3d
3D缩放变换scale3d
3D旋转变换rotate3d
CSS transition过度和animation动画
transition过渡
CSS3 transition-property
CSS3 transition过渡时间
CSS3 transition-timing-function
animation动画
animation关键帧
animation基本属性1
animation基本属性2
CSS3 animation-timing-function
font字体
font字体属性1
font字体属性2
在线字体格式
在线字体的引用
text文本
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)类型反向位置模式
AT规则
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()
30:00
有问题?问助教!