选择器权重:
类型选择器 < 类选择器(class选择器) < id选择器
0001 0010 0100
伪类选择器:0010
包含选择器:选择器权重之和
内联样式权重:1000
继承样式:0000 写在父元素身上,但是作用到了子元素身上,这就是继承
最高权重:!important
总结:
权重高的覆盖权重低的
权重相同时,后写的覆盖先写的
css核心属性:
font-size:文本大小;
16px 默认文本大小
12px 最小文本大小
9pt = 12px
em 跟随最近的被作用上的文本大小成倍数关系
rem 跟随根元素(html)的文本大小成倍数关系
font-family:字体1,字体2,字体3...;
【注】
可以写多个字体,每个字体之间用逗号隔开
中文表示的一个字体需要添加引号
多个单词表示的一个字体需要添加引号
单个单词表示的一个字体不需要添加引号
color:文本颜色；
颜色单词: red green yellowgreen
十六进制: # 0-9 a-f #aabbcc缩写为#abc
光色模式: rgb() rgba()
r: red g:green b:blue 0-255
a: alpha 透明度 0-1
font-weight:文本粗细;
bold 加粗视觉效果
bolder 粗体字(具有强调作用)
normal 常规文本
100-300 变细
400 == normal 不加粗
500 不加粗
600-900 加粗
font-style:文本倾斜;
italic 斜体字
oblique 倾斜的视觉效果
normal 常规文本
text-align:文本水平对齐方式;
left 左对齐
center 居中
right 右对齐
justify 两端对齐
vertical-align:垂直对齐方式;
top 顶部对齐
middle 居中
mottom 底部对齐
baseline 文本底部对齐
【注】用法后面讲
line-height:行高; 文本垂直对齐方式
px em
行高值 < 高度值 偏上
行高值 = 高度值 居中
行高值 > 高度值 偏下
【注】当值不写单位时,默认是em为单位
text-decoration:文本修饰;
underline 下划线
line-through 删除线
overline 上划线
none 没有线
text-indent:首行缩进
px em
【注】只针对首行有效,可以为负数
font:倾斜 加粗 文本大小/行高 字体类型
letter-spacing:字符间距;
word-spacing:词间距;
【注】可以为负数
list-style:none;取消列表符号
背景相关属性:
background-color:背景颜色;
颜色单词: red green yellowgreen
十六进制: # 0-9 a-f #aabbcc缩写为#abc
光色模式: rgb() rgba()
r: red g:green b:blue 0-255
a: alpha 透明度 0-1
background-image:url("图片地址");
【注】图片默认重复
background-repeat:背景图是否重复;
repeat 重复
repeat-x 水平重复
repeat-y 垂直重复
no-repeat 不重复
background-position:水平 垂直;
px %
left center right
top center bottom
【注】只写一个数值,表示的是水平方向,且垂直方向默认居中
只写一个关键字,表示的是对应方向,另一边将居中
background-attachment:背景关联;
scroll 滚动查看（固定在当前元素）
fixed 固定不动（固定在浏览器窗口）
background-size: 背景图大小;
px %
【注】只写一个值，表示宽度，且高度将等比例缩放
cover 等比例缩放,图片有可能超出元素
contain 等比例缩放，元素有可能留白
background:颜色 url("背景图片")是否重复 定位/大小 是否关联;
浮动:
浮动的作用:让原本竖着排列的元素横着排列
特点:
1:添加浮动后,将脱离文档流
文档流:元素默认从上至下,从左至右的排列顺序
