这是我参加⌈第四届青训营⌋笔记创作活动的第2天。
前端三件套HTML（内容）,CSS（样式）,JS（行为），在学习HTML后，我们就可以进一步了解CSS了。
一，什么是CSS，有什么作用？
CSS是Cascading Style Sheets（层叠样式表）的首字母简写，主要用来定义页面的样式，比如设置字体和颜色；设置位置和大小，添加动漫效果。可以这么比喻，如果页面是一张画布，那么CSS就是一支画笔，用于修饰和渲染页面。 基本结构:
<style>
h1{
color:red;
font-size:14px;
}
</style>
二,CSS的引用方式
- 外链
<link rel="stylesheet" href="/assets/style.css">
- 嵌入
<style>
li{
margin:0;
list-style:none;
}
p{
margin: lem 0;
}
</style>
- 内联
<p style="margin:lem 0">example content</p>
三，样式
1. 颜色样式,一般有三种：
- RGB：由R（red红），G（green绿），B（blue蓝）这三种颜色合成，数值调节范围是0到255。 采用十六进制描述颜色，如#ffffff
样式使用例如：
rgb(0,0,0)
- HSL：H(Hue色相)，S（Saturation饱和度），L（Linghtness亮度）数值调节范围分别是（0-360)，(0-100%），（0-100%）。 样式使用例如：
hsl(180,50%,50%)
- alpha(透明度):在RGB基础上加了一个透明度。
rgb(0,0,0,0.5)
2.字体font
- font-family字体族：常用的有：
- Serif(衬线体)：Georgia,宋体
- Sans-Serif(无衬线体)：Helvetica,黑体，微软雅黑
- Monsapace（等宽体）：Courier,中文字体。
- Cursive(手写体)：楷体
- font-size字体大小：单位有px,em;和%（相对于父元素大小的百分比）例如：
font-size:18px;
font-size:18em;
font-size:18%;
3.位置
常用：
1,text-align:调节宽度格式
2，word-spacinng:调节字符间距
3，text-decoration:用于文字修饰，常用值：underline,overline
4,line-height:调节行间距
四，布局（Layout）
1. 什么是布局？
就是布置确定内容所需要放的大小和位置。常用的就是“盒子模型”，“盒子模型”一般包括margin（外边距）,border（边框）,padding（内边距）,width（宽）,height（高）
2.常用布局FlewBox布局和Gird布局
-
FlewBox布局：可以控制子集盒子的宽度和高度，，水平和垂直方向对齐，是一种新的排版上下文的二维布局方式。
-
Gird布局：又称为网格布局，可以根据需要将页面分为几个主要的区域，区域的大小，位置，层次均可以自行定义，是一种比较灵活的布局方式。
个人总结：
在此之前，我所学的css较为零零散散，特别是布局这一块的知识点不够扎实，通过本次课程，我对于FlewBox布局和Gird布局有了更加深入的学习，有了更多不同的理解和认识。
