Collection
Collection
1. 写一个案例， 演示css中的选择器优先级(忽略js)
//css选择器的优先级： 行内样式 > id选择器 > class选择器 > 标签选择器h1{color:blue;}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>css选择器的优先级</title>
<style>
h1{
color:red;
}
.test{
color:yellow;
}
#test{
color:blue;
}
</style>
</head>
<body>
<!--css优先顺序：style > id > class>定义的标签样式;
-->
<h1 id="test" class="test" style="color:green">css选择器优先级，style内联样式的优先级最高</h1>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2. 写一个盒子模型的简单案例，体会padding/border的简写规则
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>盒子模型的简单案例，padding/border的简写规则</title>
<style>
#first{
width:200px;
height: 300px;
border: 2px solid black;
}
#first p{
width: 80%;
height: 40%;
border: 2px solid red;
text-align: center;
line-height: 120px;
margin: 16px;
}
</style>
</head>
<body>
<div id="first">
<p>第一个段落的内容</p>
<p>第二个段落的内容</p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例