css第三天-CSDN博客

本文链接：https://blog.csdn.net/gcyqweasd/article/details/113172284

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css文本样式</title>
		<style>
			#p1 {
				/*font-family: "agency fb";/* /*设置字体类型*/
				/*font-size: 20px;/*  /*设置字体大小*/
				/*font-style: italic;/*  /*字体风格*/
				/*font-weight: bold;/*  /*字体加粗*/
				
				font:italic bold 20px "blackadder itc";/*设置复合样式*/
			    /*字体属性的顺序：字体风格→字体粗细→字体大小→字体类型*/
			    height: 80px;
			}
			
			#p2{
				color: #0000FF;/*设置文本颜色*/
				/*text-align: center;*/  /*设置文本内容水平居中*/
			    text-indent: 20px;  /*首行缩进*/
			    line-height: 50px;/*设置行高,距离拉开了内容垂直居中*/
			    height: 50px;/*距离拉开了但内容顶在上方*/
			    text-decoration: underline;/*设置下划线*/
			}
			
			#a1{
				color: #0000FF;/*设置文本颜色*/
				text-align: center;/*设置文本内容水平居中*/
				text-decoration: none;/*取消下划线*/
			}
			
			#img1{
				width: 70px;
				height: 70px;
				vertical-align: middle;/*设置后边文本与图片垂直居中对齐*/
			}
			
			#a2:hover{/*伪类*/
				color: #0000FF;/*鼠标悬停在超链接上时超链接颜色发生变化*/
				text-decoration: none;/*鼠标悬停链接没有下划线*/
			}
			#a2:visited{
				color: #8A2BE2;/*鼠标访问过超链接后颜色发生变化*/
			}
			
			#p3{
				background-color: #9ACD32;/*设置背景颜色*/
			}
			
			body{
				background-image: url(img/03.jpg);/*设置整个文本背景图*/
			    /*background-size: cover;*/   /*当图片大小不够时设置一张图片平铺整个页面*/
			    background-repeat: no-repeat;   /*当背景图片不够时也不平铺页面*/
			}
			
			ul{
				list-style: none;/*去掉列表前边的小标识*/
			}
		</style>
	</head>

	<body>
		<p id="p1">字体样式</p>
		
		<p id="p2">文本样式</p>
		
		<img id="img1" src="img/02.jpg" /><a id="a1" href="">文本水平居中</a>
		<br />
		
		<a id="a2" href="">伪类</a>
		
		<p id="p3">背景颜色</p>
		
		<ul>
			<li>111111</li>
			<li>222222</li>
			<li>333333</li>
		</ul>
	</body>

</html>