CSS3基础
1. 基础认知
1.1 CSS 简介
CSS 的使用场景是什么？
美化网页，布局页面CSS 的中文名称是什么？
层叠/级联样式表（Cascading Style Sheets）CSS 也是一种标记语言CSS 能设置哪些样式？
文本内容：字体、大小、对齐方式图片：宽高、边框、边距版面的布局结构与样式分离：HTML 专注做结构 + CSS 专注做样式
1.2 体验 CSS 语法规范
CSS 规则包含哪两个部分，作用是什么？
选择器：改谁的样式样式声明：改成什么样式CSS 通常写在 HTML 的什么位置？
<head><meta charset="UTF-8" /><title>体验CSS语法规范</title><style>CSS 写在这里</style></head>
CSS 语法格式是什么？
选择器 {属性: 值;属性: 值;}
p {width: 100px;height: 100px;}
使用{}包含一个或多个样式声明；每条样式声明以键值对形式出现：属性: 值；属性和值之间使用:分隔；属性之间使用;分隔，最后一行的分号可以省略。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1. 体验CSS语法规范</title><style>p {color: aqua;font-size: 64px;}</style></head><body><p>学习如逆水行舟，不进则退</p></body></html>
注意：
在 HTML 中写样式不要忘记加 style 标签设置字体不要忘记px，提示可以把字体设置大一些，这样更直观。
1.3 CSS 代码风格
紧凑格式和展开格式哪种更推荐？为什么？
更推荐展开格式，因为更直观，更易于阅读和维护。有专门的工具对 CSS 进行压缩
开发时展开给人看，更友好上线时压缩给浏览器看，更高效
书写样式时，应该使用大写字母还是小写字母？
小写字母。书写样式时，有两个地方需要注意空格，分别是什么位置？
选择器和开始花括号之间保留一个空格；:后面保留一个空格。2. 选择器
2.1 CSS 选择器的作用
选择器的作用是什么？
选择标签(根据不同的需求，把对应的标签选择出来)。2.2 标签选择器
选择器分为哪两大类？特征是什么？
基础选择器：由单个选择器组成复合选择器：由多个选择器组成标签选择器是以什么作为选择器？
标签选择器就是使用HTML 标签名称作为选择器使用标签选择器修改样式的结果是什么？有什么优点？有什么缺点？
结果：把某一类标签选择出来，统一修改样式优点：快速、统一设置同类型标签的样式缺点：没有差异化2.3 类选择器
类选择器的应用场景是什么？
如果想差异化选择不同的标签，单独选择一个或某几个标签类选择器的语法是什么？使用步骤是什么？注意事项是什么？
定义类选择器 选择器名称前有一个.表示是类选择器{}中仍然是一个或多个键值对； 使用类选择器 找到需要修改样式的标签；给标签增加class属性，属性值是选择器的类名 注意事项 使用类选择器不需要.类选择器可以应用到不同类型的标签吗？
可以给类选择器命名有注意事项？
.紧跟类名，不能有空格；长名称或词组使用-连接，例如：jd-nav；尽量用英文，不要用数字或中文；命名要做到见名知意；类选择器口诀样式点定义结构类调用一个或多个开发最常用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3. 类选择器</title><style>.hot {color: rgb(255, 0, 0);font-size: 20px;}</style></head><body><ul><li>HTML 入门到精通</li><li class="hot">CSS 布局指南</li><li>JavaScript 从入门到放弃</li></ul></body></html>
2.4 使用类选择器画盒子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>4. 使用类选择器画盒子</title><style>.red {color: rgb(255, 255, 255);font-size: 20px;width: 100px;height: 100px;background-color: red;}.green {color: rgb(247, 247, 247);font-size: 30px;height: 100px;width: 100px;background-color: green;}</style></head><body><div class="red">red</div><div class="green">green</div><div class="red">red</div></body></html>
2.5 类选择器特殊使用-多类名
多类名的使用方式是什么？
在标签的class属性中使用多个类名类名之间使用空格分隔多类名的应用场景是什么？
把元素相同的样式放在同一个公共类中，个性的样式放在单独的类中，既可以节省 CSS 代码，又方便统一修改。2.6 id 选择器
id 选择器的前缀是什么？
#id 选择器的应用场景是什么？
专门定义 HTML 中某个特定元素的样式，因为id是唯一的id 选择器的使用步骤？
定义带 id 的 HTML 元素
给 HTML 中的某个特殊元素增加id属性
定义 id 选择器
选择器名称前有一个#表示是 id 选择器选择器名称就是对应 HTML 元素的 id 名称{}中仍然是一个或多个键值对；
id 选择器和类选择器的区别？
id 可以看成是身份证号（唯一） / 类可以看成是名字（可多人使用）
id 只为特定元素设置样式，常与 JavaScript 联用
类选择器在修改样式中用的最多
id 选择器口诀
样式#定义
结构id调用
只能用一次
别人勿使用
2.7 通配符选择器
通配符选择器使用什么符号定义？
*表示选取页面中的所有元素通配符选择器需要调用吗？为什么？
不需要浏览器在解释 HTML 时，会把通配符选择器中定义的样式应用到页面中的每一个元素<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>6. 通配符选择器</title><style>* {color: hotpink;}</style></head><body><div>不要皱眉，即使在伤心的时刻，因为你从不知道有谁会醉心于你的笑容。</div><p>我们看错了这个世界，却说世界欺骗了我们。</p><span>我们人这一辈子不是别人的楷模，就是别人的借鉴</span></body></html>
基础选择器总结
3. 字体属性
3.1 font-family 设置字体系列
字体属性可以定义哪些样式？
字体相关的样式，例如：字体系列、大小、粗细、文字样式（斜体）等font-family的含义是什么？
字体系列、字体族为什么要尽量使用系统默认自带字体？
保证在任何用户的浏览中都能正确显示浏览器对字体的搜索顺序是什么？
当指定的字体找不到（或者某些文字不支持这个字体）时，就接着往后找为什么要把字体样式设置给body标签？
一次设置，到处使用font-family 设置字体系列扩展 —— 字体族
衬线字体serif，如：宋体，Times New Roman非衬线字体sans-serif，如：微软雅黑，苹方，Arial等宽字体monospace，如：Courier，Courier New，Monospace，新宋体，幼圆手写体cursive花体fantasy注意：写 CSS 代码时，末尾的字体族不需要带引号；Windows 推荐使用微软雅黑字体；macOS 推荐使用苹方字体。衬线体如今已经很少使用了，而非衬线体更符合现代审美。如果你发现一名设计师，在做海报设计、或者制图的时候，使用了宋体，说明她一定是个外行。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>7. font-family字体属性</title><style>h2 {font-family: cursive;text-align: center;}p {font-family: cursive;text-align: center;}</style></head><body><h2>《送孟浩然之广陵》</h2><p>故人西辞黄鹤楼,</p><p>烟花三月下扬州.</p><p>孤帆远影碧空尽,</p><p>唯见长江天际流.</p></body></html>
3.2 font-size 字号大小
设置字体大小的单位是什么？
px像素谷歌浏览器的默认文字大小是多少？
16px为什么要在body标签中指定页面文字的大小？
不同浏览器可能默认显示的文字大小不一致开发时要尽量给一个明确的值，不要使用默认大小font-size 字号大小扩展 —— 检查文字大小
确认谷歌浏览器的默认文字大小2. 设置尺寸漏写px
3.3 font-weight 字体粗细
实际开发中推荐使用哪种方式设置字体的粗细？
数字font-weight字重使用数值设置字体粗细需要单位吗？
不需要哪些数值可以设置字体的粗细？normal对应多少？bold对应多少？
取值范围100~900（按100递增）normal：正常粗细，与 400 等值。bold：加粗，与 700 等值。注意：不是所有的字体都提供了九种粗细的，因此有些数值指定后会看不出变化
h2 {font-weight: 700;}p {font-weight: 400;}</style>
3.4 font-style 字体样式
开发时把字体设置为倾斜的场景多吗？为什么？
不多font-style: italic;font-style 的应用场景是什么？
把em、i默认的斜体改为不倾斜显示font-style: normal;注意：开发时，如果需要对段落中的局部文字进行修饰，例如搜索结果高亮，可以首选em标签，然后应用font-style首先将字体设置为不倾斜。
<style>h2 {font-style: italic;}em {font-style: normal;}</style>
3.5 font 复合属性写法
字体复合属性的属性名是什么？
font复合属性的作用是什么？
节约代码复合属性的编写顺序是什么？能够随意调整顺序吗？
font: font-style font-weight font-size/line-height font-family;复合属性不能随意调整顺序复合属性至少要保留：font-size和font-family属性，否则设置无效猜一猜在开发中字体的复合属性使用频率高吗？为什么？
不高font-family通常会在body的标签选择器中定义，其他位置通常不需要更改字体<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>11. font 复合属性写法</title><style>#name {font-style: italic;font-weight: 900;font-size: 20px;font-family: sans-serif;}.name_a {font: normal 100 30px "微软雅黑";}</style></head><body><div id="name">三十三世十里桃花</div> <div class="name_a">一心一意百行代码</div></body></html>
3.6 字体属性总结
4. 文本属性
4.1 文本颜色 color
文本属性可以定义哪些样式？
文本相关的样式，例如：颜色、对齐方式、装饰文本、文本缩进、行间距等文本相关的样式，例如：颜色、对齐方式、装饰文本、文本缩进、行间距等
预定义的颜色名：red、green、blue十六进制：#ff0000RGB 代码：rgb(255, 0, 0)或rgba(255, 0, 0, 0.5)有几种定义颜色的方式？在开发中哪种颜色最常用？
开发中最常用的是：十六进制的颜色
如果要使用透明色，可以使用rgba(red, green, blue, 透明度)，其中：
red：0 ~ 255green：0 ~ 255blue：0 ~ 255透明度：0 ~ 1，0 表示完全透明（看不见），1 表示完全不透明
4.2 文本对齐 text-align
text-align能设置哪个方向上的文本对齐方式？
可以设置水平方向上的对齐方式有哪三种种文本对齐方式？
left：左对齐（默认）right：右对齐center：居中<style>p1 {text-align: left;}p2 {text-align: center;}p3 {text-align: right;}</style>
文本对齐的本质是什么？
盒子让内部的文本按照盒子边界对齐4.3 文本装饰 text-decoration
视频中text-decoration能够给文本增加哪些装饰？
问题 2：如何取消a标签默认的下划线？
text-decoration: none;a {text-decoration: none;}
4.4 文本缩进 text-indent
text-indent的作用是什么？
设置文本段落的首行缩进，更适合中文阅读习惯em有多大？
当前元素 1 个文字的大小1em = 16pxp {text-indent: 2em;}
4.5 行间距 line-height
line-height的作用是什么？
控制文本行与行之间的距离文本在盒子中垂直居中行间距由几个部分组成？分别是什么？
上间距文本高度下间距应该如何测量行间距？为什么？
从一段文字的下边线测量到相邻行的上间距因为文本的上下间距是相等的<style>p {line-height: 80px;color: lightgreen;}</style>
4.6 CSS 文本属性总结
5. CSS 的三种引入方式
5.1 内部样式表
按照书写方式，CSS 可以分成几种方式？分别是什么？
行内样式表（行内式）内部样式表（嵌入式）外部样式表（链接式）内部样式表可以放在 HTML 的什么位置？推荐会放在哪里？
理论上可以放在 HTML 的任何位置推荐放在head标签中，不要忘记还有一个style标签5.2 行内样式表
行内样式表有什么特点？
写在元素的style属性中适合于简单、快速、临时修改样式在style属性中，使用键值对设置样式，不需要{}写在哪个元素就控制哪个元素，对其他元素没有效果<style>p {color: lightcoral;}</style>
开发时推荐使用行内样式吗？为什么？
不推荐书写繁琐，没有体现出结构和样式分离不能做到样式复用<p style="color: lawngreen;">15. 行内样式表</p>
开发时什么时候会使用行内样式？
临时使用，非正式页面5.3 外部样式表
在实际开发中，哪种样式表的引入方式使用的多？
外部样式表核心思想：CSS 与 HTML 分离外部样式表的使用步骤是什么？
新建外部的CSS文件并编写样式在 HTML 中使用link标签引入外部样式表外部样式表中需要使用style标签吗？为什么？
不需要标签是 HTML 的，CSS 中只有样式HTML文件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>16. 外部样式表</title><link rel="stylesheet" href="CSS/style.css"></head><body><p>16. 外部样式表</p></body></html>
style.css文件
p {color: aqua;}
