1.写一个案例， 演示css中的选择器优先级(忽略js)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css中的选择器优先级</title>
<style>
h1 {
color:red;
background-color: blue ;
}
/*类选择器.class*/
.exp1 {
color: red;
background-color: green;
}
/*id选择器#id*/
#exp{
color:red;
background-color: gray;
}
</style>
</head>
<body>
<!--1. 写一个案例， 演示css中的选择器优先级(忽略js)-->
<!--通过分步执行，可以看出选择器的优先级：Style>id选择器>class选择器>标签-->
<h1 id="exp" class="exp1" title="演示CSS中的选择器优先级" style="color: red;" >演示CSS中的选择器优先级</h1>
<h1 id="exp" class="exp1" title="标签内定义背景色BLUE" style="color: red;background-color:blue;" >演示CSS中的选择器优先级</h1>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
通过以上实例，可以了解常用选择器的优先级：Style>id选择器>Class选择器>标签
2. 写一个盒模型的简单案例，体会padding/border的简写规则
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
.box1{
width:300px;
height:300px;
background-color:lightblue;
padding: 20px 30px 40px 50px;
/*border-top:10px solid red;*/
/*border-right:10px solid red;*/
/*border-bottom:10px solid red;*/
/*border-left:10px solid red;*/
border:10px solid pink;
}
.box2{
width:300px;
height:300px;
background-color:blue;
padding: 20px 30px 40px;
} </style>
</head>
<body>
<div class="box1" >aaa</div>
<div class="box2" >aaa</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
盒模型一共有五元素：width(宽),height(高),background-color(背景色),padding(内边距),margin(外边距)
padding 宽度设置
1、padding: 10px 20px 30px 40px; （上10，右20，下30，左40）
2、padding: 10px 20px 30px ; （上10，右20，下30，左20）
3、padding: 10px 20px ; （上10，右20，下10，左20）
4、padding: 10px ; （上10，右10，下10，左10）