div标签 默认独占一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<div>这是div标签1</div>
<div>这是div标签2</div>
</body>
span标签他的长度是封装数据的长度
p段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不在空）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<div>这是div标签1</div>
<div>这是div标签2</div>
<sapn>这是span标签1</sapn>
<span>这是span标签2</span>
</body>
HTML&CSS的结合方式
方法一
在标签的style属性上设置"key:value value",修改标签样式
样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
</head>
<body>
<div style="border:1px solid red">这是div标签1</div>
<span style="border:1px solid blue">这是span标签1</span>
</body>
第一种方式的缺点：
1，样式多了。样式多了。代码量非常庞大。
2，可读性非常差
3，CSS代码复用性较低
方法二
在head标签中，使用style标签来定义各种自己需要的CSS样式。
样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
<style>
div{
border:1px solid red;
}
span{
border:1px solid blue;
}
</style>
</head>
<body>
<div>这是div标签1</div>
<span>这是span标签1</span>
</body>
现在就是在此文件下的所有div标签和span标签都可以这个样式，不需要重复写很多代码，但是他也存在缺点，在一般的项目中不可能只有一个页面，并且有时候每个页面都需要用相同的标签样式，这样也就造成代码量过大，不容易复用的情况，因此有下面的第三种方法
方法三
把CSS样式写成一个单独的css文件，在通过link标签引入即可复用。
样例：
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML &&CSS</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div>这是div标签1</div>
<span>这是span标签1</span>
</body>
CSS代码
div{
border:1px solid red;
}
span{
border:1px solid blue;
}
选择器
css语法规则：
选择器{
属性1：值1；
属性2：值2；
.....
属性n:值n;
}
1，标签名选择器
和上面方法三里面的样式一样，用标签名做他的选择器名字，就代表他直接将相对应标签名的选择器设置成相应的样式
标签名{
属性:值;
}
标签名选择器，可以决定哪些标签被动的使用这个样式
2，id选择器
id选择器，可以通过id属性选择性的去使用这个样式
#id属性值{
属性：值；
}
样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML&&CSS</title>
<style type="text/css">
#id001{
border:3px solid red;
color:green;
}
#id002{
border:2px dashed blue;
}
</style>
</head>
<body>
<div id="id001">这是div标签1</div>
<span id="id002">这是span标签1</span>
</body>
</html>
3，class类型选择器
class选择器的格式：
·class属性值{
属性:值;
}
样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML&&CSS</title>
<style type="text/css">
.class01{
color:blue;
font-size: 30px;
border:1px solid red;
}
.class02{
color: grey;
font-size: 23px;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="class01">这是div标签1</div>
<div class="class01">这是div标签2</div>
<span class="class02">这是span标签1</span>
</body>
</html>
4，组合选择器
组合选择器可以让多个选择器共用一个CSS样式
选择器1，选择器2，选择器n{
属性:值;
}
样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML&&CSS</title>
<style type="text/css">
.class01,#id01{
color: blue;
font-size:25px;
border:2px red solid;
}
</style>
</head>
<body>
<div class="class01">这是div标签1</div>
<div class="class01">这是div标签2</div>
<span id="id01">这是span标签1</span>
</body>
</html>
