新知

1. 键值对的概念
2. rel(relation)：用来设置对象与链接目的间的关系
3. href（Hypertext Reference）：指定超链接目标的 URL
4. zen：禅宗、思考、沉思；inherit：继承
5. Vscode 自动格式化代码设置

CSS 简介

Cascade Style Sheet：美化网页，布局页面。

CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS 和 HTML 一样，是一种标记语言。

CSS 的最大价值：让 HTML 专注去做结构呈现，样式交给 CSS，即结构和样式相分离。

CSS 语法规范

CSS 规则：选择器 + 声明（一条或多条）

CSS 代码风格

1. 样式格式书写：紧凑格式、展开格式（纵向书写，推荐）
2. 样式大小写风格：使用小写字母书写
3. 样式空格风格：属性值前面，冒号后面，保留一个空格；选择器（标签）和大括号中间保留空格

CSS 基础选择器

CSS 选择器的作用：根据不同需求把不同的标签选出来，简单来说，就是选择标签用的。

选择器很多，但不要畏难，要乐观，因为这是给了我们越多的选择，比如我要从家到公司，可以走路、电动车、汽车、飞机等等，出行方式不是越多越好吗？我们可以根据情况自由的选择方式！

CSS 选择器可分为基础选择器和复合选择器两个大类。

CSS 基础选择器是由 单个选择器 组成的。

基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。

标签选择器

标签选择器是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

优点：快速为页面中同类型的标签统一设置样式。

缺点：不能设计差异化样式，只能选择全部的当前标签。

类选择器

类选择器可以差异化选择不同的标签，单独选一个或者某几个标签。

类的概念：class

口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用。

• 长名称或词组可以使用“-”来为选择器命名
• 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
• 类命名规则：web 前端开发规范手册

多类名：一个标签指定多个类名。一个标签有多个名字，就跟人的大名、小名、笔名、艺名一样。

• 写法：<div class = "red font20">亚瑟</div>
• 可写多个类名，中间必须用空格分开。
• 为什么要多个类名呢？把公共的样式放到一起，提公因式。节省 CSS 代码，统一修改也非常方便。

ID 选择器

HTML 元素以 ID 属性来设置 ID 选择器；CSS 中 ID 选择器用 “#”来定义。

口诀：样式#定义，结构ID调用，只能调用一次，别人切勿使用。（ID就是身份证，独一无二）

#pink {

    color : pink;

}

<div id = "pink">迈克尔.杰克逊</div>

通配符选择器

在 CSS 中，通配符选择器使用 “*” 定义，它表示选取页面中所有元素（标签）。

写法：* {}

基础选择器总结

| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
| :- | :- | :- | :- | :- |
| 标签选择器 | 选出所有相同的标签，如 p | 不能差异化选择 | 较多 | p { color: red;} |
| 类选择器 | 可以选出一个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id 选择器 | 一次只能选择一个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和JS搭配使用 | #nav { color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | * { color: red;} |

CSS 字体属性

CSS Fonts 属性用于定义 字体系列4、大小3、粗细2和文字样式1（如斜体）。

1. 文字样式

attribute：font-style ，实际工作中常常用来让倾斜的字体回正。

normal（正常） italic（斜体）

2. 字体粗细

attribute：font-weight

实际开发中最常使用数字：font-weight: 700;

bold 就是700，normal 就是 400 ，取值在 100-900 区间

3. 字体大小

px 像素单位有必要去深入了解一下： wikipedia；

谷歌浏览器默认的字体大小是 16px

p { font-size: 20px;}

4. 字体系列

各种字体之间使用英文逗号隔开；有空格隔开的多个单词组成的字体，加引号；尽量使用系统默认自带的字体，保证兼容性；浏览器会依次去寻找设置的字体并使用。

