CSS简介

网页分成三个部分：
结构：HTML
表现：CSS
行为：Javascript

CSS: 层叠样式表
用法：标签里设置style=""属性的值就是CSS，以键值对存在：样式名: 样式值;
作用：用来设置网页中元素的样式
特点：网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式，而最终我们只能看到最上面的一层

方式一：内联样式/行内样式（开发中不推荐使用）
- 使用内联样式，只能对一个标签生效
如果希望影响到多个元素，必须在每一个元素中都设置style
当样式发生变化时，我们必须一个一个的修改，非常不方便
所以，开发时不要使用内联样式

color: red; color: rgb(x,x,x); font-size: 60px;
<p style="color: rgb(100, 1, 1); font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>
<p style="color: red; font-size: 60px;">内联样式</p>

方式二：内部样式表
- 将样式编写到<head></head>标签里
- 通过CSS选择器来选中元素，并为其设置各种样式：标签名{ CSS语法 }
- 可以同时为多个标签设置样式，并且修改时只需修改一处即可全部应用

<head>
<style>
h1{
font-size: 60px;
}
p{
color: red;
font-size: 40px;
}
</style>
</head>

方式三: 外部样式表（最佳实现方式）
- 可以将CSS样式编写到一个外部的.css文件中
- 通过link标签来引入外部的.css文件
- 意味着只要想使用这些样式的网页都可以对其进行引用
- .css文件内直接写CSS语法：指定的标签名{ CSS语法 }
- 将样式编写到外部的.css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验

<link rel="stylesheet" href="./style.css">

样式优先级：
　　当三种样式表同时存在时，内联样式的优先级最高
　　而内部样式表和外部样式表则是谁的代码在下边，执行结果是谁