<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border:1px solid red;">div标签1</div>
<div style="border:1px solid red;">div标签2</div>
<span style="border: 1px solid red;">span标签1</span>
<span style="border: 1px solid red;">span标签2</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border:1px solid red;
}
span{
border:1px solid red;
}
</style>
</head>
<body>
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>
CSS文件
div{
border:1px solid red;
}
span{
border:1px solid red;
}
HTML文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>
运行结果:
CSS选择器
<!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 dashed blue;
color:yellow;
font-size: 20px;
}
</style>
</head>
<body>
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>
ID选择器
<!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 yellow solid;
}
#id002{
color:red;
font_size:20px;
border:5px blue dotted;
}
</style>
</head>
<body>
<div id="id001">标签1</div>
<div id="id002">标签2</div>
</body>
</html>
class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<style type="text/css">
.class01{
color: yellow;
font-size: 30px;
border: 1px solid yellow;
}
.class02{
color: grey;
font_size:26px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="class01">div标签class01</div>
<div class="class02">div标签2</div>
<span class="class01">span标签class01</span>
<span>span标签2</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style type="text/css">
.class01,#id01{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
</style>
</head>
<body>
<div class="class01">div标签class01</div><br>
<span id="id01">span标签</span><br>
<div>div标签</div><br>
<div>div标签id01</div><br>
</body>
</html>
CSS常用样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css常用样式</title>
<style type="text/css">
div{
color: red;
border: 1px yellow solid;
width: 300px;
height: 300px;
background: antiquewhite;
font-size: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
a{
text-decoration: blue;
}
table{
border: 1px hotpink solid;
border-collapse: collapse;
}
td{
border: 1px hotpink solid;
}
ul{
list-style:none;
}
</style>
</head>
<body>
<ul>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
</ul>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<a href="http://www.baidu.com">百度</a>
<div>我是div标签</div><br>
</body>
</html>