选择器权重: 类型选择器: 0001 class选择器: 0010 id选择器: 0100 群组选择器: 选择器本身 后代选择器: 选择器权重之和 内联样式: 1000 继承样式: 0000
css核心属性:
font-size:文本大小;
默认文本大小16px
最小文本大小12px
关键字写法
xx-small =9px
x-small =11px
small =13px
medium =16px
large =19px
x-large =23px
xx-large =27px
常用单位:
pt(了解就行)
px 像素单位
em 跟随作用上的font-size值成倍数关系
rem 跟随根元素(html)的font-size值成倍数关系
color:文本颜色;
颜色单词: red green blue..
十六进制:
取值范围: 0-9 a-f #
#aabbcc 可以缩写为 #abc
光色模式:
rgb(0,0,0)
rgba(0,0,0,0)
r: red 0-255
g: green 0-255
b: blue 0-255
a: alpha 透明度 0-1
font-family:字体1,字体2,字体3..。;
【注】中文表示的字体需要添加引号
单个单词表示的字体不需要添加引号
多个单词表示的字体需要添加引号
多个字体需要逗号隔开
font-weight:文本粗细;
bolder 粗体字
bold 加粗效果
normal 常规文本
100 200 300 变细
400 = normal
500
600 700 800 900 加粗
font-style:文本是否倾斜;
italic 倾斜效果
oblique 斜体字
normal 常规文本(不倾斜)
line-height:文本垂直对齐方式; 行高
行高值 < 高度值 偏上
行高值 = 高度值 垂直居中
行高值 > 高度值 偏下
【注】
主要针对单行文本设置
不能为负数
font:倾斜 加粗 文本大小/行高 字体类型;
text-align:文本水平对齐方式;
left 左对齐
center 水平居中
right 右对齐
justify 平均分配
text-decoration:文本修饰;
overline 上划线
line-throught 中划线(删除线)
undeline 下划线
none 取消线
text-indent:首行缩进;
px em
【注】只针对第一行有效
可以为负数
css层叠性
选择器权重大的覆盖权重低的
内联样式 > 内部样式 / 外部样式
权重相同时,后写的覆盖先写的
!important 是最重要的,遇到它,所有的规则都将不遵循
list-style:none; == list-style-type:none;取消列表符号
background-color:背景颜色;
颜色单词: red green blue..
十六进制:
取值范围: 0-9 a-f #
#aabbcc 可以缩写为 #abc
光色模式:
rgb(0,0,0)
rgba(0,0,0,0)
r: red 0-255
g: green 0-255
b: blue 0-255
a: alpha 透明度 0-1
background-image:url("图片地址");
【注】
图片不占位
图片默认重复
background-repeat:背景图是否重复;
repeat 重复(默认值)
no-repeat 不重复
repeat-x 水平重复
repeat-y 垂直重复
background-position:水平 垂直; 背景图定位
关键字写法:
left center right
top center bottom
px %
【注】
只写一个关键字值时，另一边居中
只写一个px 或者 %值时,表示的是水平,且垂直居中
可以为负数
background-size:宽度 高度;
px %
【注】
只写一个值时，表示的是宽度，且高度将等比例缩放
不能为负数
background-attachment:背景图关联;
scroll 滚动查看(默认值)
fixed 固定不动
background:颜色 url("图片地址") 是否重复 背景图定位/大小 是否关联;
精灵图:
1: 图片一定是png格式,且一张途中有多个小图
2: 一定采用背景图的方式插入图片
3: 一定采用背景图定位来改变图片的位置
