一.认识CSS
😳CSS表示层叠样式表，是为网页添加样式的代码，CSS不是一个真正的编程语言，甚至不是一门标记语言，而是一门样式表语言，总之不属于一门编程语言，但是是一门计算机语言。
😭早期的网页都是通过HTML来编写的，但是我们希望HTML变得更加丰富，这个时候就增加了很多具备特殊样式的元素，比如i strong del等等，后来不同的浏览器也有各自的样式语言，但是没有统一的规划，1994年，哈肯-维姆-莱和波特-波斯合作设计CSS，在1996年的时候发布了CSS1，知道1997年初，W3C组织才专门成立了CSS的工作组，1998年5月发布了CSS2，在2006年~2009年非常流行DIV+CSS布局的方式来代替所有的html标签，从CSS3开始，所有的CSS分成了不同的模块，每个模块中都有于CSS2中额外增加的功能，以及向后兼容，直到2011年6月7日，CSS3 Color Module终于发布了W3C Recommendation，CSS的发展历史如下。
🐻总结：CSS的出现是为了美化HTML的，并且让结构与样式分离。
- 美化方式一：为HTML添加各种各样的样式，比如颜色，字体，大小，下划线等等。
- 美化方式二：对HTML进行布局，按照某种结构显示(CSS进行布局-浮动，flex，grid)
二.如何编写CSS
🤡CSS的编写主要分为两个部分，一部分是CSS的属性名，另外一部分是CSS的属性值。
- CSS属性名：要添加CSS的规则的名称。
- CSS属性值：要添加CSS规则的值。
🦊如何将CSS应用到元素上面哪？CSS提供了三种方式，每种方式都非常重要。
- 内联样式(inline style)
- 内部样式表(internal style sheet)，文档样式表(document style sheet)，内嵌样式表。
- 外部样式表(external style sheet)
三.内联样式
🥴内联样式（inline style）也有人翻译成行内样式，内联样式表存在于HTML元素的style中。
html
<div style="font-size: 32px;color: blueviolet; font-weight: 600;">CSS行内样式</div>
🚨注意：很多资料不推荐这种写法，在原生HTML种这种写法确实是不推荐的，但是在Vue的template中某些动态的样式是会使用内联样式的，但是不推荐写过多的内联样式。
四.内部样式
😳内部样式(internal style)将CSS写在HTML的<head>中的<style>标签中。
css
div {
font-size: 32px;
color: aqua;
font-weight: 700;
}
五.外部样式表
🦉在开发中我们很可能会遇到这样一个场景，就是需要开发的内容很多小模块的布局样式都是一样的，这样的话像上边的那种方式是达不到我们代码复用的要求的这个时候如果想要解决这个问题，就需要使用外部样式表。
css
<link rel="stylesheet" href="./style.css">
🐻假如有很多的CSS文件我们都需要使用，我们也可以进行多文件的导入的方式
css
div{
font-size: 32px;
font-weight: 700px;
color: brown;
}
css
div {
width: 600px;
height: 150px;
background-color: antiquewhite;
border-radius: 10px;
}
css
@import url('./style.css');
@import url('./style1.css');
css
<link rel="stylesheet" href="./index.css">
六.CSS样式
😭CSS代码也可以添加注释来方便阅读，CSS的注释和HTML的注释是不一样的。
css
/* 这是CSS注释的内容 */七.常见的CSS样式
🦜在开发中我们百分之九十的时间都是在编写下面的这些CSS的样式。
🤡当我们在开发中遇到不知道的CSS的时候需要通过官方文档来查询某些CSS样式的用法。
🤗目前需要掌握的几个CSS的样式如下：
font-size：文字大小
css
font-size: 32px;
color：前景色(文字颜色)
css
color: aqua;
background-color：背景色
css
background-color: bisque;
width：宽度
css
width: 800px;
height：高度
css
height: 150px;
八.案例练习
