CSS的盒子模型
边框
看上一篇的CSS样式中的边框属性:
边框属性
内边距
- padding:规定内容体与边框的距离,使得内容体同时与上、下、左都保持相同的边距。
-
- padding-top:内上边距
-
- padding-left: 内左边距
-
- padding-right:内右边距
-
- padding-bottom:内下边距
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border:1px solid red;
/*padding-top:10px ;
padding-left: 10px;*/
padding: 10px;
}
</style>
</head>
<body>
<div>内容体</div>
</body>
</html>
结果展示:
外边距
- margin:规定内容体与边框的整个整体与其他元素之间的距离,使得内容体与边框的一个整体同时与上、下、左都保持相同的边距。
-
- margin-top:内上边距
-
- margin-left: 内左边距
-
- margin-right:内右边距
-
- margin-bottom:内下边距
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 1px solid red;
/*margin-top: 20px;
margin-left: 20px;*/
margin: 50px;
}
</style>
</head>
<body>
<span>内容体</span>
<div>内容体</div>
</body>
</html>
结果展示:
CSS和HTML的结合方式
内部样式
内部样式:是通过标签的style来设置元素的样式
- 格式:<html标签 style=“CSS样式代码”>
- 实例:
<a style="font-size: 120px;color:red ;">我爱你</a>
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
font-size: 60px;
color: red;
}
</style>
</head>
<body>
<a style="font-size: 120px;color:red ;">我爱你</a>
<a>我爱你</a>
<a>我爱你</a>
<a>我爱你</a>
<a>我爱你</a>
</body>
</html>
结果展示:
外部样式
-
< link / >标签方式:
< link />又称链入式,是将所有的样式放在一个或者多个以css为扩展名的外部样式表文件中,通过< link >标签将样式连接到HTML文档中。 -
格式:
< link rel=“stylesheet” type=“text/css” href="css文件路径“/ > -
- rel=“stylesheet”,固定值,表示样式表
-
- type=“text/css”,固定值,表示css类型
-
- href,表示css文件位置
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="demo1.css">
</head>
<body>
<a>我爱你</a>
<a>我爱你</a>
<a>我爱你</a>
<a>我爱你</a>
</body>
</html>
demo1.css:
a{
font-size: 60px;
color: red;
}
结果展示: