CSS选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1.交集选择器 */
div.box{
color: red;
}
/* 2.并集选择器 */
div,p,span{
color: red;
}
/* 3.后代选择器 */
.box .box1{
color: red;
}
/* 4.子代选择器 */
.box>.box1{
color: red;
}
</style>
</head>
<body>
<!-- 基本选择器 1.标签选择器 2.类名选择器 3.ID选择器 4.通配符选择器 -->
<!-- 复合选择器 1.交集选择器 2.并集选择器 3.后代选择器 4.子代选择器 -->
<div>第一个div</div>
<div class="box">第二个div
<div class="box1">第二个div的孩子1</div>
<div>第二个div的孩子2
<div class="box1">div的孩子3</div>
</div>
</div>
<p class="box">这是一个p标签</p>
<span>这是一个span</span>
</body>
</html>
CSS标签的显示模式有三种:块元素、行内元素、行内块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
}
p{
width: 300px;
height: 100px;
}
span{
width: 200px;
height: 200px;
}
b{
width: 200px;
height:200px;
}
img{
width: 200px;
height: 200px;
}
input{
width: 100px;
height: 50px;
}
textarea{
width: 100px;
height: 100px;
}
hr{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- 1.块级元素 特点:独占一行,可以设置宽和高 -->
<div>第一个div</div>
<div>第二个div</div>
<p>第一个p标签</p>
<p>第二个p标签</p>
<!-- 2.行内元素 特点:不独占一行,不可以设置宽和高 -->
<span>第一个span</span>
<span>第二个span</span>
<b>字体加粗</b>
<b>字体加粗</b>
<!-- 3.行内块元素 特点:不独占一行,可以设置宽和高 -->
<img src="./ey.jpg" alt="">
<img src="./ey.jpg" alt="">
<input type="text">
<input type="text">
<ul>
<li>1</li>
</ul>
<ul>
<li>2</li>
</ul>
<select name="" id=""></select>
<select name="" id=""></select>
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10"></textarea>
<hr>
<hr>
<p>123
<p>456</p>
</p>
<div>123
<div>456</div>
</div>
<!-- 块级元素 h1-h6 p div ul ol dl li dt dd caption table form hr -->
<!-- 块级元素内可以嵌套任何元素(注意:p标签特殊) -->
<!-- 行内元素 span b i u s strong em del ins a -->
<!-- 行内元素内只能嵌套行内元素(注意:a标签特殊) -->
<!-- 行内块元素 img input select textarea -->
</body>
</html>
标签显示模式的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
/* 转换为行内元素 */
/* display: inline; */
/* 转换为行内块 */
display: inline-block;
background-color: #f00;
}
span{
/* 装换为块级元素 */
/* display: block; */
/* 转换为行内块 */
display: inline-block;
width: 200px;
height: 200px;
background-color: #f00;
}
</style>
</head>
<body>
<div>第一个div</div>
<div>第二个div</div>
<span>第一个span</span>
<span>第二个span</span>
</body>
</html>
CSS三大特性
1.层叠性:当同个元素被两个选择器选中时,CSS会根据选择器的权重决定使用哪一个选择器,权重低的会被权重高的覆盖
2.继承性:指被包在内部的标签将拥有外部标签的样式性,即子元素可以继承父元素的属性(会继承 字体样式和排版样式)
3.优先级:指在浏览器中被解析的先后顺序(!important > 行内样式表 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承的样式 > 浏览器默认样式 )
CSS背景的使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
/* 背景颜色 */
/* 默认值 transparent 透明 */
/* background-color: transparent; */
/* background-color: red; */
/* background-color: #ff0; */
/* background-color: rgb(255,0,255); */
background-color: rgba(0, 0, 0, 0.2);
/* 背景图片 */
background-image: url("./tx.jpg");
/* 背景平铺 */
/* 默认 repeat 水平 repeat-x 垂直 repeat-y 不平铺 no-repeat */
background-repeat: no-repeat;
/* 背景定位 长度/百分比/方位词 */
background-position: 20px 40px;
/* 背景附着 */
background-attachment: fixed;
/* 背景简写 */
/* background: 背景颜色 背景图片 背景平铺 背景附着 背景定位; */
background: #f00 url("./tx.jpg") no-repeat scroll center center;
/* 背景大小 */
/* 数值 百分比 */
/* background-size: 100%; */
/* contain 优先考虑图片是否完整展示, 再考虑盒子是否撑满 */
/* cover 优先撑满盒子, 再完整展示图片 */
background-size: cover;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
精灵图技术
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 26px;
height: 30px;
/* border: 1px solid #000; */
/* 背景图片 */
background-image: url("./index.webp");
/* 北京平铺 */
background-repeat: no-repeat;
/* 背景定位 */
background-position:0 -105px;
}
</style>
</head>
<body>
<div></div>
<!-- 为什么要用精灵图技术? -->
<!-- **为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。** -->
</body>
</html>