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

背景案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lQ1Br6n1-1605962059032)(…/…/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/%E8%80%81%E5%B8%88/day04/%E7%AC%94%E8%AE%B0/media/jd_bg01.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GbzHx3Sp-1605962059035)(…/…/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/%E8%80%81%E5%B8%88/day04/%E7%AC%94%E8%AE%B0/media/%E8%83%8C%E6%99%AF%E6%A1%88%E4%BE%8B02.png)]

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... 

选择器优先级

同级的话 就看代码执行的顺序 CSS的层叠性

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

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

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

.a .b {

}优先级 10+10

.a > .b {

}优先级 10+10

语义化

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

什么是语义化?

就是用合理、正确的标签来展示内容，比如h1~h6定义标题。

语义化优点∶

1. 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
2. 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
3. ·方便其他设备解析，如盲人阅读器根据语义渲染网页
4. 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。