文章目录
- 1.选择器
-
- [1.1 分类](#1.1 分类)
-
- [1.1.1 基础选择器](#1.1.1 基础选择器)
- [1.1.2 关系选择器](#1.1.2 关系选择器)
- [1.1.3 分组/并集选择器](#1.1.3 分组/并集选择器)
- [1.1.4 伪类和伪元素选择器](#1.1.4 伪类和伪元素选择器)
-
- [1.1.4.1 伪类选择器（:）](#1.1.4.1 伪类选择器（:）)
- [1.1.5.1 伪元素选择器（::）](#1.1.5.1 伪元素选择器（::）)
- [1.1.5 属性选择器（[]）](#1.1.5 属性选择器（[]）)
- 2.文本样式
-
- [2.1 分类](#2.1 分类)
- [2.2 简写和继承](#2.2 简写和继承)
- [3. 三大特性](#3. 三大特性)
- [4. 盒子模型](#4. 盒子模型)
-
- [4.2 圆角边框](#4.2 圆角边框)
- [4.3 外边距](#4.3 外边距)
- [4.4 尺寸计算 box-sizing](#4.4 尺寸计算 box-sizing)
- [4.5 背景](#4.5 背景)
CSS：层叠样式表。
往期文章~
1、 前端+AI：HTML5语义标签（一）
1.选择器
1.1 分类
1.1.1 基础选择器
- 类型/标签选择器
- 类选择器
- id选择器：唯一的（主要搭配js使用）
- 通配符选择器：*
1.1.2 关系选择器
- 后代选择器：中间 空格 隔开
- 子代选择器：中间 > 拼接
- 邻接兄弟选择器：中间 + 拼接
- 通用兄弟选择器：中间 ~ 拼接 (后面所有的p元素)
1.1.3 分组/并集选择器
不同的选择器组合在一起。使用逗号（,）分割。
1.1.4 伪类和伪元素选择器
1.1.4.1 伪类选择器（:）
使用冒号（:），选择元素的特定状态或结构位置
-
状态伪类：根据用户交互或状态变化选择。
- 链接伪类：根据链接的不同状态。
- 结构伪类：根据元素位置选择。
- 表单伪类：针对表单元素的状态。
使得checkbox选中后，协议样式改变。
| 链接伪类（LVHA顺序） | 作用 |
|---|---|
| a:link | 未访问 |
| a:visited | 已访问 |
| a:hover | 鼠标悬停 |
| a:active | 点击 |
| 结构伪类 | 作用 |
|---|---|
| :first-child | 一组兄弟元素中的第一个元素 |
| :last-child | 一组兄弟元素中的最后一个 |
| :nth-child(n)n可以是数字（从1开始）、关键字（odd奇数，even偶数）、公式（如3n，n+2，公式的n从0开始）。 | 一组兄弟元素列表中第n个元素 |
分享一个小技巧
1、强制查看hover的样式。找到该元素，右键该元素，然后选择Force state，即可查看hover的样式。
2、快速定位到某个元素的样式：鼠标放到需要查看样式的元素身上，按住快捷键Ctrl + Shift + c即可。
1.1.5.1 伪元素选择器（::）
选择元素的特定部分。
使用场景：
- 让表单的placeholder文字改变颜色。
- 做装饰效果。
| 伪元素选择器 | 作用 |
|---|---|
| ::first-line | 选择首行 |
| ::first-letter | 首字母 |
| ::placeholder | 选择input或者textarea占位符 |
| ::before | 元素内插入伪元素，作为第一个元素 |
| ::after | 元素内插入伪元素，作为最后一个元素 |
1.1.5 属性选择器（[]）
❗ 属性$=值，属性^=值，不能匹配数字。
2.文本样式
2.1 分类
- 字体样式
- text-decoration：设置文本的装饰效果（下划线、删除线）
- 字体布局
- 文本对齐：text-align，justify，两端对齐
- 首行缩进：text-indent：2em（em：字体的大小）
- 字间距：letter-spacing，设置文本字符的间距
- 行高：行高等于盒子高度，可以让单行文本垂直居中。
2.2 简写和继承
font简写：font-style font-weight font-size/line-hight font-family
3. 三大特性
- 继承性： 继承的权重是0。h标签默认加粗、a标签默认有下划线等，这些不能通过继承父亲属性修改样式。只能自己去修改。
- 层叠性：就近原则
- 优先级
4. 盒子模型
4.2 圆角边框
- 胶囊按钮：设置圆角为宽度/高度（较小的值）的一半。
- 圆角：正方形宽度的一半
4.3 外边距
- 外边距折叠：并列关系的区块元素，上下两个外边距将合并为一个外边距。其大小等于最大的单个外边距。
- 外边距塌陷：嵌套关系的区块元素，给子盒子设置上下外边距会让父盒子塌陷移动。
- 解决方案：给父盒子添加上边框
- 给父盒子添加上内边距
- 给父盒子添加**overflow:hidden;**属性
4.4 尺寸计算 box-sizing
| 属性值 | 描述 |
|---|---|
| content-box | 默认值。元素的 width 和 height 仅包含内容区域，不包含 padding 和 border。理解： width = 内容的宽度 |
| border-box | 元素的 width 和 height 包含内容、padding和 border。理解： width = border + padding + 内容的宽度 |
4.5 背景
backgroun-attachment 值为fixed时，当前图片是根据页面视口（窗口）大小固定。
背景复合写法：颜色 图片 重复 固定 位置/尺寸；（顺序无关）
- 背景渐变（background / backgroud-image）
- 线性渐变（linear-gradient）：方向可控
- 方向：方位名词、角度（deg）
- 位置：色标的位置（不是必须写）
- 文字渐变 ：
backgroud-clip：text; 背景裁剪，以文字的形式裁剪。
text-fill-color:transparent;文字填充颜色为透明。
- 径向渐变（radial-gradient）：形状和位置可控
todo:视差滚动
详细 CSS 笔记~，更适合新手宝子学习。创作不易，请给个免费的小关小注+点赞 💖
以下笔记均是作者初次学习印象笔记做的笔记~
- [面试]文本、背景、边框属性、背景图固定、列表符号、浮动
- 盒模型padding,边框,margin属性,margin的bug
- 元素类型及元素类型转换、隐藏元素、css属性继承
- [面试]宽、高度自适应、一屏页面、溢出属性、高度塌陷、伪元素
- [面试]表单,表格新增,img底部3px,定位,定位叠放次序z-index,定位补充
- HTML:第二周总结
- 绝对定位属性水平垂直居中
- 粘性定位，锚点，css3属性(盒子、文本阴影，圆角，背景图大小、裁切、原点)，层级选择器、结构性伪类
- c3伪类状态选择器、属性选择器和目标伪类，h5新增标签，怪异盒模型，渐变
- 弹性盒父元素，弹性盒属性，过渡属性
- 弹性盒子元素，自适应布局，BFC和高度塌陷，变形位移
- 位移，位移居中，旋转，立方体
- 缩放，倾斜，动画，响应式布局
- 字体图标的使用，meta和dpr，单位，vw和vh
- 移动端补充内容
- 传统布局方式,PS切图,css书写顺序,网页制作步骤,导航栏书写注意
- 精灵图,css用户界面模式,图片和文字的垂直居中,常见布局技巧,HTML5的新特性,CSS3新增特性,模块化开发
- 电商首页类名,logo SEO优化制作,鼠标经过li的盒子出现抖动，将原来的边框设置为透明色，注册页面
- 服务器,将项目上传至远程服务器
- VS Code,HTML5
- 浏览器私有前缀,移动端开发(流式、flex、less+rem+媒体查询、混合、响应式布局