目录
css中的选择器优先级
2.盒模型的简单案例，体会padding/border的简写规则
一.css中的选择器优先级
ID选择器的优先级大于class选择器 ,class样式的优先级大于标签选择器,然后就到标签选择器
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css中的选择器优先级</title>
<style>
/* 标签选择器 */
h1{
background-repeat: lightgreen;
color: indianred;
}
/* 类选择器/class选择器 */
/* class样式的优先级会大于标签选择器 */
.class{
background-color:lightblue;
}
/* ID选择器的优先级大于class选择器 */
#id{
background-color: #CD5C5C;
}
</style>
</head>
<body>
<!-- style > id > class -->
<h1 id="id" class="class" style="color:aqua">asfklhagfhal</h1>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二.盒模型的简单案例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型的简单案例</title>
<style>
.box1{
width: 300px;
height: 200px;
background-color: #993;
/* 内边 */
padding-top: 20px;
padding-right: 30px;
padding-bottom:40px;
padding-left: 50px;
/* 内边简写 */
padding: 20px 30px 40px 50px;
内边简写内,第二个值一定是左或者右
/* 上边框 */
/* 边框宽度10px */
border-top-width: 10px;
/* 边框模型 */
border-top-style: solid;
/* 边框颜色 */
border-top-color: #ADD8E6;
/* 边框简写 */
/* 边框宽度10px *//* 边框模型solid 边框颜色red */
border-top: 10px solid red;
border-right: 10px solid #777;
border-bottom: 10px dotted blue;
border-left: 10px solid #789;
}
.box2{
height: 150px;
background-color: #999;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例