1.css美化
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*定义p标签的css*/
p{
color:blue;
font-size: 30px;
}
/*定义类的css*/
.yellow{
color: #ffbf00;
font-size:50px;
}
*{
color: aquamarine;
}
</style>
<link rel="stylesheet" href="./my.css">
</head>
<body>
<p>这是一行文字</p>
<div style="font-size: 30px;color:green" >这是div标签</div>
<div class="yellow">要变黄了</div>
<div>通配符选择器</div>
<ul>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
</body>
</html>
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color:red;
font-size:19px;
/*背景宽度*/
width: 50px;
/*背景高度*/
height: 50px;
/*背景颜色*/
background-color: aquamarine;
}
.orange{
color:orange;
font-size: 30px;
width: 60px;
height: 90px;
background-color: #ffbf00;
}
/*这是后代选择器*/
div span{
color: blueviolet;
}
div p span{
color: darkgreen;
}
</style>
</head>
<body>
<div class="red">div1</div>
<div class="orange">div2</div>
<div>
<span>这是一个儿子紫色的span</span>
<p>
<span>这是孙子span绿色</span>
</p>
</div>
</body>
</html>
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*这是并集选择器*/
div,p,span{
color:yellow;
}
</style>
</head>
<body>
<div>div标签</div>
<p>p标签</p>
<span>span标签</span>
</body>
</html>
浙公网安备 33010602011771号