Div是一个html的标签，单独使用没有意义，必须结合CSS使用；
是一个块级元素，单独占一行；
它主要用于页面的布局；
Div是一个html的标签，单独使用没有意义，必须结合CSS使用；
是一个内联元素，显示一行；
它主要用于对括起来的内容进行样式的修饰；
层叠样式表：同一元素，同一属性，设置不同值；
解决内容与表现分离的问题（html只能将元素展现出来，内容样式无法展示出来），对内容进行修饰；
<style></style>*第一种写法：写在<head></head>内部
*第二种写法：外部引入
<style></style> 内部：（选择器：用于快速查找需要设置样式的元素）
选择器{
属性名1:属性值1;
属性名2:属性值2(;)
}
*最后一个分号可省略
例子：
<!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>
结果：
例子：
<!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>
结果：
*注意：虽然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>
结果：
*{
background-color:yellow;
}
例子：选择在<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>
结果：
例子：
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type=‘text‘]{
background-color: red;
}
input[type=‘password‘]{
background-color: blue;
}
</style>
</head>
<body>
用户名：<Input type="text" name="username"/><br />
密码：<input type="password" name="password" />
</body>
结果：
原文：https://www.cnblogs.com/musecho/p/12853682.html