1.css选择器优先级
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用选择器与优先级</title>
<style>
h1{
background-color:lightgreen;
color: red;
}
.world{
background-color: lightblue;
color:black;
}
#world{
background-color:yellow;
color: purple;
}
</style>
</head>
<body>
<h1 id="world" class="world" title="php.cn" style="background-color:aqua;">你好世界</h1>
<p>CSS选择器的优先级，内联样式 > ID选择器 > 类选择器 > 标签选择器</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.盒模型的简单案例，体会padding/border的简写实例
实例
<!DOCTYPE html>
<html>
<head>
<title>盒模型案例，体会padding/border的简写</title>
</head>
<style type="text/css">
.world{
height:250px;
width:300px;
background-color:lightblue;
padding:20px 30px 40px ;
border:10px solid red;
}
.world1{
height:inherit;
background-color:yellow;
margin:10px 6px;
border:5px dotted lightyellow;
}
</style>
<body>
<div class="world">
<div class="world1">
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例