走进前端技术栈 - CSS | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的day5-笔记

本节课重点

• CSS简介和基础认知
• CSS使用方法和选择器
• 伪类选择器
• 字体和文本样式

CSS简介和基础认知

• CSS：层叠样式表（Cascading style sheets）
• CSS作用是给页面中的HTML标签设置样式

CSS引入方式

内嵌式：CSS 写在style标签中

提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中

外联式：CSS 写在一个单独的.css文件中

提示：需要通过link标签在网页中引入

行内式：CSS 写在标签的style属性中

提示：不推荐使用，之后会配合js使用

CSS选择器

通配选择器

• 结构：* { css属性名：属性值； }
• 作用：找到页面中所有的标签，设置样式

标签选择器

• 结构：标签名 { css属性名：属性值； }
• 作用：通过标签名，找到页面中所有这类标签，设置样式

类选择器

• 结构：.类名 { css属性名：属性值； }
• 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

id选择器

• 结构：#id属性值 { css属性名：属性值； }
• 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

属性选择器

• 结构：标签名 { css属性名: 属性值; }
• 作用：通过标签名，找到页面中所有这类标签，设置样式

[attribute] 选择多有带 attribute 属性的元素
[attribute=value] 选择 attribute=value的所有元素
[attribute~=value] 选择 attribute属性包含单词 value的所有元素
[attribute^=value] 选择其attribute属性值以value开头的所有元素
[attribute$=value] 选择其attribute属性值以 value结束的所有元素
[attribute*=value] 选择其attribute属性中包含value子串的每个元素

伪类选择器

链接伪类选择器

• 场景：常用于选中超链接的不同状态

焦点伪类选择器

• 场景：用于选中元素获取焦点时状态，常用于表单控件

结构伪类选择器

作用与优势：

• 作用：根据元素在HTML中的结构关系查找元素
• 优势：减少对于HTML中类的依赖，有利于保持代码整洁
• 场景：常用于查找某父级选择器中的子元素

复合选择器

作用: 找标签

1. 后代

2. 作用: 选择所有的后代标签, 儿子, 孙子,重孙子...

3. 写法: 空格

4. 子代

5. 作用: 选择儿子标签

6. 写法: > 并集

7. 作用: 选中多组标签设置相同的样式

8. 写法: 逗号 交集

9. 作用: 既选中是某个标签又选中对应的类

10. 写法: 连着写 div.box

11. 伪类

12. 作用: 鼠标悬停状态

13. 写法: :hover

字体和文本样式

字体样式

1. 字体大小：font-size
2. 字体粗细：font-weight
3. 字体样式：font-style
4. 字体类型：font-family
5. 字体类型：font属性连写

文本样式

1. 文本缩进：text-indent
2. 文本水平对齐方式：text-align
3. 文本修饰：text-decoration

行高

• 作用：控制一行的上下行间距
• 属性名：line-height
• 取值：
• 数字+px
• 倍数（当前标签font-size的倍数）
• 应用：
• 让单行文本垂直居中可以设置 line-height : 文字父元素高度
• 网页精准布局时，会设置 line-height : 1 可以取消上下间距
• 行高与font连写的注意点：
• 如果同时设置了行高和font连写，注意覆盖问题
• font : style weight size/line-height family ;