问题:有两个元素,更改一个元素字体大小同时变化另一个元素字体大小
方法一:继承性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.font_fl {
float: left;
width: 100%;
font-size: 20px;
}
.fr {
float: right;
}
</style>
</head>
<body>
<span class="font_fl">左浮动
<span class="fr">右浮动</span>
</span>
</body>
</html>
方法二:标签class属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.fl {
float: left;
}
.fr {
float: right;
}
.font {
font-size: 20px;
}
</style>
</head>
<body>
<span class="font fl">左浮动</span>
<span class="font fr">右浮动</span>
</body>
</html>
详解:
- 利用字体大小有继承性的特性实现更改一个元素字体大小同时改变另一个字体的大小
- 利用标签具有公共属性并且有相同的属性值,属性值作为选择器,并且在选择器中声明字体大小