CSS基础
简介
主要使用场景：美化网页，布局页面。
HTML 的局限性
HTML 只关注内容的语义。
CSS-网页的美容师
CSS 也是一种标记语言。
主要作用：设置 HTML 页面中的文本内容（字体大小对齐方式）、图片的外形（宽高、边框样式、边距）以及版面的布局和外观显示样式。
总结：HTML 做结构，显示元素内容。CSS 美化 HTML，布局网页。
CSS 最大价值：由 HTML 专注去做结构呈现，样式交给 CSS，即结构与样式分离。
CSS 特点：会自动更新。
CSS 规则：1.类 2.标签 3. ID 4.复合内容
CSS 语法规范
规则组成：选择器以及一条或多条声明。
选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文分号 ; 分开
书写样式
建议展开格式
h3 {
color: pink;
font-size: 20px;
}
样式大小写
强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。
空格规范
- 属性值前面，冒号后面，保留一个空格。
- 选择器（标签）和大括号中间保留空格。
基础选择器
基础选择器由单个选择器组成。
基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器。
标签选择器
是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
优点：能快速为页面中同类型的标签统一设置样式。
缺点：不能设计差异化样式，只能选择全部的当前标签。
类选择器
差异化不同标签，单独一个或几个标签设置。
语法: { 属性 1: 属性值 1; 属性 2: 属性值 2; …… }
结构需要用 class 属性来调用 class 类。
注意
类选择器使用”.”进行标识，后面紧跟类名（自定义，自命名）。
可以理解为给这个标签起了一个名字来表示。
长名称或词组可以使用中横线来为选择器命名。
不要使用纯数字、中文等命名，尽量使用英文字母来表示。
命名规范：见附件（Web 前端开发规范手册.docx）
多类名：在标签class属性中写多个类名，多个类名中间必须用空格分开。
多类名使用场景（面向对象思维）
把标签元素相同的样式（共同的部分）放到一个类里面。
这些标签都可以调用这个公共的类，然后再调用自己独有的类。
节省 CSS 代码，修改方便。
id 选择器
为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器
语法：CSS 中 id 选择器以" # "来定义。
注意：id 属性只能在每个 HTML 文档中出现一次。
口诀：样式#定义，结构 id 调用，只能调用一次，别人切勿使用。
id 选择器和类选择器区别
类选择器 class 好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
id 选择器好比人的身份证号码，全中国唯一，不得重复。
id 选择器和类选择器最大的不同在于使用次数上。
类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 Javascript 搭配使用。
通配符选择器
使用 * 定义，表示选区页面中所有元素（标签）。
最终总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同 的标签，比如 p | 不能差异化选择 | 较多 | p { color: red; } |
| 类选择器 | 可以选出 1 个或多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id 选择器 | 一次只能选择 1 个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| 通配符选择器 | 选择所有的标签 | 选择的太多， 有部分不需要 | 特殊情况使用 | * { color: red; } |
CSS 的引入方式
按照 CSS 书写位置（引入方式），CSS 样式表可以分为三大类：
1、行内样式表（行内式）
2、内部样式表（嵌入式）
3、外部样式表（链接式）
内部样式表
写到 html 页面内部，将所有 CSS 代码抽取出来单独放到<style>标签里。
<style>标签理论上可以放在 HTML 文档任何地方，默认放到<head>标签中。通过此种方式，可以方便控制整个页面中的元素样式设置。
缺点：没有实现结构与样式完全分离。
行内样式表
元素标签内部的 style 属性中设定 CSS 样式，适合修改简单样式。
例：<div style="color: red; font-size: 20px;">Hello World!</div>
style 称为标签的属性。
双引号中间，写法要符合 CSS 规范。当前标签设置样式可控。
书写繁琐，没有体现结构与样式分离思想，不推荐使用。只有对当前元素添加简单样式的时候考虑使用。
使用行内样式表设定 CSS，通称行内式引入。
外部样式表
实际开发都是外部样式表。适合于样式比较多的情况。核心：样式单独写到 CSS 文件中，把 CSS 文件引入到 HTML 页面中使用。
步骤：
1.新建一个后缀名为.css 的样式文件，把所有 CSS 代码都放入此文件中。
2.在 HTML 页面中，使用<link>标签引入这个文件。
<link rel="stylesheet" href="css文件路径">
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"， 表示被链接的文档是一个样式表文件。 |
| href | 定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径。 |
CSS 引入方式总结
| 属性 | 作用 | 作用 | 作用 | 作用 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 结构样式混写 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，吐血推荐 | 控制多个页面 |
复合选择器
复合选择器可以更准确、更高效地选择目标元素（标签）。
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。
后代选择器（重要）
后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：元素 1 元素 2
选择元素 1 里面的所有元素 2.
1 和 2 可以是任意基础选择器。
子选择器（重要）
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。
语法：元素 1 > 元素 2
元素 1 和 2 中间用大于号隔开。
1 是父级，2 是子级，最终选择元素 2。
元素 2 必须是亲儿子。
并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
各选择器通过 , 连接，任何形式的选择器都可以作为并集选择的一部分
语法：元素 1,元素 2
元素 1 和元素 2 中间用逗号隔开。
逗号可以理解为 和、&。
约定的语法规范，并集选择器喜欢竖着写。
伪类选择器
向某些选择器添加特殊的效果。书写特点冒号显示 :
常用有链接伪类、结构伪类。先了解常用的链接伪类选择器。
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
a:focus 选择光标焦点位于其上的链接
链接伪类选择器注意事项：
1.为了确保生效，请按照 LVHA 循顺序声明：link visited hover active.
2.因为 a 链接在浏览器中具有默认样式，实际工作中都需要给链接单独指定样式。常用写法： a {} + a:hover {} :focus 伪类选择器用于选取获得焦点（光标）的表单元素。
3.注意顺序不能颠倒，先写 link 后写 visited。
一般情况<input>才能获取，主要针对表单元素使用。
复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于 .nav>a |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号 .nav,.header |
| 链接伪类选择器 | 选择不同状态的链接 | 大多跟链接相关 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
| :focus 选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus 记住这个写法 |