来晚了,这两天作业考试没来得及上传
背景属性
插入图片 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定义标题。
语义化优点∶
- 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
- ·方便其他设备解析,如盲人阅读器根据语义渲染网页
- 有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。