本文已参与「新人创作礼」活动，一起开启掘金创作之路。
CSS：页面美化和布局控制
如何让一个div上下左右垂直居中：
1、概念：Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
2、好处：
1、功能强大 2、将内容展示和样式控制分离 1）降低耦合度 2）让分工协作更容易 3）提高开发效率
3、CSS的使用：CSS和HTML结合方式
1）内联样式（了解，不推荐使用）
<!--内联样式(了解一下不推荐使用)：
在标签内使用style属性指定CSS代码
-->
<div style="color:red;">hello world</div>
2）内部样式
<!--文档声明为HTML类型-->
<!DOCTYPE html>
<!--声明这个页面是哪门语言的（有点绕，不过不重要），改成ch或者写不写都无所谓-->
<html lang="en">
<head>
<!--meta charset="UTF-8"：指定字符集-->
<meta charset="UTF-8">
<title>CSS</title>
<style>
div {
color: blue;
}
</style>
</head>
<body>
<!--内部样式
在head标签内，定义style标签，style标签的标签体内容就是CSS代码
因为定义了div为蓝色，所以这个页面内的所有内容全是蓝色
-->
<div>hello css</div>
<div>hello css</div>
</body>
</html>
3）外部样式
<!--文档声明为HTML类型-->
<!DOCTYPE html>
<!--声明这个页面是哪门语言的（有点绕，不过不重要），改成ch或者写不写都无所谓-->
<html lang="en">
<head>
<!--meta charset="UTF-8"：指定字符集-->
<meta charset="UTF-8">
<title>CSS</title>
<!--用link标签引入CSS资源文件-->
<link rel="stylesheet" href="css/a.css">
</head>
<body>
<!--外部样式
1、定义CSS资源文件（如这里的css目录下的a.css）
2、在head标签内，定义link标签，引入外部的资源文件
-->
<div>hello css</div>
<div>hello css</div>
</body>
</html>
注意 这三种方式CSS的作用范围越来越大，1方式不常用，常用的后面两种方式
CSS基本语法
格式： 选择器 { 属性名1：属性值1; 属性名2：属性值2; 属性名3：属性值3; .... } 选择器：筛选具有相似特征的元素 注意：每一对属性需要使用“;”隔开，最后一对属性可以不加“;”
选择器
1、基础选择器
<!--文档声明为HTML类型-->
<!DOCTYPE html>
<!--声明这个页面是哪门语言的（有点绕，不过不重要），改成ch或者写不写都无所谓-->
<html lang="en">
<head>
<!--meta charset="UTF-8"：指定字符集-->
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
#div1{
color:red;
}
div{
color:green;
}
.heihei{
color: bisque;
}
</style>
</head>
<body>
<!--基础选择器
1、id选择器：选择器具体的id属性值的元素.建议在一个html页面中id值唯一
语法：#id属性值{}
2、元素选择器：选择具有相同标签名称的元素
语法：标签名称{}
注意：id选择器优先级高于元素选择器、
3、类选择器: 选择具有相同的class属性值的元素
语法：.class属性值{}
注意：类选择器优先级高于元素选择器
-->
<div id="div1">
我是个人才
</div>
<div class="heihei"> asd</div>
</body>
</html>
2、伪类选择器
属性
<!--文档声明为HTML类型-->
<!DOCTYPE html>
<!--声明这个页面是哪门语言的（有点绕，不过不重要），改成ch或者写不写都无所谓-->
<html lang="en">
<head>
<!--meta charset="UTF-8"：指定字符集-->
<meta charset="UTF-8">
<title>字体属性</title>
<style>
p{
color: red;
font-size: 30px;
text-align: center;
line-height: 100px;
/*
border：边框
例：border：1px solid red;
边框 ： 1像素粗细 实线 红色
*/
border: 1px solid red;
}
div{
border: 1px solid red;
height: 200px;
width: 200px;
/*设置背景图片，url中放入背景图的路径即可
no-repeat不重复，center居中*/
background: url("") no-repeat center;
}
.div1{
width: 100px;
height: 100px;
/*外边距*/
/*margin: 50px;*/
}
.div2 {
width: 200px;
height: 200px;
/*内边距
默认情况下，内边距会影响整个盒子的大小*/
padding: 50px;
/*所以为了解决上面的问题，我们使用box-sizing:border-box;
也就是设置盒子的属性，让width和height就是最终盒子的大小*/
box-sizing:border-box;
}
/*默认情况下，三个div肯定是一人占一行
而现在我们要让他们浮动起来变到一行，就需要float属性*/
.div3{
float: left;
}
.div4{
float: left;
}
.div5{
float: left;
}
</style>
</head>
<body>
<p>哈哈</p>
<div></div>
<div class="div2">
<div class="div1">
</div>
</div>
<div class="div3">aaaa</div>
<div class="div4">bbbb</div>
<div class="div5">cccc</div>
</body>
</html>
