CSS基础-嵌套规范（拓展）,居中方法，CSS 特性
CSS基础-嵌套规范（拓展）,居中方法，CSS 特性
拓展1：HTML嵌套规范注意点
1. 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
➢ 但是：p标签中不要嵌套div、p、h等块级元素
2. a标签内部可以嵌套任意元素
➢ 但是：a标签不能嵌套a标签
拓展2：居中方法总结
css特性
目标：能够认识 CSS 的 继承 和 层叠 特性
1. 继承性
2. 层叠性
1.1 继承性的介
小结
➢ 继承性的特性是什么？
• 子元素有默认继承父元素样式的特点
➢ 有哪些常见属性可以继承？
1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height
测试
（拓展）继承失效的特殊情况
➢ 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
1. a标签的color会继承失效
• 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
2. h系列标签的font-size会继承失效
• 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
2.1 层叠性的介绍
➢ 特性：
1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
➢ 注意点：
1. 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
小结
➢ 如果给同一个标签设置了相同的属性，此时样式会？
• 会层叠覆盖，写在最后的会生效
➢ 如果给同一个标签设置了不同的样式，此时样式会？
• 会层叠叠加，共同作用在标签上
测试结果
案例一
案例三：
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
width: 120px;
height: 58px;
background-color: pink;
display: inline-block;
text-align: center;
line-height: 50px;
color: #fff;
}
/* 每个a的背景图不同, 单独找到每个a, 设置不同的背景图片 */
.one {
background-image: url(./images/bg1.png);
}
.two {
background-image: url(./images/bg2.png);
}
.three {
background-image: url(./images/bg3.png);
}
.four {
background-image: url(./images/bg4.png);
}
.one:hover {
background-image: url(./images/bg5.png);
}
.two:hover {
background-image: url(./images/bg6.png);
}
.three:hover {
background-image: url(./images/bg7.png);
}
.four:hover {
background-image: url(./images/bg8.png);
}
</style>
</head>
<body>
<a href="#" class="one">五彩导航</a>
<a href="#" class="two">五彩导航</a>
<a href="#" class="three">五彩导航</a>
<a href="#" class="four">五彩导航</a>
</body>
</html>
结果如下：
