DIV
Div是一个html的标签,单独使用没有意义,必须结合CSS使用;
是一个块级元素,单独占一行;
它主要用于页面的布局;
Span
Div是一个html的标签,单独使用没有意义,必须结合CSS使用;
是一个内联元素,显示一行;
它主要用于对括起来的内容进行样式的修饰;
CSS
层叠样式表:同一元素,同一属性,设置不同值;
解决内容与表现分离的问题(html只能将元素展现出来,内容样式无法展示出来),对内容进行修饰;
语法和规范
1. 设置样式
<style></style>
*第一种写法:写在<head></head>
内部
*第二种写法:外部引入
<style></style>
内部:
(选择器:用于快速查找需要设置样式的元素)
选择器{
属性名1:属性值1;
属性名2:属性值2(;)
}
*最后一个分号可省略
2. 基本选择器
A. 元素选择器:对整体设置样式(div)
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<!--对整体设置样式-->
<style type="text/css">
div{
font-size:50px;
color:pink;
}
</style>
</head>
<body>
<div>
哈哈哈哈哈11
</div>
<div>
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<div>
哈哈哈哈哈44
</div>
<div>
哈哈哈哈哈55
</div>
</body>
</html>
结果:
B. 类选择器:部分设置样式(. class名字)
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<!--部分设置样式-->
<style>
.div2{
font-size: 30px;
color:gold
}
</style>
</head>
<body>
<div>
哈哈哈哈哈11
</div>
<div class="div2">
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<div class="div2">
哈哈哈哈哈44
</div>
<div>
哈哈哈哈哈55
</div>
</body>
</html>
结果:
C. id选择器:单个设置样式(# id名)
*注意:虽然44可以实现样式,但不是id选择器的目的,此处是有问题的。使用时只设置一个。
例子:
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<!--单个设置样式-->
<style>
#div5 {
font-size: : 30px;
color: yellow;
}
</style>
</head>
<body>
<div>
哈哈哈哈哈11
</div>
<div class="div2">
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<div class="div2" id="div5">
哈哈哈哈哈44
</div>
<div id="div5">
哈哈哈哈哈55
</div>
</body>
结果:
3.其他选择器
D. 通配选择器:选择页面中所有元素
*{
background-color:yellow;
}
E. 后代元素选择器:(祖先元素 后代元素)
例子:选择在<div>
中的<p>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
div p{
font-size:30px;;
color:green;
}
</style>
</head>
<body>
<div>
哈哈哈哈哈11
</div>
<div>
哈哈哈哈哈22
</div>
<div>
哈哈哈哈哈33
</div>
<div>
<p>
哈哈哈哈哈55
</p>
</div>
<div>
哈哈哈哈哈55
</div>
</body>
结果: