块元素和内敛元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<!--
块元素和内联元素
div就是一个块元素：
块元素就是会独占一行的元素，无论他的内容有多少
如：p、h1、h2、、、
div这个标签没有任何语义，就是一个纯粹的块元素，
并且不会因为它里面的元素设置任何的默认样式。
div元素主要用来对页面进行布局的
span是一个内联元素（行内元素）
所谓的行内元素，指的是只占自身大小的元素，不会占用一行
常见的元素：
a、img、iframe、span
span没有任何语义，span标签专门用来选中文字，
然后为文字来设置样式
块元素主要用来做页面布局，内联元素主要用来选中文本设置样式，
一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
a元素可以包含任意元素，除了他本身
p元素不可以包含任何其他的块元素
-->
<div>我是一个div</div>
<div style="background-color:red;">我是一个div</div>
<div style="background-color:yellow;width: 200px;">我是一个div</div>
<p>我是一个p标签</p>
<hr />
<span>我是一个span</span>
</body>
</html>
常用选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title><常用选择器/title>
<style type="text/css">
/*为页面中的所有p元素，设置一个字体颜色为红色*/
/*
*元素选择器
* 作用：通过元素选择器可以选择页面中的所有指定元素
* 语法：
* 标签名{}
*/
p{
color: red;
}
h1{
color: violet;
}
/*
*id选择器
* -通过元素的id属性值选中唯一的一个元素
* -语法：
* #id属性值{}
*/
#p1{
font-size: 20px;
}
/*
*类选择器
* - 通过元素的class属性值选中一组元素
* - 语法：
* - class属性值{}
*/
/*
* 为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景色为黄色
*/
/*
* 选择器分组(并集选择器)
* - 通过选择器分组可以同时选中多个选择器对应的元素
* - 语法： 选择器1，选择器2.选择器N{}
*/
/*
* 通配选择器
* - 他可以用来选择页面中所有的元素
* 语法：*{}
*/
/*
* 复用选择器
* - 作用：
* - 可以选中同时满足多个选择器的元素
* - 语法：
* - 选择器1选择器2选择器N{}
*/
*{
color:red;
}
#p1，p2，h1{
background-color: yellow;
}
</style>
</head>
<body>
<h1>消愁</h1>
<p id="p1">一杯敬自由</p>
<!--
我们可以为元素设置class属性：
class属性和id属性类似，只不过class属性可以重复
拥有相同class属性值的元素，我们称为一组元素
可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
-->
<p class="p2">一杯敬自由</p>
<p class="p2">一杯敬自由</p>
<p class="p2">一杯敬自由</p>
</body>
</html>
