选择器权重

选择器权重: 类型选择器 < 类选择器(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: 添加浮动后,将脱离文档流

文档流: 元素默认从上至下,从左至右的排列顺序

2: 贴靠想象

3: 图文混排

clear:清除上一个元素因浮动带来的影响;

left 清除左浮动带来的影响

right 清除右浮动带来的影响

both 清除所有浮动带来的影响

none 不清除