1:css选择器优先级讲解
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级演示</title>
<style type="text/css">
h1{background-color:lightgreen;color:blue;}
h2{background-color:lightblue;}
.h2bg{background-color:pink; color:red;}
h3{background-color:green;}
.h3bg{background-color:gray;}
#h3bg{background-color:orange;}
</style>
</head>
<body>
<!--h1只设置了标签样式-->
<h1>html是一门超文本标记语言</h1>
<!--h2即设置了标签样式,又设置了clsaa样式,明显class选择器优先级高于标签选择器-->
<h2 class="h2bg">css是用来对网页进行装饰</h2>
<!--h3同时设置了标签,clsaa,id样式,显然id选择器 > class选择器 > 标签选择器-->
<h3 class="h3bg" id="h3bg">javascript是一门前端编程语言</h3>
</body>
</html>2：div盒子模型的padding和border属性详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div盒子模型的padding及border属性详解</title>
<style type="text/css">
.box1{
/*设置宽,高,背景颜色*/
width:200px;
height:200px;
background-color:pink;
/*padding-top:10px;*/
/*padding-right:20px;*/
/*padding-bottom:30px;*/
/*padding-left:40px;*/
/*设置内边距*/
padding:10px 20px 30px 40px;
/*设置上边框的宽度,样式,颜色*/
/*border-top-width:10px;*/
/*border-top-style:solid;*/
/*border-top-color:red;*/
/*设置右边框的宽度,样式,颜色*/
/*border-right-width:5px;*/
/*border-right-style:dotted;*/
/*border-right-color:blue;*/
/*设置底部边框的宽度,样式,颜色*/
/*border-bottom-width:10px;*/
/*border-bottom-style:double;*/
/*border-bottom-color:gray;*/
/*设置左边边框的宽度,样式,颜色*/
/*border-left-width:10px;*/
/*border-left-style:dashed;*/
/*border-left-color:green;*/
/*设置盒子的边框宽度,样式,颜色*/
border:10px solid red;
}
.box2{
width:100px;
height:inherit;
background-color:blue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
