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>
div {
font-size: 25px;
color: aqua;
}
div {
color: red;
}
</style>
</head>
<body>
<div>样式层叠</div>
</body>
</html>
上面的代码中，字体颜色重叠了，所以会以后面的红色为主：
2. font 复合属性
为了方便，字体系列样式可以连写：font:style weight size family;
- 如果要设置默认值，省略前两个即可（font 复合属性只能省略前两个）
- 如果要同时设置单独样式和连写形式，有两种方式：1）把单独样式写在连写的下面（样式层叠原则）；2）把单独的样式写在连写的里面
<!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>
.one {
font: italic bold 20px 宋体;
}
.two {
font: 20px 宋体;
}
.three {
font: italic bold 20px 宋体;
font-style: normal;
font-weight: normal;
}
</style>
</head>
<body>
<div class="one">font 复合属性</div>
<div class="two">只能省略前两个（默认值）</div>
<div class="three">同时设置单独样式和连写形式</div>
</body>
</html>
