收藏
批改状态：未批改
老师批语：
CSS选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器优先级</title>
<style>
/*标签选择器*/
h1{
background-color: #0bcb9a;
}
/*类选择器*/
.bg-blue{
background-color: red;
}
/*id选择器*/
#by-yellow{
background-color: #00aba9;
}
/*javascript > style > id > class > 标签*/
</style>
</head>
<body>
<!--元素的通用属性-->
<!--id ***号
class 性别（类别）
title 姓名（提示）
style 个人简介（样式）
-->
<h1 id="by-yellow" class="bg-blue" title="php.cn" style="color: #bacee4">php中文网</h1>
<script>
document.getElementById('by-yellow').style.backgroundColor='red';
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
盒模型padding和margin：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<link rel="stylesheet" href="static/css/style2.css">
<style>
.box1{
width: 100px;
height: 100px;
background-color: #0a8ddf;
border: 2px solid pink;
/*内边距 顺序上右下左*/
padding: 20px;
/*外边距 顺序上右下左*/
margin: 0;
}
/*.box2是.box1的子元素 width和heigth可以继承 padding和margin 不可以继承*/
.box2{
/*继承 inherit */
width: inherit;
height: inherit;
background-color: red;
border: 2px solid blue;
/*内边距 顺序上右下左*/
padding: 20px;
/*外边距 顺序上右下左*/
margin: 0;
}
</style>
</head>
<body>
<!--盒模型可以设置的6个样式：width、heigth、padding、margin、background-color、border -->
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
