css样式从入门到踹门而入

128 阅读1分钟

写在哪里?

header内部定义css样式,写在<style></style>

常见的选择器类型?分清楚。

普通选择器,比如 h1、h2、h3、h4、h5、h6、p、a、body

id选择器:#id值,精确给一个美化为一个样式

class选择器:.class值,所有包含class的一类美化为同一个样式

class选择器:p.class值,所有包含class的一类美化为同一个样式

class选择器:h1.class值,所有包含class的一类美化为同一个样式

盒子模型

外边距

3901c55ea2cd6ddb24f75fff1aa43cc.png

CSS样式
<head>
<meta charset="utf-8"> 
<title>外边距</title> 
<style>
p
{
	background-color:yellow;
}
p.margin
{
	margin-top:100px;
	margin-bottom:100px;
	margin-right:50px;
	margin-left:50px;
}
</style>
</head>
实现效果

56142e6f3209e188e6fb6b7053a9d50.png

分析过程

56a2b78bf057758211d3b98f9b00fd9.png

内边距

73e463d9760b87b5b5932c86ee536cc.png

CSS样式
<head>
<meta charset="utf-8"> 
<title>内边距</title>
<style>
p
{
	background-color:yellow;
}
p.padding
{
	padding-top:25px;
	padding-bottom:25px;
	padding-right:50px;
	padding-left:50px;
}
</style>
</head>
实现效果

3b259afb75d3e03eb611dd97fdc390e.png

分析过程

e7ce9dae6a45a32aa3c7d0b42733b13.png