CSS基础

最新推荐文章于 2022-01-19 17:42:11 发布
最新推荐文章于 2022-01-19 17:42:11 发布
阅读量430 收藏 1
点赞数
分类专栏： CSS3 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42204713/article/details/103879668
版权

文章目录

一、CSS样式表

1、内联样式表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS内联样式表</title>
</head>

<body>
	<!--设置了3号标题颜色为红色-->
	<h3 style="color: red">CSS内联样式表</h3>
	<!--设置了线条宽度为3px的蓝色虚线-->
	<hr style="border: 3px dashed blue">
	<!--设置了字体为40像素，背景颜色为黄色-->
	<p style="font-size: 40px; background-color: yellow">这是一段测试文字</p>
</body>
</html>

在这里插入图片描述

2、内部样式表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS内部样式表</title>
<style>
	h3{
		color: purple;
	}
	p{
		background-color: yellow;
		color: blue;
		width: 300px;
		height: 50px;
	}
</style>
</head>

<body>
	<h3>CSS内部样式表</h3>
	<p>内部样式表可以批量改变元素样式</p>
</body>
</html>

在这里插入图片描述

3、外部样式表

p.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS外部样式表</title>
<link rel="stylesheet" href="../css/test.css">
</head>

<body>
	<h3>CSS外部样式表</h3>
	<p>使用了外部样式表规定元素样式</p>
</body>
</html>

test.css

h3{
	color: orange;
}
p{
	background-color: gray;
	color: white;
	width: 300px;
	height: 50px;
}

运行结果
在这里插入图片描述

4、样式表优先级测试

内联样式表优先级最高，内部样式表优先级次高，外部样式表优先级最低。
html代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式表优先级测试</title>
<link rel="stylesheet" href="../css/test.css">
<style>
	p{
		background-color: cyan
	}
</style>
</head>

<body>
	<h3>CSS样式表优先级测试</h3>
	<p>该段落字体颜色来自外部样式表；背景颜色来自内部样式表</p>
	
	<p style="background-color: yellow">该段落字体颜色来自外部样式表，背景颜色来自内联样式表</p>
</body>
</html>

css文件

h3{
	color: orange;
}
p{
	background-color: gray;
	color: white;
	width: 300px;
	height: 50px;
}

运行结果
在这里插入图片描述

二、CSS选择器

1、元素选择器（类型选择器）

例如，匹配所有段落元素

，并将其 背景颜色设置为灰色，字体颜色设置为白色

p{
	background-color: gray;
	color: white;
}

2、ID选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ID选择器的简单应用</title>
<style>
	#test{
		background-color: cyan;
		width: 100px;
		height: 100px;
	}
</style>
</head>

<body>
	<h3>ID选择器的简单应用</h3>
	<hr>
	<p>该段落没有定义id名称</p>
	
	<p id="test">该段落自定义了id名称test</p>
</body>
</html>

在这里插入图片描述

3、类选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器的简单应用</title>
<style>
	.test{
		background-color: green;
		width: 100px;
		height: 100px;
	}
</style>
</head>

<body>
	<h3>ID选择器的简单应用</h3>
	<hr>
	<p>该段落没有定义类名称</p>
	
	<p class="test">该段落自定义了类名称test</p>
</body>
</html>

在这里插入图片描述

4、属性选择器

[属性名称]：单独选择某个属性
[属性名称=属性值]：选择这个属性具体的某个值的元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器的简单应用</title>
<style>
	img[alt="cherry"]{
		border: 20px solid red;
	}
</style>
</head>

<body>
	<h3>属性选择器的简单应用</h3>
	<hr>
<h4>为设置有alt属性的图像元素设置边框效果</h4>
	<img src="../images/cherry_pic.jpg" alt="cherry" width="208" height="236" />
	<img src="../images/cherry_pic.jpg" width="215" height="257" />
</body>
</html>

在这里插入图片描述

5、子元素选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>根据元素的顺序选择</title>
<style>
	li:nth-child(1){
		background-color: pink;
	}
	li:nth-child(2){
		background-color: blue
	}
	li:last-child{
		background-color: green
	}
</style>

</head>

<body>
	<ul>
		<li>新闻1</li>
		<li>新闻2</li>
		<li>新闻3</li>
		<li>新闻4</li>
		<li>新闻5</li>
	</ul>
</body>
</html>

在这里插入图片描述

