1.CSS 概述
1.1什么是 CSS
CSS (Cascading Style Sheets) ：层叠样式表
层叠：一层一层叠加
样式表：存储样式的地方，多个样式
CSS 通常称为 CSS 样式或层叠样式表，主要用于设置 HTML 页面中的文本内容（字
体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外
观显示样式。
CSS 可以使 HTML 页面更好看， CSS 色系的搭配可以让用户更舒服， CSS+DIV 布
局更佳灵活，更容易绘制出用户需要的结构。
CSS 作用：修饰 HTML 页面，更丰富多彩地展示超文本信息
1.1入门案例
步骤 1：创建一个 HTML 文件
步骤 2：在 HTML 上创建一个标签
步骤 3：标签中新增一个 style 属性，并修改 style 属性值
效果：
因为 HTML 属性在单独使用时有一定的局限性，所以要配合 CSS 样式代码才可以展示更为丰富的
效果。
2. CSS 基本语法格式
放置规范：
在<style>标签内容体中书写 css 样式代码。
<style>标签放置在<head>标签之中。
格式规范：
选择器名称 { 属性名 1：属性值 1；属性名 2：属性值 2；…….}
选择器：即指定 CSS 样式作用在哪些 HTML 标签上
代码规范：
属性名和属性值之间是键值对关系；
属性名和属性值之间 用 “:” 连接，最后“;”结尾；
例如：font-size:120px;
如果一个属性名有多个值，多个值之间用 空格 隔开。
例如： border:5px solid red;
CSS 注释：/* 注释内容*/
等同于 java 的多行注释
示例：
效果：
3. 选择器
3.1 标签选择器
标签选择器：即以 HTML 标签名作为选择器名称。
作用：选择 CSS 样式代码 作用于 对应标签名的标签上。
格式：
标签名{
/*CSS 样式代码*/
}
适用范围：适用于将相同样式
作用在多个同名标签上
准备代码：
<span>我是 span111111111111</span> <span>我是 span222222222222</span> <span>我是 div111111111111</span> <span>我是 div222222222222</span>
示例：
效果：
3.2 类选择器
每个 HTML 标签都有一个 class 属性，class 属性值即为类名
类选择器：即以 HTML 的类名（
class 属性值）作为选择器名称。
作用：选择 CSS 样式代码 作用于 对应类名的 HTML 标签上
格式：
作用：选择 CSS 样式代码 作用于 对应类名的 HTML 标签上
格式：
.类名{
/*CSS 样式代码*/
}
适用范围：适用于将样式 一次作用在相同类名的标签上。（即使标签名不同）
准备代码：
<span>span1：我是黑色</span> <span class="redF">span2：我是红色</span> <div>div：我是黑色</div> <div class="redF">div2：我是红色</div>
示例：
效果：
注意：
1、如果需要选择多个，例如同时使用 c1 和 c2 多个样式：
2、类选择器命名时，词组之间可以通过中横线来分隔：
例如：main-top
main-middle
main-bottom
3.3 ID 选择器
每个 HTML 标签都有一个 id 属性，id 的属性值必须在本页面是唯一的。
id 选择器：即以 HTML 的 id（id 属性值）作为选择器名称。
作用：选择 CSS 样式代码 作用于 某个规定 id 值的 html 标签上
格式：
#id 值{
/*CSS 样式代码*/
}
适用范围：适用于将样式 作用某个标签上。（更有针对性）
注意：
必须人工保证 ID 值在本页面唯一。
准备代码：
<span>span1：我是黑色</span> <span>span2：我是黑色</span> <div>div1：我是黑色</div> <div id="d1">div2：我是红色</div> <div id="d2">div2：我是红色</div>
示例：
效果：
注意：
class 属性是为了美工 通过类选择器 调整页面样式
id 属性更多是为了程序员 通过 JS 操作页面
3.4 扩展：通配符选择器
CSS 支持使用 * 作为通配符，表示任意元素
上述案例中，因为使用 * 代表任意元素，这里<h1>和<h2>两个标签都被修改了样式。
注意：不建议使用，会降低页面加载速度。
3.5 扩展：属性选择器
每个标签将来都会设置不同的属性及属性值，
我们可以通过标签的属性及属性值来将样式作用于特点标签上。
格式：
标签名[属性名=’属性值’]{
/*css 样式代码*/
}
准备代码：
<font size="3">黑色字体 1111</font> <font size="5">黑色字体 2222</font> <font size="7">红色字体</font>
示例：
效果：