body {font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB';}

字体复合属性（简写）

注意：顺序不要乱！

严格按照以下顺序去写：前两个可省，size 和 family 不能省略

font: font-style font-weight font-size/line-height font-family;

字体属性总结

| 属性 | 意义 | 注意点 |
| :- | :- | :- |
| font-style | 字体样式 | Normal Italic |
| font-weight | 字体粗细 | 700-bold 400-normal |
| font-size | 字号 | 单位PX不要忘 |
| font-family | 字体 | 团队约定，多固定 |
| font | 字体设置简写 | 记住顺序不能变，字号字体必须有 |

文本属性

CSS Text 属性可定义文本的外观，比如文本的 颜色、对齐方式、装饰、文本缩进、行间距等。

小工具：faststone-capture

文本颜色

属性值：预定义的颜色值；十六进制颜色值；RGB（255,0,0）代码格式。

颜色一般是根据效果图，使用吸管吸过来的，无须自己设计。

文本对齐

text-align 属性 用于设置元素内文本内容的水平对齐方式。

装饰文本

attribute：text-decoration

默认值为 none，没有装饰线，另外还有下划线、上划线、删除线。

最常用的就是取消 a 链接自带的下划线。

文本缩进

attribute：text-indent ，一般用于首行缩进两个字符

单位：em 是一个相对单位，当前元素1个文字的大小（font-size），px 是一个绝对单位。

行间距

attribute：line-height 用于设置行间的距离（行高），可以控制文字行与行之间的距离。

可以实现在盒子里垂直居中的效果。如果行高<盒子高度，文字偏上；如果行高>盒子高度，文字偏下。

文本属性总结

| 属性 | 表示 | 注意点 |
| :- | :- | :- |
| color | 文本颜色 | 通常用 十六进制 比如而且是简写形式 |
| text-align | 文本对齐 | 水平对齐方式 |
| text-indent | 文本缩进 | 单位：2em |
| text-decoration | 文本修饰 | underline none |
| line-height | 行高 | 26px较好，可以实现文字垂直居中的效果。 |

综合案例

做一个新闻页面，见 Vscode。

CSS 的引入方式

1. 行内样式表（行内式）：适合简单地修改当前元素。<p style="color: red; font-size: 12px; ">演示</p>。控制一个标签。
2. 内部样式表（嵌入式）：理论可以放在任何在地方，但最好放在前面。可以控制一个页面。
3. 外部样式表（链接式）：样式单独写到 CSS 文件中，之后把 CSS 文件引入到 HTML 页面中使用。实际开发中都是这样，适合样式比较多的情况。控制多个页面。

3.1 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。这个文件只有样式，没有标签。

3.2 在 HTML 页面中，使用 <link> 标签引入这个文件。<link rel="stylesheet" href="css文件路径">

Chrome 调试工具

打开方式：F12，或者右键点开检查

操作方式：

1. 使用 Ctrl + 滚轮 放大和缩小界面，Ctrl + 0 复原浏览器大小。
2. 左边是 HTML，右边是 CSS。
3. 右边的 CSS 可以直接改动数值（左右箭头或者直接输入）和查看颜色。
4. 可以直接选择某一元素，来查看有无错误，是否正确引入等。

CSS 第二天导读

emmet 语法

emmet 语法的前身是 Zen coding ，它使用缩写来提高 html/css 的编写速度，Vscode 已集成该语法。

快速生成 HTML 结构语法

1. 直接输入标签名，按 tab 就可以生成标签。（写代码的时候自己发现的）
2. 标签名*数字，生成多个相同标签。（自己发现的，毕竟一个个写太累了）
3. 父子关系的标签，可以用 > 。比如 ul > li，快速生成父子标签
4. 兄弟关系的标签，使用 “+”。比如 div + p
5. 如果生成带有类名或者 id 名字的，直接写 .demo 或者 #two tab 键就可以了。比如.nav #banner 默认是 div 标签，可以加标签，比如 p.one
6. 如果生成的 dvi 类名是有顺序的，可以用自增符号，比如 .demo$*4
7. 如果想要生成的标签内部写内容，可以用 {} 表示。比如div{我是一颗小小草}

快速生成 CSS 样式语法

1. 直接使用首字母简写

<h2 id="5">格式化代码</h2>

1. 右键：format document 格式化文档
2. 设置 当保存页面的时候自动格式化代码：1.文件-首选项-设置 2.搜索 emmet.include; 3. 在 settings.json 下的 用户 中添加以下语句：

"editor.formatOnType": true

"editor.formatOnSave":true

CSS 的复合选择器

复合选择器是建立在基础选择器之上的，对基本选择器进行组合形成的。

1. 可以更准确、高效的选择目标元素（标签）
2. 由两个或多个基础选择器，通过不同的方式组合而成的
3. 后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器（重要）

后代选择器又称为包含选择器，可以选择父元素里面的子元素。

空格隔开的表示后代选择器。把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代。元素1和元素2可以是任意基础选择器。

需求：同时有 ol 和 ul 标签，想要把 ol 里面的 li 选出来改为 pink 颜色。ol li {color: pink;} 孙子也行：ol li a { color:red;}

子选择器（重要）

子选择器只能选择作为某元素的最近一级子元素。简单来说就是亲儿子元素。元素1>元素2 {样式声明}

并集选择器（重要）

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。

通过逗号连接，表示和的意思。任何形式的选择器都可以作为并集选择器的一部分。

约定竖着写，这样比较好识别。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第N个元素。:hover`:first-child`

链接伪类选择器

love hate 需要按顺序进行书写，不要颠倒！

a:link a:visited a:hover`a:active`

a 链接在浏览器中具有默认样式，在实际工作中需要给链接单独指定样式。

focus 伪类选择器

focus 伪类选择器 用于选取获得焦点的表单元素。焦点就是光标，一般情况下 <input>类表单元素才有。

复合选择器总结

| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
| :- | :- | :- | :- | :- |
| 后代选择器 | | | | 空格 |
| 子代选择器 | | | | > |
| 并集选择器 | | | | , |
| 链接伪类选择器 | | | | a:hover |
| :focus伪类选择器 | | | | input:focus |

CSS 的元素显示模式（block inline）

什么是元素显示模式？网页的标签非常多，在不同的地方会用到不同类型的标签，了解它们的特点可以更好的布局我们的网页。

元素显示模式 就是 元素（标签）以什么方式进行显示，比如 <div>自己占一行，比如一行可以放多个<span>。

HTML 元素一般分为 块元素（block） 和 行内元素（inline） 两种。

block element-div

常见的块元素有：<h1>-<h6>、<p>、<div>、<ol><ul><li>等，特点：

1. 比较霸道，自己独占一行。
2. 可以设置高度、宽度、外边距及内边距。
3. 宽度默认是容器（父级宽度）的100%。
4. 是一个容器及盒子，里面可以放行内或者块级元素。

注意：文字类的元素内不能使用块级元素。<p> 标签主要用于存放文字，因此里面不能放块级元素，特别是不能放<div>。同理，<h1~6> 文字类块级标签，里面也不能放其他块级元素。

inline element-span

常见的行内元素有：<a><strong><b><em><i><del><s><ins><u><span>等，特点：

1. 相邻行内元素在一行上，一行可以显示多个。
2. 高度、宽度直接设置是无效的。
3. 默认宽度就是它本身内容的宽度。
4. 行内元素只能容纳文本或其他行内元素。

注意：<a>特殊，链接里不能再放链接，链接里可以放块级元素，但是给<a>转换一下块级模式最安全。

行内块元素

行内元素中有几个特殊的标签：<img> <input> <td>，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素。特点：

1. 一行可以显示多个（行内元素特点）
2. 默认宽度就是它本身内容的宽度。（行内元素特点）
3. 可以控制高度、行高、外边距、内边距。（块级元素特点）

元素显示模式总结

| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
| :- | :- | :- | :- | :- |
| 块级元素 | 一行一个 | 可设置高、宽 | 容器的100% | 可包含任何标签 |
| 行内元素 | 一行多个 | 不可设置 | 内容宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行多个 | 可设置高、宽 | 内容宽度 | |

元素显示模式的转换

我需要行内元素大一点，方便选择和点击。比如想要增加链接<a>的触发范围。

写法：display: block; other value：inline inline-block none

课堂练习：

小米商城侧边栏，见 Vscode 。

CSS 的背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图片固定等。

背景颜色

默认的值是：transparent（透明的）

背景图片

背景图片，实际开发中常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，相较于插入图片，优点是非常便于控制位置（精灵图也是一种运用场景）。

background-image: url();

背景平铺

背景图片平铺：background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景图片位置（重要）

利用 background-position 属性可以改变图片在背景中的位置。

background-position: x y;

X 坐标和 Y 坐标，可以使用方位名词或精确单位。

| value | description |
| :- | :- |
| length | 百分数、由浮点数字和单位标识符组成的长度值 |
| position | top / center / bottom / left / center / right 方位名词 |

方位名词：

1. 如果是方位名词，那么 x y 的顺序无所谓，top left 和 left top 一样。
2. 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

精确单位：

1. 如果是精确单位，那么第一个肯定是 X 坐标，第二个一定是 Y 坐标。
2. 如果只指定一个数值，那该数值一定是 X 坐标，另一个默认垂直居中。

混合单位：如果指定的两个值是混合使用的，则第一个值是x，第二个是y

背景图像固定（背景附着）

该属性用来设置背景图片随页面滚动或者固定不动，默认是随对象内容滚动。

background-attchment: scoll | fixed

背景复合写法

为了简化代码，将上面的属性合并简写在同一个属性 background 中。

并无特定的书写顺序，一般习惯约定顺序为：

background: 背景颜色 图片地址 背景平铺 背景图像滚动 背景图像位置;

背景色半透明

background: rgba(0,0,0,0.3);

red green blue alpha（0是全透明，1是不透明，可以简写成.3）

背景总结

| 属性 | 作用 | 值 |
| :- | :- | :- |
| background-color | | |
| background-image | | url(image's path) |
| background-repeat | | repeat/no-repeat/repeat-x/repeat-y |
| background-position | | length/positior，x y 坐标 |
| background-attachment | | |
| 背景简写 | | |
| 背景色半透明 | 背景颜色透明度 | background:rgba(0,0,0,0.3) |

综合案例-五彩导航

疑问：

1. 使用类选择器和a链接选择器，拼成后代选择器，为什么不管用？答：.nav，你写成 .nva 了，要注意留意如何查找此类拼写错误的 bug。
2. 使用 id 为什么选不到 a 链接元素？id 属性的值写成“123”不生效？
3. 文字水平居中的代码：text-align:center;
4. 图片压背景的，为什么图片不显示？设置错误。

CSS 的三大特性

CSS 有三个重要的特性：层叠性（cascade）、继承性（ inheritance）、优先级（specificity）。

这些特性可以帮助我们理清楚不同代码之间的逻辑关系，让它们更加有序，而不会弄晕自己。

层叠性

给一个选择器设置了一个样式的不同值，在冲突的情况下，遵循层叠式原则：

1. 就近原则，哪个样式离结构近，就执行哪个样式。（存疑：到底是遵循从上到下的代码执行逻辑还是？）
2. 样式不冲突的话，不会层叠。

继承性

子标签会继承父标签的某些样式，如文本颜色和字号。

1. 恰当的使用可以简化代码，降低 CSS 样式的复杂性。比如统一的大基调给 body 设置，让其他子标签去继承。
2. 可以继承的样式：text-，font-，line-有关文字的，以及 color 属性。

行高的继承：行高可以跟单位，也可以不跟单位。

font: 12px/1.5 'Microsoft YaHei' 表示 line-height 是当前文字大小的1.5倍，重点在于与当前文字大小相关。

行高写 1.5 的优点在于：子元素可以根据自己文字大小自动调整行高。

优先级

当同一个元素指定了多个选择器，就会有优先级的产生。哪个选择器牛？比如一个标签选择器和一个类选择器。

1. 选择器相同，执行层叠性。
2. 根据选择器权重执行：标签范围越小，指代越明确，权重越大。

| 选择器 | 选择器权重 | 简单记忆 |
| :- | :- | :- |
| 继承 或 * | 0,0,0,0 | 0 |
| 元素选择器 | 0,0,0,1 | 1 |
| 类选择器、伪类选择器 | 0,0,1,0 | 10 |
| ID选择器 | 0,1,0,0 | 100 |
| 行内样式 style=“” | 1,0,0,0 | 1000 |
| !important | ∞ 无穷大 | ∞ 无穷大 |

注意事项：

1. 权重是由 4 组数字组成，不会进位，ID 选择器永远>类选择器>元素选择器。
2. 等级判断从左向右，如果某一位数字相同，则判断下一位数值。
3. 继承的权重是 0 ，简而言之，没有直接针对性指定的，都不行。我们要看这个标签有没有被直接选出来。
4. a 链接。 浏览器已默认制定了一个样式，a { color:blue; text-decoration:underline;}

权重叠加：如果是复合选择器，会有权重叠加（永远不会有进位），需要计算权重。

1. ul li 复合选择器的权重是0,0,0,2，li 的权重是0,0,0,1。

update：

1. 2020.12.25-2021.01.04 在新知第五条设置了锚点，但是却不支持直接跳转，有些遗憾。