1、写一个案例， 演示css中的选择器优先级(忽略js)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>演示css中的选择器优先级（不含JS）(selector)</title>
<style>
/* 标签选择器 */
h3 {
background-color:silver;
color: red;
}
/* class类选择器 */
.bg-lightblue {
background-color: lightblue;
color:gold;
}
/* id选择器 */
#bg-yellow {
background-color: yellow;
color: blueviolet;
}
</style>
</head>
<body>
<h3>我是一号，我是只设置了标签选择器的样子！</h3>
<h3 class="bg-lightblue">我是二号，我是设置了标签选择器和class选择器的样子！</h3>
<h3 class="bg-lightblue" id="bg-yellow">我是三号，我是设置了标签选择器、class选择器和id选择器的样子！< id</h3>
<h3 class="bg-lightblue" id="bg-yellow" style="background-color: blue;color: white">我是四号，我除了设置标签选择器、class选择器和id选择器，还在h标签内部设置了属性！</h3>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、写一个盒模型的简单案例，体会padding/border的简写规则
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>世间万物皆系于盒子之上(box)</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: lightblue;
/* 可以简写:按顺时针 */
padding: 50px 40px 30px 20px;
/* 上边框 */
border-top-width: 10px;
border-top-style: solid;
border-top-color: red;
/* 右边框 */
border-right-width: 10px;
border-right-style: dashed;
border-right-color: green;
/* 下边框 */
border-bottom-width: 10px;
border-bottom-style: dotted;
border-bottom-color: blue;
/* 左边框 */
border-left-width: 10px;
border-left-style: double;
border-left-color: black;
/* 以上样式与可以简写 */
border-top: 10px solid red;
border-right: 10px dashed yellow;
border-bottom: 10px dotted blue;
border-left: 10px double black;
/* 如何每个方向的边框宽度,样式与颜色是一样的,还可以进一步简写 */
border: 10px solid slateblue;
}
/*box2盒子是box1的内容,会继承box1的宽度*/
.box2 {
/*height: inherit;*/
background-color: salmon;
}
</style>
</head>
<body>
<h3 style="color: palevioletred">写一个盒模型的简单案例，体会padding/border的简写规则</h3>
<div class="box1">
<p>里面可以看到汉字吗？</p>
<div class="box2">
<img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201406/2014063021281300.gif" alt="我会显示提示吗？" style="width: 200px">
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例