什么是CSS：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

如何学习CSS:

在这里插入图片描述

学习CSS的重点：CSS选择器（重点+难点）

CSS发展史

在这里插入图片描述

快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style>可以编写CSS代码，每一个声明最好是以分号结尾
    语法：
        选择器{
    
    
            声明1；
            声明2；
            声明3；
        }
    -->
    <style>
        h1 {
    
    
            color: orange;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

运行结果:
在这里插入图片描述
推荐HTML与CSS相分离(结构与样式相分离)。<link rel="stylesheet" href="../css/01.css">
01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style>可以编写CSS代码，每一个声明最好是以分号结尾
    语法：
        选择器{
    
    
            声明1；
            声明2；
            声明3；
        }
    -->
    <link rel="stylesheet" href="../css/01.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

01.css

h1 {
    
    
    color: orange;
}

CSS的优势

结构与样式相分离。
网页结构表现统一，可以实现复用。
样式十分丰富。
建议独立于html的css的文件
利用SEO，容易被搜索引擎收录。（Vue不容易被搜索引擎收录）

导入CSS的3种方式

行内样式
内部样式
外部样式

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--2.内部样式-->
    <style>
        h1 {
    
    
            color: red;
        }
    </style>
    <!--3.外部样式-->
    <link rel="stylesheet" href="../css/01.css">
</head>
<body>
<!--1.行内式-->
<h1 style="color: orange"></h1>
</body>
</html>

优先级: 就近原则

初遇CSS+快速入门