作业1:
CSS中优先级 选择器优先级
标签内部style > 类选择器(class选择器) > ID选择器 > 标签选择器
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="static/css/style1.css">-->
<style>
/*标签选择器*/
div{
width: 200px;
height: 200px;
background-color: brown;
}
/*id选择器*/
.test{
background-color: bisque;
}
/*类选择器*/
#test{
background-color: aquamarine;
}
</style>
</head>
<body>
<!--标签属性内部style-->
<!--标签内部style > 类选择器(class选择器) > ID选择器 > 标签选择器-->
<div id="test" class="test" style="background-color: blue"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业2:
建立2个盒子，设置顶端盒子的背景颜色、内边距、边框的CSS样式
子盒子默认会自动继承父盒子的宽度。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: brown;
border: 5px solid pink;
padding: 10px;
}
/*盒子内套盒子 子盒子会自动继承父盒子的宽度*/
.box2{
/*手动设置集成父盒子的高度 这样父盒子改变大小以后子盒子也会跟着变化*/
height: inherit;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例