题外话：经过前面的学习，相信大家已经对HTML有一定了解了，下面该学习CSS基础了~
文章内容输出来源：拉勾教育大前端就业集训营
1.CSS背景介绍
- HTML最开始，为了满足页面设计的需求，添加许多控制样式的功能。
- 但是随着功能增加，HTML变得越来越臃肿，除了结构以外还要描述样式，对于程序员开发十分不利。
- 所以大家将结构设计和样式设计分开，HTML负责结构设计，CSS负责样式设计。如此一来，大大减轻了程序员的负担。
2.CSS发展过程
了解即可，后面可能会捎带说明。
3.CSS概述
- 定义：Cascading Style Sheet，层叠式样式表，一种用来表现HTML文件样式的计算机语言。
- 作用：静态的修饰网页，并且可以配合各种脚本语言，动态的对网页各元素进行格式化。
- 意义：CSS的出现，实现了网页的结构和样式的分离，改变了混乱的HTML。CSS可以说是网页的美容师，让网页变得更加美观。
4.什么是“层叠式样式表”？
- 层叠式：CSS贯穿始终的加载特性，又分层叠性和继承性。
- 样式表：描述HTML元素该如何显示的“一张表”。
了解即可，后面会详细说明。放到这里面讲是为了让你从CSS的名字上理解他是什么，他有什么特性。
5.CSS基本语法（很简单）
- 组成结构：主要分为两部分，选择器和一条或多条属性。
- 选择器：用于描述这些属性应该应用于哪些标签。
- 属性：用于描述对应标签在浏览器中的展示样式。
- 书写位置：根据书写位置的不同，可分为4种书写模式，行内式，内嵌式，外链式和导入式。
6.行内式
- 书写位置：在某个HTML标签的style属性中书写，因为已经在标签内部了，所以就不需要选择器了。
<div style="width: 100px; height: 100px; background-color: pink;"></div>
说明：指定该“大盒子”的长宽为100像素，背景颜色为粉色。
-
缺点：
- 必须写在标签上，本质上没有脱离HTML标签而独立存在。
- css样式代码让标签代码结构变得复杂，不利于结构解读。
- 内联式CSS代码只能给当前标签用，如果多个相同标签的样式相同，需要一个一个设置。
- 总结：在实际工作中，不会使用内联式编写css代码。demo中偷懒可以使用该写法。
7.内嵌式
- 书写位置：HTML文件中，<head>标签内部的<style>标签中。<style>标签写在<title>标签后面，所有css代码写在<style>标签的元素内容中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 看这里！！-->
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<p>我是一个盒子</p>
</div>
</body>
</html>
说明：在该HTML文件中，所有div标签具有“长宽100px，背景颜色粉色”的属性。
- 优点：实现了结构和样式的初步分离；多个标签可以用同一段代码，节省代码量。
-
缺点：
- 结构和样式没有完全分离，代码依旧写在HTML文件的style标签内部；
- CSS样式只能给一个HTML文件使用，不能被多个HTML共享。
- 若CSS代码过多，会导致HTML文件头重脚轻。
8.外链式
- 书写位置：在一个单独的扩展名为.css的文件中。
- 书写语法：.css文件内部代码与内嵌式样式表中style标签内部代码一样。注意，不需要外部包裹<style>标签了。
- css文件引用：虽然你将css样式写入了一个独立的文件中，但是HTML文件表示不知道，所以需要你告诉HTML文件，css文件在哪。
- link标签：单标签，通过属性告知HTML文件对应的css文件在哪。需要写在head标签内部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 我在这儿 -->
<link rel="stylesheet" href="css01.css">
</head>
<body>
<div>
<p>我是一个盒子</p>
</div>
</body>
</html>
rel属性：relationship，告知HTML它引用的文件和它是什么关系。stylesheet，样式表。
href属性：告知HTML文件，css文件在哪里。
-
优点：
- 实现了HTML和css的完全分离；
- 多个HTML可共享一个CSS文件，减少重复代码量；
- 实现一个css变化，多个HTML页面同时变化，减少工作量；
- 一个HTML可引入多个css文件，可实现同一个页面中css代码分层？公共样式和私有样式的分离。
9.导入式
- 书写位置：在一个单独的扩展名为.css的文件中。
- 书写语法：与外链式相同。
- 文件引用：与外链式不同，采用@import url语句引用外部css文件，且书写在head标签内部的style标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 我在这儿 -->
<style></style>
@import url(css01.css);
</style>
</head>
<body>
<div>
<p>我是一个盒子</p>
</div>
</body>
</html>
-
缺点：
- 导入式样式表与外联式样式表基本相同。
- 导入式在浏览器加载网页时，会优先加载HTML结构，然后再加载css代码，如果网速慢，会先出现很丑的HTML结构式网页，等css加载完毕后，真正的网页才会出现，体验差。
- 总结：工作中很少使用导入式，了解即可。
前端文章汇总目录
https://www.jianshu.com/p/6d80dd616ff4
结束语：一花一世界，一木一浮生，诸君共勉！
