一.定义:
层叠样式表 网页修饰 后缀.css 文件 注释:/* */
二.引入方式:
1.外部链接
使用link标签href=“”指向目标css文件
2.内部式
在html文件的style标签内编写css代码
3.行内式
直接在标签style属性中编写css代码
优先级:就近原则,行内式离标签最近 优先级最高
三.标签基本属性:
name Id style class
四.四种选择器
1.* 通配符选择器
适用所有标签
2.tag 标签选择器
适用于指定类型的标签
3.class 类选择器
.类名{}
标签中的class属性引入
4.id id选择器
#id{}
五.其他选择器
1.,(逗号)选择器 p1,p2{}
2.空格后代选择器 div p
3.子选择器 eg: div>p
4.+ 相邻下一个元素
5.- 下面多个
六.属性选择器
1.空格 选中所有后代
2.> 子集
3.nth-of-type 优先级较高
even偶数
odd奇数
数字:具体行数
七.伪类选择器 a超链接
1.a:link
未访问前
2.a:visited
访问后
3.a:hover
鼠标悬停
4.a:active
鼠标点击时
八.常用属性
1.文字属性:
font-
family 类型 多个类型之间用逗号隔开 从前往后依次查找
font-style: italic斜体
size 字体大小
weight 粗细
color文字颜色
2.文本属性:
text-lign 文本位置
left
center
right
text-decoration 文本装饰
none
underline 下划线
line-through 删除线
overline 上划线
text-transform
capitalize
text-indent
开头缩进
text-overflow
滚动条
3.边框属性:
border:
border-top
border-bottom
boder-left
boder-right
九.盒子模型
width
height
border 边框
margin 外边距
top
bottom
left
right
padding 内边距
top
bottom
left
right
十.display:
none 隐藏标签
inline 行内模式 不可设置宽高
block 块级
inline-block 行内块
display:把标签行内和块之间转换
十一.定位:
1.静态定位 static
浏览器的默认定位方式
top left不会产生偏移
2.相对定位 relative
相对于静态标签的定位
left
向左偏移
top
从上向下偏移
占用文档流
3.绝对定位 absolute
不占用文档流
相对于外层第一个非静态定位
使用top left right bottom产生偏移
4.固定定位 fixed
相对于窗口
使用top left right bottom产生偏移
5.粘性定位
当标签元素产生滚动的时候,满足条件就定位
属性值:sticky
优先级
z-index: 数字; 几层
十二.浮动
1.float
left
左浮动
right
右浮动
2.clear 清除浮动
left
right
both
十三.弹性盒子(布局)
1.display:flex
2.常用属性:
<1.flex-direction:
row(默认) 行 从左往右
column 列 交叉轴(纵向)从上到下
row-reverse 行反向排序 从右向左
column-reverse 从下向上
<2.justify-content:
主轴横向对齐(默认)
center 居中对齐
baseline 居左
end 居右
space-between 两边对齐 中间留白
space-around 两边和中间都留白 中间留白是两边的二倍
<3.align-items:
默认纵向交叉轴对齐
center
flex-start 左边开始
flex-end 右边开始
end
十四.动画效果
1.transform:
<1.>translate 移动效果
translateX
横向移动
translateY
纵向移动
数值 移动的距离
<2.>rotate 旋转效果
rotateX
rotateY
角度单位deg
<3.>scale 缩放效果
scaleX
scaleY
缩放倍数 数值
<4.>skew 扭曲
skewX
skewY
skewZ
单位:角度deg
2.transition:
过渡属性
动作的时间 单位:秒