块元素和内敛元素
<!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>