div{
border:1px solid yellow;
}
span{
border:1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS与HTML结合</title>
<link rel="stylesheet" type="text/css" href="01-css.css"/> <!--link标签引入css代码-->
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS标签名选择器</title>
<style type="text/css">
div{
border:1px solid yellow;
color:blue;
font-size:30px;
}
span{
border:5px solid blue;
color:blue;
font-size:20px;
}
</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#id001{
color:blue;
font-size:30px;
border:1px solid yellow; <!--边框粗细 实线边框 黄色-->
}
#id002{
color:red;
font-size:20px;
border:5px dotted blue; <!--边框粗细 虚线边框 蓝色-->
}
</style>
</head>
<body>
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CLASS选择器</title>
<style type="text/css">
.class01{
color:blue;
font-size:30px;
border:1px solid yellow;
}
.class02{
color:green;
font-size:20px;
border:1px dotted red;
}
</style>
</head>
<body>
<div class="class01">dic标签class01</div>
<div class="class02">dic标签class02</div>
<span class="class01">span标签class01</span>
<span>span标签</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style type="text/css">
.class01,#id01{
color:red;
font-size:20px;
border:1px solid blue;
}
</style>
</head>
<body>
<div class="class01">div标签class01</div>
<div id="id01">div标签id01</div>
<span id="id01">span标签</span><br/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用样式</title>
<style type="text/css">
div{
<!--颜色-->
color:red;
<!--黄色1像素实线边框-->
border:1px solid yellow;
<!--宽度-->
width::300px;
<!--高度-->
height:200px;
<!--背景颜色-->
background-color:green;
<!--字体样式-->
font-size:20px;
<!--DIV居中-->
margin-left:auto;
margin-right:auto;
<!--文本居中-->
text-align:center;
}
table{
border:1px solid red; <!--设置边框-->
border-collapse:collapse; <!--将边框合并-->
}
td{
border:1px solid red;
}
a{
text-decoration:none; <!--超链接去下划线-->
}
ul{
list-style:none; <!--列表去除修饰-->
}
</style>
</head>
<body>
<ul>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
<li>1111111111</li>
</ul>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<a href="http://www.baidu.com">百度</a>
<div>div标签</div>
</body>
</html>