html背景属性及选择器进阶 ，优先级计算

背景属性

插入图片 img src ,css 属性插入图片

div {
   
    width:100px;
    height:100px;
    //背景属性
    background:
    
}

background:
图片路径url()  是否平铺   位置/尺寸   
是否随着滚动条滚动 背景颜色;


图片路径 background-image:url(./image/a.jpg);
是否平铺 background-repeat:no-repeat不平铺/repeat 平铺（默认） /repeat-x 水平/repeat-y垂直;

位置 background-position:npx mpx/n% m% / right bottom or left top or center center ;


尺寸 background-size:wpx hpx /w% h% 相对于背景盒子;

是否随着滚动条滚动:
background-attachment:scroll(默认)/fixed;
fixed: 图片固定在背景盒子上 不随内容滚动  改变了背景图参考对象 变为可视区域

背景颜色background-color:rgba()/rgb()/#ffacdc

css选择器进阶

基础选择器 * , tagName , class, id 等…

父子关系选择器

后代选择器

E F {
    
} 匹配的是E的后代元素  类型为F类型
.box span {
    
}

子代选择器

E > F {
    
}匹配的是E元素的直接子代 类型为F类型

适应场所：多级列表嵌套时

兄弟关系选择器

兄弟选择器

E ~ F {}匹配的是E的相邻的下面的兄弟元素 类型为F类型

相邻选择器

E + F {}匹配的是E 的紧紧相邻的下面的兄弟元素 类型为F类型

数学关系选择器

交集选择器

EF {} 匹配的是既是E类型又是F类型的元素 
.a {}
div.a {}
p.a {}

并集选择器

E ,F ,C ,D .... {}匹配的是既是E 还有F 还有C 还有D... 

选择器优先级

选择器类型	优先级（权重）	写法
行内样式	1000
id选择器	100	#id值{}
class	10	.class值{}
TagName标签名	1	tagName {}
* 全局	0	* {}
继承属性，默认分配	无	text-(除了text-decoration),font-,line-,color,list-

复合选择器应该怎么计算优先级值?

复合选择器 = 基础选择器的和（不计算关系符号）;

.a .b {

}优先级 10+10

.a > .b {

}优先级 10+10

行内样式 > id选择器 >class >TagName标签名>* 全局> 继承属性

语义化

em,strong,ins,del,h1~h6…

什么是语义化？用合适的标签表示合适的内容

作用？