什么是CSS
层叠样式表，定义如何显示HTML元素；简单来说就是，给HTML页面进行美化。
CSS的用途
CSS的使用
- CSS放置在style元素中
<div></div>
<style>
// 设置样式
</style>- CSS放置在需要设置样式的元素上
<div style="样式"></div>- 引入外部的css文件，如style.css
<!-- 引入方式 -->
<link rel="stylesheet" href="style.css">style.css文件内容
// 设置样式如何设置CSS属性
- 针对标签设置CSS属性
如：设置根元素HTML的属性和body的属性，同时设置多个的时候，使用逗号分开。
<style>
html,body{
// 设置CSS属性
}
</style>- 针对设置了class属性的元素，设置CSS属性
<div class="test-div"></div>
<style>
.test-div {
// 设置CSS属性
}
</style>CSS的常用属性
- width宽度
设置元素的宽度，可以使用具体的尺寸和百分比。
例如：
width: 100%; // 宽度铺满
width: 50px; // 宽度50像素- height高度
设置元素的高度，可以使用具体的尺寸和百分比。
例如：
height: 100%; // 高度铺满
height: 50px; // 高度50像素- float浮动
设置元素浮动，可以设置值为：left 浮动向左，right 浮动向右，none默认值元素不浮动，inherit继承元素父级的浮动属性
例如：
float: left;
float: right;
float: none;
float: inherit;使用属性-搭建简单布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body,.layout-wrap{
width: 100%;
margin: 0;
color: white;
}
.layout-wrap {
text-align: center;
}
.layout-wrap .top{
width: 100%;
height: 80px;
background-color: cadetblue;
}
.layout-wrap .left{
width: 70%;
height: 600px;
float: left;
background-color:brown;
}
.layout-wrap .right{
float: left;
height: 600px;
width: 30%;
}
.layout-wrap .right-top{
height: 300px;
background-color: burlywood;
}
.layout-wrap .right-bottom{
height: 300px;
background-color: seagreen;
}
</style>
</head>
<body>
<div class="layout-wrap">
<div class="top">
顶部
</div>
<div class="left">
左侧
</div>
<div class="right">
<div class="right-top">右侧顶部</div>
<div class="right-bottom">右侧底部</div>
</div>
</div>
</body>
</html>代码效果：
（本期完）
小成讲前端---本系列将隔天不定时更新
欢迎点赞，关注我！！