3.14 css
一、css:层叠样式表（写错了就不生效了，浏览器不会报错）
css语法规则
css一般写在style标签中，style一般写在head标签里，title标签下
选择器是{} 在{}里面写css属性 在{}之前找到目标html标签
px是像素的意思 在css里尺寸都得写单位
color ：颜色
font-size：字体大小
background：背景
二、css的三种引入方式
内嵌式：CSS 写在style标签中 备注：style标签虽然可以写在页面任意位置，但是通常约定写在 head （内容不多的时候使用）
外联式：CSS 写在一个单独的.css文件中 备注：需要通过link标签在html中引入，通常写在head里面，title标签下面 （内容多的时候使用）操作：在文件中创建一个css文件直接在css中写style后在目标html中用link引入
行内式：CSS 写在标签的style属性中属性里安css语法书写 备注：基础班不推荐使用，之后会配合js使用
三、基础选择器（标签选择器 、 类选择器 、 id选择器、通配符选择器）
1、标签选择器
结构：标签名 { css属性名：属性值； }
备注：一般css标签选择器都是整个页面的都选中。例如：选p标签整个html里面的p标签都会被选中因而变成统一的css属性
2、类选择器最常使用
结构类型：.+类名{在css中写所需要的属性} 例如：字体变红 .red{color=”red“} 只需要在之后需要用的标签属性里加class=red就行，所有标签都可以加class。
备注：类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头。一个标签可以同时有多个类名，类名之间以空格隔开。类名可以重复，一个类选择器可以同时选中多个。操作：在 style里面写.＋类名并设置属性值 再在目标标签的属性中加class=类名就可以生效
3、id选择器（为了配合js用、但在这里也有小范围使用）针对css 重复的id名不会报错但是后续跟js交互时容易出问题
结构：#id属性值 { css属性名：属性值； }
备注：所有标签上都有id属性 、 id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的、一个标签上只能有一个id属性值 、 一个id选择器只能选中一个标签。id一定不能取相同名字
4、通配符选择器（一般不使用，但是在实际中只用*{}把标签的默认样式清除）
结构：结构：* { css属性名：属性值； }
备注 开发中使用极少、只会在极特殊情况下才会用到 、在基础班小页面中可能会用于去除标签默认的margin（页边距）和padding （）（后续讲解）
四、字体样式和文本样式
目的：让目标html里面的字体和文本相关样式 修改元素外观样式
字体样式
字体大小：font-size
（取值是数字+px）
字体粗细：font-weight
(不加粗字体normal或者400、加粗是bold或者700，实际应用中一般用数字表示)
字体样式：font-style
（正常值是normal、倾斜是italic）
A.无衬线字体（sans-serif）
1.特点：文字笔画粗细均匀，并且首尾无装饰
2.场景：网页中大多采用无衬线字体
3.见该系列字体：黑体、Arial
B.衬线字体（serif）
1.特点：文字笔画粗细不均，并且首尾有笔锋装饰
2.场景：报刊书籍中应用广泛
3.常见该系列字体：宋体、Times New Roman
C.等宽字体（monospace）
1.特点：每个字母或文字的宽度相等
2.场景：一般用于程序代码编写，有利于代码的阅读和编写
3.常见该系列字体：Consolas、fira code
字体类型：font-family(为了兼容不同的系统不同的显示效果)
(具体字体取值："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等)
必须知道以上内容：字体颜色层叠问题 ：如果css标签是同样的属性，后面的属性覆盖前面的属性
字体类型：font属性连写 （复合属性）顺序是style weight size family
（直接在font后直接写属性值 可以写多个值，多个值中间用空格隔开）
注意：如果需要同时设置单独和连写形式 ，要么把单独的样式写在连写的下面 ，要么把单独的样式写在连写的里面。不然会被后面的属性层叠掉。省略取值时只能省略前两个。
拓展内容：
取值类型①：关键词
常见颜色取值： red：红色 green：绿色 blue：蓝色 yellow：黄色 orange：橘色 skyblue：天蓝色 pink：粉色
取值类型②：rgb表示法 每项取值范围：0~255
常见颜色取值： rgb ( 255 , 0 , 0 ) ：红色 rgb ( 0 , 255 , 0 ) ：绿色 rgb ( 0 , 0 , 255 ) ：蓝色 rgb ( 0 , 0 , 0 ) ：黑色 rgb ( 255 , 255 , 255 ) ：白
取值类型③：rgba表示法
其实，比rgb表示法多个一个a，a表示透明度
a的取值范围：0~1 1：完全不透明 0：完全透明
省略写法： rgba ( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 ）
文本属性
1、文本缩进
属性名是text-indent 取值是数字+px（一般浏览器属性值是16px） 或者数字+em（工作一般使用em em取值是当前字体的大小。）px是像素的意思。
2、文本水平对齐方式（文本、span标签、a标签、input标签、img 不独占一行的都可以用）
属性名：text-align 取值是left（左对齐） center（居中对齐） right（右对齐）
备注：水平对齐方式都是在父级标签进行属性取值
3、文本修饰
属性名：text-decoration
取值是underline（下划线、常用）none（无装修饰线、常用）line-through（删除线）overline（上滑线）
margin可以用来做真个页面居中样式是margin：0 空格加auto
4、行高
属性名：line-height 取值数字+px 倍数(指的是文字高度的倍数)
用法也是在目标文字的父标签里面设置
备注1：复合使用时可以直接在font里面连写但是需要在size后面用/隔开 几乎不用
备注2：在文字在同一行时也可以用来文本垂直居中 （设置行高属性值=自身高度）也可以设置倍数但是在 日常开发中比较少见。
五、chrome调试工具
目的：能够认识 Chrome调试工具 的基础操作，能够使用 Chrome 调试工具 修改和调试样式
学习路径： 1. 打开方式 2. 选择元素 3. 控制样式 4. 特殊情况
操作：打开方式 ① 右击 → 检查 ② 看哪里
选择元素 两种常见方法
a、控制样式 ① 修改属性值 ② 添加属性 ③ 控制样式生效
b、特殊情况 ① 出现删除线表示该属性被覆盖 ② 出现小三角形表示该属性不生效、打错了
在浏览器中快速生成想要的效果，后直接取代吗到vscode中替换就行
