1-1-9 【CSS基础】CSS概述

题外话：经过前面的学习，相信大家已经对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

结束语：一花一世界，一木一浮生，诸君共勉！