6、直接子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>直接子元素选择</title>
	<style type="text/css">
		/*这样写，直接和间接子元素都会被选择到
		.parent div{
			width: 100px;
			height: 100px;
			background-color: pink
		}*/
		
		.parent>div{
			width: 100px;
			height: 100px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="parent">父亲
		<div class="child">儿子
			<div class="sunzi">孙子</div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

7、选择某个元素后面的一个元素“+”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择某个元素后面的一个元素</title>
	<style type="text/css">
		.d3+div{
			width: 100px;
			height: 100px;
			background-color: purple
		}
	</style>
</head>
<body>
	<div>第一个</div>
	<div>第二个</div>
	<div class="d3">第三个</div>
	<div>第四个</div>
	<div>第五个</div>
</body>
</html>

在这里插入图片描述

8、选择某个元素后面的多个元素“~”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择某个元素后面的多个元素</title>
	<style type="text/css">
		.d3~div{
			width: 100px;
			height: 100px;
			background-color: purple
		}
	</style>
</head>
<body>
	<div>第一个</div>
	<div>第二个</div>
	<div class="d3">第三个</div>
	<div>第四个</div>
	<div>第五个</div>
</body>
</html>

在这里插入图片描述

三、语法规则

1、注释

/*
多行注释
*/

2、@charset

该语法在外部样式表中使用，用于指定当前样式表使用的字符编码 。`

@charset "utf-8";

3、！important

用于标记CSS样式的优先级

p{
	background-color: red !important;
}
p{
	background-color: blue;
}

四、CSS常用样式

1、CSS背景

（1）背景颜色

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性background-color的应用</title>
<style>
	body{
		background-color: silver;
	}
	h1{
		background-color: red;
	}
	h2{
		background-color: orange;
	}
	h3{
		background-color: yellow;
	}
	p{
		background-color: cyan;
	}
</style>
</head>

<body>
	<h1>CSS属性background-color的应用</h1>
	<h2>CSS属性background-color的应用</h2>
	<h3>CSS属性background-color的应用</h3>
	<p>CSS属性background-color的应用</p>
	
</body>
</html>

在这里插入图片描述

（2）、背景图像background-image

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性background-color的应用</title>
<style>
	body{
		background-image: url(../images/girl.jpg)
	}
	p{
		background-image: url(/images/gd.jpg);
		width: 690px;
		height: 434px;
	}
</style>
</head>

<body>
	<h3>CSS属性background-image的应用</h3>
	<hr>
	<p>这是一个段落</p>
	
</body>
</html>

在这里插入图片描述

(3）、背景图像的平铺方式background-repeat

有四个属性值，repeat-x是横向重复平铺，repeat-y是垂直方向平铺，repeat是水平和垂直方向都平铺，no-repeat是不平铺，只显示原图。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性background-repeat的应用</title>
<style>
	body{
		background-image: url(../images/girl.jpg);
		background-repeat: no-repeat; /*图像不平铺*/
	}
</style>
</head>

<body>
	<h3>CSS属性background-repeat的应用</h3>
</body>
</html>

在这里插入图片描述

（4）、固定、滚动背景图像background-attachment

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性background-attachment的应用</title>
<style>
	body{
		background-image: url(../images/girl.jpg);
		background-repeat: no-repeat; /*图像不平铺*/
		background-attachment: scroll;/*背景图像随页面滚动*/
	}
</style>
</head>

<body>
	<h3>CSS属性background-attachment的应用</h3>
	<hr>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>	
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>
	<p>这个是段落元素，用于测试背景图像是否跟随页面滚动</p>	
</body>
</html>

在这里插入图片描述

（5）、定位背景图像background-position

水平和垂直方向的属性值均可使用关键词、长度值或者百分比的形式表示。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性background-position的应用</title>
<style>
	div{
		width: 660px;
	}
	p{
		width: 200px;
		height: 200px;
		background-color: silver;
		background-image: url(/images/lulu.jpg);
		background-repeat: no-repeat;
		float: left;
		margin: 10px;
		text-align: center;
	}
	#p1_1{
		background-position: left top;/*图像位于左上角*/
	}
	#p1_2{
		background-position: top;
	}
	#p1_3{
		background-position: right top;
	}
	#p2_1{
		background-position: 0% 50%;
	}
	#p2_2{
		background-position: 50% 50%;
	}
	#p2_3{
		background-position: 100% 50%;
	}
	#p3_1{
		background-position: 0px 100px;
	}
	#p3_2{
		background-position: 50px 100px;
	}
	#p3_3{
		background-position: 100px 100px;
	}
</style>
</head>

<body> 
	<h3>CSS属性background-position的应用</h3>
	<hr>
	<div>
		<p id="p1_1">left</p>
		<p id="p1_2">top</p>
		<p id="p1_3">right</p>
		
		<p id="p2_1">0%</p>
		<p id="p2_2">50%</p>
		<P id="p2_3">100%</P>
		
		<p id="p3_1">0px 100px</p>
		<P id="p3_2">50px 100px</P>
		<p id="p3_3 ">100px 100px</p>
	</div>
</body>
</html>

在这里插入图片描述

（6）、背景简写background

可以概括以上5种背景属性。

2、CSS框模型

（1）、内边距

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性padding的应用</title>
<style>
	p{
		width: 200px;
		height: 50px;
		background-color: orange;
	}
	.style01{
		padding: 20px;
	}
	.style02{
		padding: 10px 50px 10px 50px;
	}
	.style03{
		padding-left: 50px;
	}
	
	
</style>
</head>

<body> 
	<h3>CSS属性padding的应用</h3>
	<hr>
	<p>该段落没有使用内边距，默认值为0</p>
	<P class="style01">该段落各边内边距均为20像素</P>
	<p class="style02">该段落的上下边距内边距均为10像素，左右边距的内边距均为50像素。</p>
	<p class="style03">该段落的左边内边距为50像素</p>
</body>
</html>

在这里插入图片描述

（2）、边框border

边框宽度border-width
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性padding的应用</title>
<style>
	p{
		width: 200px;
		height: 50px;
		border-style: solid;
	}
	.thin{
		border-width: thin;
	}
	.medium{
		border-width: medium;
	}
	.thick{
		border-width: thick;
	}
	.one{
		border-width: 1px;
	}
	.ten{
		border-width: 10px;
	}
</style>
</head>

<body> 
	<h3>CSS属性border-width的简单应用</h3>
	<hr>
	<p class="one">边框宽度为1像素</p>
	<p class="thin">边框宽度为thin</p>
	<p class="medium">边框宽度为medium</p>
	<p class="thick">边框宽度为thick</p>
	<p class="ten">边框宽度为10像素</p>
</body>
</html>

在这里插入图片描述

边框样式border-style
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性border-style的应用</title>
<style>
	p{
		width: 200px;
		height: 30px;
		border-width: 5px;
	}
	.p1{
		border-style: none;
	}
	.p2{
		border-style: dotted;
	}
	.p3{
		border-style: dashed;
	}
	.p4{
		border-style: solid;
	}
	.p5{
		border-style: double;
	}
	.p6{
		border-style: groove;
	}
	.p7{
		border-style: ridge;
	}
	.p8{
		border-style: inset;
	}
	.p9{
		border-style: outset;
	}
</style>
</head>

<body> 
	<h3>CSS属性border-style的简单应用</h3>
	<hr>
	<p class="p1">无边框效果</p>
	<p class="p2">点状边框效果</p>
	<p class="p3">虚线边框效果</p>
	<p class="p4">实线边框效果</p>
	<p class="p5">双线边框效果</p>
	<p class="p6">3D凹槽边框效果</p>
	<p class="p7">3D脊状边框效果</p>
	<p class="p8">3D内嵌边框效果</p>
	<p class="p9">3D外凸边框效果</p>
</body>
</html>

在这里插入图片描述

边框颜色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性border-color的应用</title>
<style>
	p{
		width: 200px;
		height: 30px;
		border-width: 10px;
		border-style: solid;
	}
	.p1{
		border-color: red;
	}
	.p2{
		border-color: rgb(0,255,0)
	}
	.p3{
		border-color: #00F
	}
</style>
</head>

<body> 
	<h3>CSS属性border-color的简单应用</h3>
	<hr>
	<p class="p1">红色边框效果</p>
	<p class="p2">绿色边框效果</p>
	<p class="p3">蓝色边框效果</p>
</body>
</html>

在这里插入图片描述

边框简写border
p{
	border-width:1px;
	boder-style:solid;
	border-color:red;
}
/*可以简写为如下*/
p{
	border:1px solid red;
}

（3）、外边距margin

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性margin的应用</title>
<style>
	.box{
		border: 1px solid;
		width: 300px;
		margin: 10px;
	}
	.yellow{
		background-color: yellow;
	}
	.style1{
		margin: 20px;
	}
	.style2{
		margin: 10px 50px;
	}
	.style3{
		margin-left: 100px;
	}
</style>
</head>

<body> 
	<h3>CSS属性margin的简单应用</h3>
	<hr>
	<div class="box">
		<div class="yellow">
			该段落没有外边距，默认值为0
		</div>
	</div>
	
	<div class="box">
		<div class="style1 yellow">
			该段落各外边距均为20px
		</div>
	</div>
	
	<div class="box">
		<div class="style2 yellow">
			该段落上下外边距均为10像素，左右外边距均为50像素
		</div>
	</div>
	
	<div class="box">
		<div class="style3 yellow">
			该段落做外边距为100像素
		</div>
	</div>
</body>
</html>

在这里插入图片描述

3、CSS文本

（1）、文本缩近text-indent

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性text-indent的简单应用</title>
<style>
	p{
		text-indent: 2em;
		border: 1px solid;
		width: 200px;
		padding: 10px;
	}
</style>
</head>

<body> 
	<h3>CSS属性text-indent的简单应用</h3>
	<hr>
	<p>这是一个用于测试首行缩进效果的段落元素。当前缩进了两个字符的距离</p>
</body>
</html>

在这里插入图片描述

（2）、文本对齐对齐text-align

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性text-align的简单应用</title>
<style>
	div{
		border: 1px solid;
		width: 300px;
		padding: 10px;
	}
	.center{
		text-align: center;
	}
	.right{
		text-align: right;
	}
	.left{
		text-align: left;
	}

</style>
</head>

<body> 
	<h3>CSS属性text-align的简单应用</h3>
	<hr>
	<div>
		<p class="center">文字居中对齐</p>
		<p class="right">文字居右对齐</p>
		<P class="left">文字居左对齐</P>
	</div>
</body>
</html>

在这里插入图片描述

（3）、文本装饰

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性text-decoration的简单应用</title>
<style>
	.underline{
		text-decoration: underline;
	}
	.line-through{
		text-decoration: line-through;
	}
	.overline{
		text-decoration: overline;
	}

</style>
</head>

<body> 
	<h3>CSS属性text-decoration的简单应用</h3>
	<hr>
	<p class="underline">为文字添加下划线</p>
	<p class="line-through">为文字添加删除线</p>
	<p class="overline">为文字添加上划线</p>
</body>
</html>

在这里插入图片描述

（4）、文本转换text-transform

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性text-transform的简单应用</title>
<style>
	.uppercase{
		text-transform: uppercase /*将文本中每个字母都转换成大写*/
			
	}
	.lowercase{
		text-transform: lowercase /*将文本中每个字母都转换成小写*/
	}
	.capitalize{
		text-transform: capitalize /*将文本中的首字母转换成大写*/
	}

</style>
</head>

<body> 
	<h3>CSS属性text-transform的简单应用</h3>
	<hr>
	<p class="uppercase">hello css</p>
	<p class="lowercase">HELLO CSS</p>
	<p class="capitalize">hello css</p>
</body>
</html>

在这里插入图片描述

（5）、字符间距letter-spacing

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性letter-spacing的简单应用</title>
<style>
	.style1{
		letter-spacing: 1em;
	}
	.style2{
		letter-spacing: 2em
	}
	.style3{
		letter-spacing: -5px;
	}
</style>
</head>

<body> 
	<h3>CSS属性letter-spacing的简单应用</h3>
	<hr>
	<p class="style1">文字字间距为1em</p>
	<p class="style2">文字字间距为2em</p>
	<p class="style3">文字字间距为-5px</p>
</body>
</html>

在这里插入图片描述

（6）、行高line-height

两行文字中间的距离

（7）、文字阴影text-shadow

  • text-shadow : 水平偏移距离，垂直的偏移距离 模糊度 阴影的颜色
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字的阴影text-shadow</title>
	<style type="text/css">
		.d1{
			font-size: 30px;
			font-family: "微软雅黑";
			font-weight: 900;
			color:pink;
			text-align: center;
			line-height: 100px;
			text-shadow: 10px 5px 5px black
		}
		.d2{
			font-size: 30px;
			font-family: "微软雅黑";
			font-weight: normal;
			color:white;
			text-align: center;
			line-height: 100px;
			text-shadow: 0px 0px 5px black
		}

		.d3{
			font-size: 30px;
			font-family: "微软雅黑";
			font-weight: normal;
			color:white;
			text-align: center;
			line-height: 100px;
			text-shadow: 0px 0px 20px yellow,0px 0px 10px orange,0px 0px 10px orangered,0px 0px 10px red;
		}
		.d4{
			font-size: 100px;
			font-family: "微软雅黑";
			font-weight: normal;
			color:white;
			text-align: center;
			line-height: 100px;
			text-shadow: 2px 2px 0px yellow,4px 4px 0px orange,6px 6px 0px orangered,8px 8px 0px red;
		}
	</style>
</head>
<body>
	<div class="d1">
		大家好
	</div>

	<div class="d2">
		镂空效果
	</div>

	<div class="d3">
		阴影叠加制造出霓虹灯效果
	</div>

	<div class="d4">
		3D效果
	</div>
</body>
</html>

在这里插入图片描述

4、CSS字体

（1）、字体系列font-family

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性font-family的简单应用</title>
<style>
	.style1{
		font-family: "AR DELANEY"
	}
	.style2{
		font-family: "French Script MT"
	}
	.style3{
		font-family: "微软雅黑 Light"
	}
</style>
</head>

<body> 
	<h3>CSS属性font-family的简单应用</h3>
	<hr>
	<p class="style1">AR DELANEY</p>
	<p class="style2">French Script MT</p>
	<p class="style3">微软雅黑 Light</p>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

（2）、字体风格font-style

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性font-family的简单应用</title>
<style>
	.style1{
		font-style: normal /*正常字体*/
	}
	.style2{
		font-style: italic /*斜体*/
	}
	.style3{
		font-style: oblique /*倾斜体*/
	}
</style>
</head>

<body> 
	<h3>CSS属性font-family的简单应用</h3>
	<hr>
	<p class="style1">正常字体</p>
	<p class="style2">斜体字</p>
	<p class="style3">倾斜体</p>
</body>
</html>

在这里插入图片描述

（3）、字体变化font-variant

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	.style1{
		font-variant: normal
	}
	.style2{
		font-variant: small-caps /*全大写，但是比正常大写字母小一号*/
	}
</style>
</head>

<body> 
	<h3>CSS属性font-variant的简单应用</h3>
	<hr>
	<p class="style1">Normal</p>
	<p class="style2">Small Caps</p>
	<p class="style2">small caps</p>
</body>
</html>

在这里插入图片描述

(4)、字体粗细 font-weight

范围：100~900，默认正常的字体粗细

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	.style1{
		font-weight: normal
	}
	.style2{
		font-weight: bold
	}
	.style3{
		font-weight: bolder
	}
	.style4{
		font-weight: 100
	}
	.style5{
		font-weight: 400
	}
	.style6{
		font-weight: 900
	}
	.style7{
		font-weight: lighter
	}
</style>
</head>

<body> 
	<h3>CSS属性font-weight的简单应用</h3>
	<hr>
	<p class="style1">正常字体</p>
	<p class="style2">加粗字体</p>
	<p class="style3">更粗的字体</p>
	<p class="style4">测试段落（100）</p>
	<p class="style5">测试段落（400）</p>
	<p class="style6">测试段落（900）</p>
	<p class="style7">更细的字体</p>
</body>
</html>

在这里插入图片描述

（5）、字体大小font-size

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	.style1{
		font-size: 16px
	}
	.style2{
		font-size: 1em
	}
	.style3{
		font-size: 32px
	}
	.style4{
		font-size: 2em
	}
</style>
</head>

<body> 
	<h3>CSS属性font-size的简单应用</h3>
	<hr>
	<p class="style1">字体大小为16像素</p>
	<p class="style2">字体大小为1em</p>
	<p class="style3">字体大小为32像素</p>
	<p class="style4">字体大小为2em</p>
</body>
</html>

在这里插入图片描述

（6）、字体简写font

p{
	font-style:italic;
	font-weigt:bold;
	font-size:20px;
}
/*可以简写为如下*/
p{
	font:italic bold 20px;
}

5、CSS超链接

必须遵循两条规则：一是a:hover的声明必须在a:link和a:visited之后，二是a:active必须在a:hover之后

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	a:link,a:visited{ /*未被访问的超链接和已被访问的超链接*/
		display: block;    /*块级元素*/
		text-decoration: none;  /*取消下划线*/
		color: white;      /*字体为白色*/
		font-weight: bold;   /*字体为粗体*/
		font-size: 25px;     /*字体大小为25像素*/
		background-color: #7BF;   /*设置背景颜色*/
		width: 200px;   /*宽度为200像素*/
		height: 30px;    /*高度为30像素*/
		text-align: center;   /*文本居中显示*/
		line-height: 30px;  /*行高为30像素*/
	}
	a:hover,a:active{   /*鼠标悬浮在上面的超链接和正在被点击的超链接*/
		background-color: #0074E8;   /*设置背景颜色*/
	}
</style>
</head>

<body> 
	<h3>CSS属性超链接的简单应用</h3>
	<hr>
	<a href="http://www.baidu.com">百度</a>
</body>
</html>

未被访问前的链接
在这里插入图片描述
正在被点击的链接
在这里插入图片描述

6、CSS列表

(1) 列表标签

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	div{
		border: 1px solid;
		width: 235px;
		height: 125px;
		float: left;
		margin: 5px;
	}
	.none{
		list-style-type: none /*无标记符号*/
	}
	.disc{
		list-style-type: disc /*实心圆点*/
	}
	.circle{
		list-style-type: circle /*空心圆*/
	}
	.square{
		list-style-type: square /*实心方块*/
	}
	.decimal{
		list-style-type: decimal /*阿拉伯数字*/
	} 
	.decimal-leading-zero{
		list-style-type: decimal-leading-zero /*0开头的阿拉伯数字*/
	}
	.upper-roman{
		list-style-type: upper-roman /*大写罗马数字*/
	}
	.lower-roman{
		list-style-type: lower-roman /*小写罗马数字*/
	}
	.upper-alpha{
		list-style-type: upper-alpha /*大写英文字母*/
	}
	.lower-alpha{ 
		list-style-type: lower-alpha /*小写英文字母*/
	}
	.upper-latin{
		list-style-type: upper-latin /*大写拉丁字母*/
	}
	.lower-latin{
		list-style-type: lower-latin /*小写拉丁字母*/
	}
	.lower-greek{
		list-style-type: lower-greek /*小写希腊字母*/
	}
	.hebrew{
		list-style-type: hebrew /*传统的希伯来编号方式*/
	}
	.armenian{
		list-style-type: armenian /*传统的亚美尼亚编号方式*/
	}
	.georgian{
		list-style-type: georgian /*传统的乔治亚编号方式*/
	}
	.cjk-ideographic{
		list-style-type: cjk-ideographic /*简单的表意数字*/
	}
	.hiragana{
		list-style-type: hiragana /*日语平假名的编号*/
	}
	.hiragana-iroha{
		list-style-type: hiragana-iroha /*日语片假名的编号 */
	}
	.katakana{
		list-style-type: katakana /*日语平假名-伊吕波型的编号*/
	}
	.katakana-iroha{
		list-style-type: katakana-iroha /*日语片假名-伊吕波型的编号*/
	}
</style>
</head>

<body> 
	<h3>CSS属性list-style-type的简单应用</h3>
	<hr>
	<div>
		<h4>属性值为none</h4>
		<ul class="none">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为disc</h4>
		<ul class="disc">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	
	
	<div>
		<h4>属性值为circle</h4>
		<ul class="circle">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为square</h4>
		<ul class="square">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为decimal</h4>
		<ul class="decimal">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为decimal-leading-zero</h4>
		<ul class="decimal-leading-zero">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为upper-roman</h4>
		<ul class="upper-roman">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为lower-roman</h4>
		<ul class="lower-roman">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为upper-alpha</h4>
		<ul class="upper-alpha">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为lower-alpha</h4>
		<ul class="lower-alpha">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为upper-latin</h4>
		<ul class="upper-latin">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为lower-latin</h4>
		<ul class="lower-latin">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为lower-greek</h4>
		<ul class="lower-greek">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为hebrew</h4>
		<ul class="hebrew">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为armenian</h4>
		<ul class="armenian">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为georgian</h4>
		<ul class="georgian">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为cjk-ideographic</h4>
		<ul class="cjk-ideographic">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为hiragana</h4>
		<ul class="hiragana">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为hiragana-iroha</h4>
		<ul class="hiragana-iroha">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为katakana</h4>
		<ul class="katakana">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
	
	<div>
		<h4>属性值为katakana-iroha</h4>
		<ul class="katakana-iroha">
			<li>跳水</li>
			<li>举重</li>
			<li>击剑</li>
		</ul>
	</div>
</body>
</html>

在这里插入图片描述

（2）、样式图片list-style-image

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	.arrow{
		list-style-image: url(../images/arrow.jpg)
	}
</style>
</head>

<body> 
	<h3>CSS属性list-style-image的简单应用</h3>
	<hr>
	<ul class="arrow">
		<li>选项一</li>
		<li>选项二</li>
		<li>选项三</li>
	</ul>
</body>
</html>

在这里插入图片描述

（3）、样式位置list-style-position

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	ul{
		width: 280px;
		border: 1px solid;
	}
	.outside{
		list-style-position: outside
	}
	.inside{
		list-style-position: inside
	}
</style>
</head>

<body> 
	<h3>CSS属性list-style-position的简单应用</h3>
	<hr>
	<ul class="outside">
		<li>选项一选项一选项一选项一选项一选项一选项一选项一选项一</li>
		<li>选项二</li>
		<li>选项三</li>
	</ul>
	<ul class="inside">
		<li>选项一选项一选项一选项一选项一选项一选项一选项一选项一</li>
		<li>选项二</li>
		<li>选项三</li>
	</ul>
</body>
</html>

在这里插入图片描述

（4）、样式简写list-style

ul{
		list-style-type: circle;
		list-style-position: outside
	}

可写成

ul{
		list-style: circle inside
	}

7、CSS表格

（1）、折叠边框border-collapse

用于设置表格的边框样式为双线还是单线

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	.separate{
		border-collapse: separate
	}
	.collapse{
		border-collapse: collapse
	}
</style>
</head>

<body> 
	<h3>CSS属性border-collapse的简单应用</h3>
	<hr>
	<table border="1" class="separate">
		<caption>双线边框效果</caption>
		<tr>
			<th>年份</th>
			<th>第一季度</th>
			<th>第二季度</th>
			<th>第三季度</th>
		</tr>
		<tr>
			<td>2014</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2015</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2016</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
	</table>
	<br>
	<table border="1" class="collapse">
		<caption>折叠边框效果</caption>
		<tr>
			<th>年份</th>
			<th>第一季度</th>
			<th>第二季度</th>
			<th>第三季度</th>
		</tr>
		<tr>
			<td>2014</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2015</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2016</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

（2）、边框距离border-spacing

用于定义表格双向边框的分割距离

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	.style1{
		border-spacing: 10px; /*垂直和水平方向上的距离*/
	}
	.style2{
		border-spacing: 50px 10px; /*第一个值为水平方向的距离，第二个值为垂直方向上的距离*/
	}
</style>
</head>

<body> 
	<h3>CSS属性border-spacing的简单应用</h3>
	<hr>
	<table border="1" class="style1">
		<caption>单个属性值效果：边框距离为10像素</caption>
		<tr>
			<th>年份</th>
			<th>第一季度</th>
			<th>第二季度</th>
			<th>第三季度</th>
		</tr>
		<tr>
			<td>2014</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2015</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2016</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
	</table>
	<br>
	<table border="1" class="style2">
		<caption>两个属性值效果：水平方向边框距离为50像素，垂直方向边框距离为10像素</caption>
		<tr>
			<th>年份</th>
			<th>第一季度</th>
			<th>第二季度</th>
			<th>第三季度</th>
		</tr>
		<tr>
			<td>2014</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2015</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2016</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

（3）、标题位置caption-side

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	caption{
		caption-side: bottom
	}
</style>
</head>

<body> 
	<h3>CSS属性border-spacing的简单应用</h3>
	<hr>
	<table border="1">
		<caption>我是显示在底端的标题</caption>
		<tr>
			<th>年份</th>
			<th>第一季度</th>
			<th>第二季度</th>
			<th>第三季度</th>
		</tr>
		<tr>
			<td>2014</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2015</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2016</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

（4）、空单元格empty-cells

属性值show表示显示空白单元格，属性值hide表示隐藏空白单元格

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	table{
		empty-cells: hide
	}
</style>
</head>

<body> 
	<h3>CSS属性empty-cells的简单应用</h3>
	<hr>
	<table border="1">
		<caption>隐藏空白单元格</caption>
		<tr>
			<th>年份</th>
			<th>第一季度</th>
			<th>第二季度</th>
			<th>第三季度</th>
		</tr>
		<tr>
			<td>2014</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2015</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2016</td>
			<td>100</td>
			<td>100</td>
			<td></td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

（5）、表格布局table-layout

属性值authomatic表示单元格的宽度由内容显示，fixed表示单元格的宽度有样式决定

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	table{
		width: 100%
	}
	.fixed{
		table-layout: fixed
	}
	.automatic{
		table-layout: auto;
	}
</style>
</head>

<body> 
	<h3>CSS属性empty-cells的简单应用</h3>
	<hr>
	<table border="1" class="fixed">
		<caption>隐藏空白单元格</caption>
		<tr>
			<th>年份</th>
			<th>第一季度</th>
			<th>第二季度</th>
			<th>第三季度</th>
		</tr>
		<tr>
			<td>2014</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2015</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2016</td>
			<td>100</td>
			<td>100</td>
			<td>100000000000</td>
		</tr>
	</table>
	
	<table border="1" class="automatic">
		<caption>隐藏空白单元格</caption>
		<tr>
			<th>年份</th>
			<th>第一季度</th>
			<th>第二季度</th>
			<th>第三季度</th>
		</tr>
		<tr>
			<td>2014</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2015</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>2016</td>
			<td>100</td>
			<td>100</td>
			<td>100000000000</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

五、CSS定位

1、绝对定位absolute

相对于设置了定位的父元素或祖先元素定位的，脱离正常的文档流。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	p{
		position: absolute;
		width: 120px;
		height: 120px;
		top: 100px;
		left: 0px;
		background-color: #C8EDFF;
	}
	div{
		position: absolute;
		width: 300px;
		height: 300px;
		top: 80px;
		left: 180px;
		border: 1px solid;
	}
</style>
</head>

<body> 
	<h3>CSS绝对定位的简单应用</h3>
	<hr>
	<p>该段落是相对于页面定位的，距离页面的顶端100像素，距离左边0像素</p>
	<div>
		我是相对于页面定位的div元素，距离顶端80像素，距离左边180像素
		<p>该段落是相对于父元素div定位的，距离父元素div的顶端100像素，距离div元素的左边0像素</p>
	</div>
</body>
</html>

在这里插入图片描述

2、相对定位relative

相对原来的位置定位的，不会脱离文档流。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	div{
		width: 200px;
		height: 380px;
		border: 1px solid;
		margin-left: 50px
	}
	p{
		width: 150px;
		height: 100px;
		background-color: #C8EDFF;
	}
	.left{
		position: relative;
		left: -50px;
	}
	.right{
		position: relative;
		left: 130px;
	}
</style>
</head>

<body> 
	<h3>CSS相对定位的简单应用</h3>
	<hr>
	<div>
		<p>正常状态的段落</p>
	    <p class="left">相对于自己正常的位置向左偏移了50像素</p>
		<p class="right">相对于自己正常的位置向右偏移130像素</p>
	</div>
</body>
</html>

在这里插入图片描述

3、固定定位——fixed

根据浏览器的位置定位，会脱离正常的文档流。Position:fixed必须配合left,right,top,bottom，才能具体定位浏览器的具体位置上。

4、静态定位static

默认情况下不做定位

5、粘性定位sticky

6、层叠效果——z-index

使用属性z-index可以为元素规定层次顺序，其属性值为整型，并且该数越大将叠放在越靠上的位置。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	div{
		width: 182px;
		height: 253px;
		position: absolute;
	}
	#id1{
		background:url(../images/edit_bg.png) no-repeat;
		z-index: 1;
		left: 20px;
		top: 100px;
	}
	#id2{
		background: url(../images/lu.jpg) no-repeat;
		z-index: 2;
		left: 100px;
		top: 100px;
	}
	#id3{
		background: url(../images/lufei.jpg) no-repeat;
		z-index: 3;
		left: 180px;
		top: 100px;
	}
</style>
</head>

<body> 
	<h3>CSS层叠效果的简单应用</h3>
	<hr>
		<div id="id1"></div>
		<div id="id2"></div>
		<div id="id3"></div>
</body>
</html>

在这里插入图片描述

7、浮动

（1）、浮动效果float

  • 浮动可以解决文字包围图片问题。
  • 浮动可以解决莫名其妙的间隔问题。
  • 浮动可以向左、向右进行排版对齐。
    浮动： 可以设置元素脱离正常的文档流，向左或者向右，靠近父元素的边缘或者是设置了浮动的其他元素的边缘靠拢。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS属性的简单应用</title>
<style>
	div{
		float: left;
		width: 300px;
	}
	p{
		line-height: 30px;
		text-indent: 2em;
	}
	
</style>
</head>

<body> 
	<h3>CSS浮动效果的简单应用</h3>
	<hr>
	<div>
		<img src="../images/lufei.jpg" alt="海贼王" />
	</div>
	<p>
	   	三国时期魏延这个人物可以说自带很多话题的，演义中他天生反骨，最后还被诸葛亮死后用计诛杀，历史记载中他成为第一位镇守汉中的将领，诸葛亮葛亮北伐时，他屡次建议走子午道，奇袭长安，被后世认为是怀才不遇，最终在政治斗争中被杨仪击败被灭族，相比之下，魏延曾经打过一次胜仗，也值得被称赞的，却是大家很少提及的，也就是阳谿之战，魏延吴懿大破费瑶郭淮。看过《三国演义》，应该都会对诸葛亮在东吴舌战群儒的情节有很深的印象吧，诸葛亮凭借伶牙俐齿，将东吴大臣们都怼了回去，最终说动了孙权与刘备联合对抗曹操，这才有了后来的赤壁之战。不过，这段故事也仅仅只是一个故事，它在真实的历史上是并不存在的。那么，正史上，这段情节究竟是怎么一回事呢?三国时期魏延这个人物可以说自带很多话题的，演义中他天生反骨，最后还被诸葛亮死后用计诛杀，历史记载中他成为第一位镇守汉中的将领，诸葛亮葛亮北伐时，他屡次建议走子午道，奇袭长安，被后世认为是怀才不遇，最终在政治斗争中被杨仪击败被灭族，相比之下，魏延曾经打过一次胜仗，也值得被称赞的，却是大家很少提及的，也就是阳谿之战，魏延吴懿大破费瑶郭淮。看过《三国演义》，应该都会对诸葛亮在东吴舌战群儒的情节有很深的印象吧，诸葛亮凭借伶牙俐齿，将东吴大臣们都怼了回去，最终说动了孙权与刘备联合对抗曹操，这才有了后来的赤壁之战。不过，这段故事也仅仅只是一个故事，它在真实的历史上是并不存在的。那么，正史上，这段情节究竟是怎么一回事呢?
1.《三国演义》舌战群儒

《三国演义》里有意拔高了诸葛亮的智慧，不仅将许多发生在其他人身上的故事嫁接到诸葛亮身上，还为诸葛亮生造了不少神机妙算的故事，以至于鲁迅先生在评价《三国演义》对诸葛亮的描写时说，这部书“状诸葛之多智而近妖”。

实际上，诸葛亮为刘备制定了隆中对方略，并成功执行后，他一直出任蜀汉的丞相，相当于蜀汉的总理，他的大半生长期从事行政工作，是一位不可多得的行政专才。但是，正是由于《三国演义》，我们误以为诸葛亮是个智谋百出的人，是一个成天耍小聪明，把人耍得团团转的人，是一个上知天文下知地理的全才。


对于诸葛亮的聪明，最具有戏剧性的一幕就是舌战群儒。《三国演义》第四十三回非常成功的描绘了这一场景，让读者对诸葛亮的智谋与辩才佩服得五体投地。
		三国时期魏延这个人物可以说自带很多话题的，演义中他天生反骨，最后还被诸葛亮死后用计诛杀，历史记载中他成为第一位镇守汉中的将领，诸葛亮葛亮北伐时，他屡次建议走子午道，奇袭长安，被后世认为是怀才不遇，最终在政治斗争中被杨仪击败被灭族，相比之下，魏延曾经打过一次胜仗，也值得被称赞的，却是大家很少提及的，也就是阳谿之战，魏延吴懿大破费瑶郭淮。看过《三国演义》，应该都会对诸葛亮在东吴舌战群儒的情节有很深的印象吧，诸葛亮凭借伶牙俐齿，将东吴大臣们都怼了回去，最终说动了孙权与刘备联合对抗曹操，这才有了后来的赤壁之战。不过，这段故事也仅仅只是一个故事，它在真实的历史上是并不存在的。那么，正史上，这段情节究竟是怎么一回事呢?
	</p>
</body>
</html>

在这里插入图片描述

（2）、清理浮动clear

它可以规定元素的哪一侧不允许出现浮动。

（3）、浮动高度塌陷问题

解决方案：

  • 设置父级元素的高度
  • 创建个div ,清除浮动
  • 伪元素清除浮动（最佳解决方案）
.clear:after{
	content:";
	display:block;
	clear:both;
}

六、伪元素

  • ：before,在元素内部创建1个最前面假的子元素
  • ：after，在元素内部的最后面创建1个假的子元素
    注意： 创建伪元素的时候，content属性必须要写！伪元素默认是行元素
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪元素</title>
	<style type="text/css">
		.chat{
			width: 500px;
			line-height: 100px;
			padding: 30px;
			font-size: 30px;
			background: lawngreen;
			margin: 0 auto;
			border-radius: 30px;
			position: relative;
		}

		.chat:before{
			content: "";
			display: inline-block;
			width: 0px;
			height: 0px;
			border-top: 20px solid transparent;
			border-bottom: 20px solid transparent;
			border-left: 40px solid transparent;
			border-right:  40px solid lawngreen;
			position: absolute;
			left: -80px;
			top:43px;
		}
		.chat:after{
			content: "";
		}
	</style>
</head>
<body>
	<div class="chat">今晚吃啥？</div>
	
</body>
</html>

在这里插入图片描述

七、过渡动画transition

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过渡动画</title>
	<style type="text/css">
		.d1{
			width: 100px;
			height: 100px;
			background: pink;
			/*综合过渡效果，transition:property(过渡属性)  duration（过渡时长） timing-function(过渡动画变化的速度)*/
			/*transition-timing-function:
				ease:(默认值)，从慢到快再慢
				linear:设置线性速度
				ease-in:从慢到快
				ease-out:从快到慢
				可以通过浏览器进行调节获取贝塞尔曲线cubic-bezier(0,0.95,1,0.07)
				*/
			transition: all 3s ease-in;

			/*设置延迟时间*/
			/*transition-delay:3s;*/
		}
		.d1:hover{
			width: 400px;
			height: 400px;
			background: green;
		}
	</style>
</head>
<body>
	<div class="d1">
	</div>
</body>
</html>

八、转换transform

1、2D转换

2D移动translate(x,y)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>转换</title>
	<style type="text/css">
		#d1{
			width: 100px;
			height: 100px;
			background: pink;
			transition: all 3s;
		}

		#d1:hover{
			width: 100px;
			height: 100px;
			background: pink;
			/*移动：
			translate(x,y);x代表水平移动距离，y代表垂直移动距离
			translateX(300px)水平移动
			translateY(400px)垂直移动
			*/
			transform: translate(300px,400px);
		}
	</style>
</head>
<body>
	<div id="d1">
	</div>
</body>
</html>

2D旋转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>转换</title>
	<style type="text/css">
		#d1{
			width: 100px;
			height: 100px;
			background: pink;
			margin: 100px;
			transition: all 3s;
		}

		#d1:hover{
			width: 100px;
			height: 100px;
			background: pink;
			/*旋转*/
			transform: rotate(30deg);
		}
	</style>
</head>
<body>
	<div id="d1">
	</div>
</body>
</html>

2、 3D转换

3D移动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>转换</title>
	<style type="text/css">
		#d1{
			width: 100px;
			height: 100px;
			background: pink;
			margin: 100px;
			transition: all 3s;
		}

		#d1:hover{
			width: 100px;
			height: 100px;
			background: pink;
			/*移动*/
			/*tanslateX(长度)；绕X轴移动*/
			/*transform: tanslateX(200px);*/

			/*tanslateY(长度)；绕Y轴移动*/
			transform: translateY(200px);

			/*tanslateZ(长度)；绕Z轴移动*/
			/*transform: tanslateZ(200px);*/
		}
		body{
			/*设置透视点*/
			perspective: 500px
		}
	</style>
</head>
<body>
	<div id="d1">
	</div>
</body>
</html>

3D旋转

<!DOCTYPE html`在这里插入代码片`>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>转换</title>
	<style type="text/css">
		#d1{
			width: 100px;
			height: 100px;
			background: pink;
			margin: 100px;
			transition: all 3s;
		}

		#d1:hover{
			width: 100px;
			height: 100px;
			background: pink;
			/*旋转*/
			/*rotateX(度数)；绕X轴旋转*/
			/*transform: rotateX(45deg);*/

			/*rotateY(度数)；绕Y轴旋转*/
			/*transform: rotateY(45deg);*/

			/*rotateZ(度数)；绕Z轴旋转*/
			transform: rotateZ(45deg);
		}
		body{
			/*设置透视点*/
			perspective: 100px
		}
	</style>
</head>
<body>
	<div id="d1">
	</div>
</body>
</html>

九、动画animation

  • animation：综合性的动画设置属性
  • animation-name：动画名称
  • animation-duration：动画时间周期
  • animation-timing-function：动画的变化速度，默认ease,linear,ease-in,ease-out
  • animation-delay：延迟时间
  • animation-iteration-count:动画循环次数，infinite无限次;
  • animation-direction：运动的方向，nomal默认值，alternate奇数次正常运动，偶数次反方向运动；reverse反方向运动；alternate-reverse
  • animation-fill-mode:fowards;使得动画保留最后一帧效果。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画</title>
	<style type="text/css">
		#d1{
			width: 200px;
			height: 200px;
			background: pink;
			/*动画
			animation：综合性的动画设置属性
			animation-name：动画名称
			animation-duration：动画时间周期
			animation-timing-function：动画的变化速度，默认ease,linear,ease-in,ease-out
			animation-delay：延迟时间
			animation-iteration-count:动画循环次数，infinite无限次;
			animation-direction：运动的方向，nomal默认值，alternate奇数次正常运动，偶数次反方向运动；reverse反方向运动；alternate-reverse
			animation-fill-mode:fowards;使得动画保留最后一帧效果。
			*/
			animation: donghua1 3s;
		}

		@keyframes donghua1{
			/*
			from{}等价于0%{}
			*/
			0%{
				transform: translate(0,0);
			}

			33.3%{
				transform: translate(500px,0);
			}

			100%{
				transform: translate(500px,400px);
			}
		}
	</style>
</head>
<body>
	<div id="d1"></div>
	
</body>
</html>

loading案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Loading效果</title>
	<style type="text/css">
		.loading{
			margin: 0 auto;
			width: 300px;
			height: 300px;
			position: relative;
		}
		.loading .circle{
			width: 300px;
			height: 300px;
			position: absolute;
			left: 0;
			top: 0;
			animation-timing-function: linear;
		}
		.small{
			width: 30px;
			height: 30px;
			background: blue;
			margin: 10px auto;
			border-radius: 50%;	
		}

		@keyframes loading{
			from{
				opacity: 1;
			}
			to{
				opacity: 0.2;
			}
		}

		/*旋转*/
		.loading .circle:nth-child(1){
			transform: rotate(45deg);
			animation: loading 0.9s infinite;
		}
		.loading .circle:nth-child(2){
			transform: rotate(90deg);

			animation: loading 0.9s infinite 0.1s;
		}
		.loading .circle:nth-child(3){
			transform: rotate(135deg);
			animation: loading 0.9s infinite 0.2s;
		}
		.loading .circle:nth-child(4){
			transform: rotate(180deg);
			animation: loading 0.9s infinite 0.3s;
		}
		.loading .circle:nth-child(5){
			transform: rotate(225deg);
			animation: loading 0.9s infinite 0.4s;
		}
		.loading .circle:nth-child(6){
			transform: rotate(270deg);
			animation: loading 0.9s infinite 0.5s;
		}
		.loading .circle:nth-child(7){
			transform: rotate(315deg) ;
			animation: loading 0.9s  infinite 0.6s;
		}
		.loading .circle:nth-child(8){
			transform: rotate(360deg);
			animation: loading 0.9s infinite 0.7s;
		}
	</style>
</head>
<body>
	<div class="loading">
		<div class="circle">
			<div class="small"></div>
		</div>
		<div class="circle">
			<div class="small"></div>
		</div>
		<div class="circle">
			<div class="small"></div>
		</div>
		<div class="circle">
			<div class="small"></div>
		</div>
		<div class="circle">
			<div class="small"></div>
		</div>
		<div class="circle">
			<div class="small"></div>
		</div>
		<div class="circle">
			<div class="small"></div>
		</div>
		<div class="circle">
			<div class="small"></div>
		</div>
	</div>
	
</body>
</html>

在这里插入图片描述

帧动画案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>帧动画之分身术</title>
	<style type="text/css">
		.fs{
			width: 250px;
			height: 200px;
			background-image: url(images/分身术.png);
			background-size: 100% auto;
			animation: fenshen 5s steps(24) infinite;
		}
		@keyframes fenshen{
			from{
				background-position: 0 0;
			}
			to{
				background-position: 0 4608px;
			}
		}
	</style>
</head>
<body>
	<div class="fs"></div>
</body>
</html>

在这里插入图片描述

  • 素材
  • 在这里插入图片描述
Camille-Fan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中颜色、样式规则（字体样式、列表样式、表格样式）
YANGMENGZHENG的博客
10-20 3467
吗
HTML基础学习
godfather914的博客
06-22 898
适合小白的HTML学习
div + css 详解
Java海洋
11-28 9512
第 1 页 《Div+CSS 布局大全》 整理者：Jesse Zhao 网站：http://JesseZhao.cnblogs.com 送给我最爱的女朋友蜜蜜，希望她可以永远快乐幸福！！！ 《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com 第 2
CSS中alt属性和title属性用法
cilwfvip的专栏
08-13 1947
你对CSS中的alt属性和title属性的使用是否熟悉，这里和大家分享一下两者的使用，CSS中alt属性只能用在img、area和input元素中（包括applet元素），对于input元素，alt属性意在用来替换提交按钮的图片。而title属性为设置该属性的元素提供建议性的信息。 CSS中的alt属性和title属性 替换文字（alttext）并不是用来做提示（tooltip），或者
CSS基础知识
07-22
资源名称：CSS基础知识内容简介：0、基础知识1、CSS概述2、CSS基础语法3、CSS选择器4、CSS主要属性5、CSS核心机制-盒子模型6、CSS重点和难点-定位7、综合示例浏览器模式 当浏览器厂商开始创建于标准兼容的浏览器时...
css基础教学1
08-03
CSS基础教学1 CSS是 Cascading Style Sheets 的缩写，译为层叠样式表，是一种用于描述网页样式的语言。CSS主要用于控制网页的布局、颜色、字体、背景等各种样式元素。 在本教程中，我们将学习如何使用CSS对...
css基础教程
01-24
css基础教程，针对css提供基础讲解，让初学者可以很好的学习
css 基础样式 base.css
04-28
css基础样式
css基础.ppt
06-25
css基础教程，适合新手使用，仅供参考
CSS学习笔记---CSS3的新特性
wykkk1的博客
01-19 1079
一、CSS3新增选择器 1.1 属性选择器 类选择器和属性选择器 伪类选择器 权重都是 10 <style> /* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */ /* input[value] { color:pink; } */ /* 只选择 type =text 文本框的input 选取出来 */ input[type=text] { .
CSS学习1（DIV与CSS结合、CSS基础知识）
灰太狼的小秘密
03-19 378
一、用DIV布局 1、DIV简介 DIV是标记对，表示一个层，里面包含HTML代码，也可以被HTML标记包围。 基本语法： <div> <p>添加文字</p> </div> 以上的效果与<body>添加文字</body>的效果一致。 ...
CSS案例复习
qq_48942961的博客
04-26 896
TEXT 文本的对齐方式 文本排列属性是用来设置文本的水平对齐方式。 文本可居中或对齐到左或右,两端对齐. 当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。 实例 h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} 文本修饰 text-decoration 属性用来设置或删除文本的装饰。 从设计的角度看 text-decoration属性主
css给表格特定行加粗和加背景颜色
ojb98K的博客
05-22 651
表格细线的合并在之前的文章有提到用boder-collapse:collapse
使用Js获取元素Style中BACKGROUND-COLOR属性的RGB值和Hex值
lgs7907
10-26 6963
编者：李国帅 qq：9611153 微信lgs9611153 时间：2018/10/26 背景原因: 翻看n年前的颜色拾取器，发现Hex的值没有取对，可能那时候的技术和现在不同了。 这是网上某个程序员写的，现在看来依然可以使用。          里面涉及到如何获取每个元素的RGB和Hex颜色值， &lt;TD style="HEIGHT: 8px; WIDTH: 8px; BACK...
HTML中style/css/color设置颜色值(RGB值)的几种方法（常见颜色和色值）
热门推荐
reading-conference-writing
08-27 2万+
一般成体系的前端开发，会有UED给出具体的值，也会统一一个表达方式。但日常仍然会遇到很多表达方式的不同，转换太麻烦，所以特别记录下不同的表达方式。 颜色是UI中必不可少的组成部分，所以color属性使用很频繁，比如文字(color)、背景色(background-color)、边框色(border-color)等。 这里只记录几种常见的表达方式，所有支持的方式可参考 1： 方式 样例 ...
vue css基础知识
最新发布
09-22
Vue中的CSS基础知识包括以下几点： 1. 类绑定：使用v-bind:class指令，可以根据条件动态地绑定CSS类名。 2. 样式绑定：使用v-bind:style指令，可以绑定一个样式对象，动态地设置元素的样式。 3. 条件渲染：使用v-if、v-else-if、v-else等指令可以根据条件来决定是否渲染某个元素。 4. 列表渲染：使用v-for指令可以循环渲染数组或对象，并可以通过索引来动态设置每个元素的CSS类名。 5. 动态过渡效果：使用transition组件可以给元素添加过渡效果，如淡入淡出、滑动等。 6. CSS预处理器支持：Vue支持使用CSS预处理器如Sass、Less等进行样式的编写。 7. CSS作用域：在Vue组件中，默认情况下，样式只作用于当前组件，在样式中使用scoped属性可以限定样式的作用范围。 8. CSS模块化：通过使用CSS模块化，可以将CSS样式和组件分离，提高样式的可维护性。 9. CSS动画：Vue提供了transition和animation属性，用于在元素渲染和移除时添加动画效果。 10. CSS预加载：Vue CLI可以自动对CSS进行预加载优化，提高页面加载速度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值