第四次网页前端培训笔记（css常用属性）-CSDN博客

本文链接：https://blog.csdn.net/m0_52665223/article/details/122810773

常用属性

1.背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width:500px;
				height:400px;
				background-color: #6495ED;
				background-image: url(img/af4616c312d.png);
				background-repeat:no-repeat;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			Hello
		</div>
	</body>
</html>

2.文本

2.1字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d2{
				color: #6495ED;
				text-align: left;
				text-decoration: line-through overline underline;
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<div id="d2">
			Hello World
		</div>
	</body>
</html>

2.2对齐方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				text-align: justify;
			}
		</style>
	</head>
	<body>
		<p>
		</p>
	</body>
</html>

3.display属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <style type="text/css">
			h2{
				display: none;
			}
		</style>
	</head>
	<body>
		<h2>hollo world</h2>
	</body>
</html>

4.浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d3{
				width:200px;
				height:200px;
				background-color: #6495ED;
				float: left;
			}
			#d4{
				width:200px;
				height:200px;
				background-color:#00FFFF;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="d3"></div>
		<div id="d4"></div>
	</body>
</html>

5.盒子模型

5.1 边框

5.2 padding 内边距

5.3 margin 外边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#d1{
			width:100px;
			height:100px;
			background-color: aquamarine;
			border:#008000 5px outset;
			padding:10px 20px;
			margin-top: 100px;
			margin-left: 100px;
		}
		</style>
	</head>
	<body>
		<div id="d1"></div>
	</body>
</html>