css的作用是给网页添加样式
css样式
css与html的结合方式
- 1.内联样式
- 2.外部样式
- 3.内部样式
三种结合方式,内联样式优先级最高,外部样式与内部样式的优先级相等,后面写样式会将前面的样式覆盖,权重高的会将权重低的覆盖
css 选择器
css 选择器类型
1.id选择器
使用#来进行声明:
#div1{
}
2.类选择器
使用"."来进行声明:
.div{
}
3.属性选择器
标签[属性="属性值"]{
}
4.伪类选择器
:hover{
}
5.群组选择器
p,#div1{
}
6.通配符
*{
}
7.包含选择器
父元素 子元素{
}
8.标签选择器
标签名{
}
9.结构选择器
:nth-child(1){
}
选择器权重
- id权重 100
- class选择器 10
- 伪类选择器 10
- 结构选择器 10
- 属性选择器 10
- 标签选择器 1
- 通配符 0
- 内联样式 1000
- 包含选择器 :各个选择器权重之和
- 群组选择器:与各自的权重相等
css 属性
背景:background
复合属性,有五个参数
参数一:背景颜色
参数二:背景图片的链接地址 url()
参数三:平铺方式 默认repeat, no-repeat, repeat-x ,repeat-y
参数四:背景图片水平方向的位置:left/right/center/px/%
参数五:背景图片垂直方向的位置: top/bottom/center/px/%
background-size 用来设置背景图片的大小
取值两个,宽度与高度
取值一个,cover:覆盖 图片大盒子小 ,contain:包含,盒子包含图片,盒子大图片小
字体属性
1.font-fimaly 设置字体
2.设置字体颜色 color
3.设置字体大小 font-size
4.设置字体的粗细 font-weight
5.设置字体倾斜 font-style
6.设置字体的装饰 text-decoration,取值none underline 下划线 line-throught 删除线
7.首行缩进 text-indent,一般取值2em 默认1em=16px
8.文本对齐方式 text-align, 取值center,默认left
盒子属性
border 边框
border是一个复合属性,使用border的时候,代表四条边框
参数一:样式 参数二:边框宽度 参数三:边框颜色
border:none 去除边框
padding 内边距
取值1个,代表上下左右内边距相同
取值两个,参数一上下 参数二左右
取值三个,参数一上 参数二左右 参数三下
取值四个,参数一上 参数二右 参数三 下 参数四左
margin 外边距
取值1个,代表上下左右内边距相同
取值两个,参数一上下 参数二左右
取值三个,参数一上 参数二左右 参数三下
取值四个,参数一上 参数二右 参数三 下 参数四左
background 指能够平铺的范围:width,padding,border
盒子实际占的宽度 = width+padding-left+padding-right+border-left+ border-right+margin-left+margin-right
尺寸属性
宽度取值%或者像素
高度,取值%或px
当对于块元素来讲:宽度不写,默认与父元素相同,高度不写由内容的高度来决定
对于行内元素,宽度与高度都是由内容决定
line-height:行高
1.当行高与元素高度相等的时候,单行文本会垂直居中显示
2.设置文本与文本之间行间距
列表属性
list-style:none 去除列表默认的样式
浮动
浮动的作用:能使块元素进行横向排列
float:left/right/none;
高度塌陷出现的时机:
1.没有给父元素高度
2.父元素中所有的子元素发生了浮动,这时候就会出现高度塌陷
解决方法:
1.在父元素上添加一个overflow:hidden
2.在父元素中添加一个空盒子,给空盒子添加一个clear:both
显示属性
display:none; 不占位置的隐藏
display:block; 显示,转为块元素
设置透明度的隐藏:opacity:0; 隐藏,占据位置隐藏[通过设置的透明度] 1:不透明 0:全透明
定位属性
position:relative/absolute/fixed
- 相对定位:相对自己原来本身的位置来进行定位,仍然占据自己原本的位置(不脱离文档流的)
- 绝对定位:相对于具有定位属性的父元素来进行定位的,若是找不到则找body,不占据原本的位置(脱离文档流)
- 固定定位:相对于当前窗口来进行定位的,与父元素无关,与自己本身的位置也无关
- 相对定位与绝对定位是配合使用的,一般情况下,相对定位作为父元素[包含块],给子元素添加绝对定位在父元素中进行定位
形变与过渡
动画:平移、缩放、旋转动画
平移动态:transform:translateX(); 取值为正的时候,向右平移,取值为负向左平移
translateY(); 取值为正,向下平移,取值为负向上平移 [带单位]
translate(x,y); 同时向x与y同时移动
缩放动画: transform:scale() ; 取值[0,1)的时候缩小 大于1的时候放大
旋转动画: transform:rotate() ;单位deg一定要带 取值为正顺时针方向旋转,取值为负逆时针方向旋转
阴影效果
box-shadow: 水平方向的位置 垂直方向的位置 高斯模糊的距离 阴影的宽度 阴影的颜色以及透明度 阴影的样式;
animation动画
参数一:绑在keyframes上名称 参数二:动画执行的时间
参数三:动画开始之前的延迟 参数四:动画执行次数
参数五:是否轮流反向执行 参数六:动画的运动曲线
@keyfremes name{
0%{}
50%{}
100%{}
}