前端学习日记03

背景属性

1、 background-color ： 背景色
值： 颜色值
背景色不能填充到margin区域

2、 background-image ：设置背景图片
值： url(图片链接
背景图片和图片的区别： 图片是占位的，背景图片不占位，当做背景看待，上面可以放置其他元素

3、 backgroun-repeat ： 设置背景的平铺方式
值： repeat 默认值 ，重复铺设
no-repeat 只铺设一次，不重复铺设
repeat-x 水平方向重复铺设
repeat-y 垂直方向重复铺设
了解：
background-repeat-x: repeat | no-repeat
background-repeat-y: repeat | no-repea

4、 background-position: x y ：设置背景图片的位置
值： 第一个是水平方向的值 第二个是垂直方向的值
left | center | right top | center | bottom
如果写一个值，另一个方向默认center
长度单位 px
​
5、 background ： 背景的复合属性：
值 background: color image repeat postion
可以单独值设置color 或者image
background: chartreuse;
background: url(…/练习/images/01.jpg)
repeat和position是针对背景图片所使用

CSS三大特性

CSS三大特性： 层叠，继承，优先级
1、 层叠性：
多次使用同一个选择器设置标签的样式时，
如果样式不冲突就会同时起作用，如果样式有冲突时，则遵循就近原则(后面的样式替代前面的样式)；
2、 继承性
子元素可以继承父元素的某些css属性
可以继承的属性：
font- 文字系列的属性
color a标签(必须选中a标签才可以设置成功)除外
text- 文本系列
width 伪继承
list-style: 设置列表符号的样式（可以继承）
【注意】： 背景系列不可以继承
​
3、 优先级
通过不同的选择器选中同一个标签时，
选择器权值大的样式起作用，如果权值相等，则遵循就近原则（后面样式起作用）
​
权值 = 单一选择器的权重相加

    选择器       权重
     *            0
     ele          1
     .class       10
     #id          100
     行内         1000

​
特殊情况：
1、 行内样式优先
2、 继承的样式优先级最低
3、 写在css属性后面的 !important 最高级
eg： background-color: rgb(165, 164, 160) !important;
4、 权重相同，就近原则

标签分类及特点

标签类型：
1、 块级标签
div ，p ， ul ，li ，ol ，dl，dt , dd，h1-h6
特点：
（1） 独占一行，总是从新的一行开始
（2） 宽，高，外边距，内边距都可以设置
（3）宽度默认父元素的100%
（4） 可以嵌套行内标签和其他块标签（p标签不能嵌套块）
2、 行内标签
span， strong, b, i, em ,a ,del ,s
特点：
（1） 和其他行内标签在一行排列
（2） 不能设置宽高，可以设置水平方向的padding和margin
（3） 宽度由内容撑开
（4） 可以嵌套行内标签，不能嵌套块标签（a标签可以嵌套任何标签）
3.行内块标签
img,td
特点：
（1）不独占一行，可以和行内标签或者行内块标签在一行排列
（2） 可以设置宽高，内外边距
（3） 宽度由内容撑开

4、标签类型转换
display：
值： block 将其他类型的标签转换成块标签
inline 将其他类型转换成行内标签
inline-block 将其他类型转换成行内块标签