<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-size: 50px;
color: aqua;
}
.p {
font-size: 50px;
color: red;
}
.chicun {
width: 120px;
height: 110px;
}
.blue {
background-color: rgb(96, 96, 166);
}
.red {
background-color: rgb(214, 9, 9);
}
.wjj {
font-family: "Microsoft yahei";
font-style: italic;
font-weight: 700;
font-size: 16px;
}
/* <!-- 简写: .wjj{ font: 16px 'Microsoft yahei'} 大小和字体不可省略 --> */
</style>
</head>
<body>
<p>只能拉一点点</p>
<p class="p">只能拉一点点</p>
<div class="red chicun">我是一个盒子</div>
<div class="blue chicun">我也是一个盒子</div>
<div class="red chicun">我是一个盒子</div>
<div class="wjj">长大后想要干什么?开挖掘机~</div>
</body>
</html>
经验总结:
<!--
类选择器: .名称{ }
引用: class="名称"。多引用用空格隔开,class="red chicun"
口诀:样式点定义,结构类定义
与id选择器不同,id只能引用一次,用#定义
<div></div>是个盒子,用来装网页内容
通配符选择器*{ }应用在所有html中,无需调用
-->