CSS基础功能介绍和使用
CSS 介绍
什么是 CSS
虽然 HTML 元素的属性可以调整一些样式，但是效果不够理想，而我们更愿意把样式编写在<style>标签中，让页面设计更美观更丰富。
实际上，这是通过 CSS 实现的。那么，什么是 CSS 呢？
如果说，HTML 是网页的“素颜”，那么 CSS 就是页面的“美妆师”，它就是让网页的外观更漂亮！
CSS（Cascading Style Sheet，层叠样式表）：简单地说，是用于设置和布局网页的计算机语言，它会告知浏览器如何渲染页面元素。例如，调整内容的字体、颜色、大小等样式、设置边框的样式、调整模块的间距等。
- 所谓
层叠：是指样式表允许以多种方式规定样式信息。即可以规定在单个元素中，也可以在页面头元素中，也可以在另一个 CSS 文件中。规定的方式会有次序的差别。 - 所谓
样式：是指丰富的样式外观。拿边框距离来说，允许设置任何类型的边框，允许设置边框与框内元素的距离，允许设置边框与边框的距离等等。
CSS 发展简史：
- CSS1：1994 年，Hkon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的Bert Bos，他们决定一起合作设计 CSS，于是创造了 CSS 的最初版本。1996 年 12 月，W3C 推出了 CSS 规范的第一版本。
- CSS2：1998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。
- CSS3：2005 年 12 月，W3C 开始 CSS3 标准的制定，并遵循模块化开发，所以没有固定的发布时间，而是一段时间发布一些特性模块。
CSS 的组成
CSS 是一门基于规则的语言——你能定义用于你的网页中特定元素的一组样式规则。
这里面提到了两个概念：一是特定元素，二是样式规则。对应 CSS 的语法，也就是选择器（selects）和声明（declarations）。
- 选择器：指定将要添加样式的 HTML 元素的方式。可以使用元素的 name 值、class 值、id 值等多种方式。
- 声明：形式为
属性(property):值(value)，用于设置特定元素的属性信息。- 属性：指示文体特征，例如 font-size、width、background-color。
- 值：每个指定的属性都有一个值，该值指示您如何更改这些样式。
使用语法：
选择器 {属性名:属性值;属性名:属性值;属性名:属性值;
}
示例：
h1 {color: red;font-size: 5px;
}
示例详解：
语法由一个 选择器(selector) 起头。 它 选择(selects) 了我们将要用来添加样式的 HTML 元素，在示例中是为一级标题添加样式。
接着输入一对大括号{ }。在大括号内部定义一个或多个形式为 属性(property):值(value); 的 声明(declarations)。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。
冒号之前是属性，冒号之后是值。不同的 CSS 属性(properties) 对应不同的合法值。在这个例子中，我们指定了color属性，它可以接受许多 颜色值(color values)；还有font-size属性，它可以接收许多 size units 值。
Chrome 开发者工具（F12）更改临时样式
基础语法
引入方式
1）内联方式
仅作了解，目前这种方式已几乎不用，因为维护艰难
内联样式是 CSS 声明在元素的style属性中，仅影响一个元素：
语法：
<标签 style="属性名:属性值; 属性名:属性值;">内容</标签>
举例：
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!
</h1>
效果：
虽然语法简单，但是样式无法复用到多个元素上，不利于维护。
2）内部样式表
内部样式表是将 CSS 样式放在style 标签中，通常 style 标签编写在 HTML 的 head 标签内部。
语法：
<head><style>选择器 {属性名: 属性值;属性名: 属性值;}</style>
</head>
示例：
<head><style>h1 {color: blue;background-color: yellow;border: 1px solid black;}</style></head>
效果：
内部样式只能作用在当前页面上，如果是多个页面，就无法复用了。
3）外部样式表
外部样式表是指将 CSS 编写在扩展名为.css 的单独文件中，并在 HTML 的<link>元素种引用它，通常 link 标签编写在 HTML 的 head 标签内部。
外部样式表是 CSS 附加到文档中的最常见和最有用的方法，因为你可以将 CSS 文件链接到多个页面，从而允许你用相同的样式表来设置所有页面的样式。
语法：
<link rel="stylesheet" href="需要引入的css文件路径">
-
rel：表示“关系（relationship）”，属性值指链接方式与包含它的文档之间的关系，引入 css 文件固定值为 stylesheet。
-
href：需要引入的 css 文件路径。
示例：
- 创建 styles.css 文件：
h1 {color: blue;background-color: yellow;border: 1px solid black;
}
- link 标签引入文件：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" href="styles.css"></head><body><h1>Hello World!</h1></body>
</html>
效果：
当然也可以把 CSS 文件放在其他地方，并调整指定的路径以匹配，例如：
<link rel="stylesheet" href="css/styles.css">
为了保证 CSS 文件的管理，建议在项目中创建一个css文件夹，专门保存样式文件。
引入的优先级
优先级从低到高如下：
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head>