CSS杂记:持续更新

aria- 开头的标签表示什么

Html 标签中以 aria- 开头的属性是什么？ - 知乎 (zhihu.com)

辅助性的作用，增强web的健壮性，帮助残障人士访问web（eg: aria-label帮助屏幕阅读器识别元素是什么）

长度单位

• 简明清单
  在 CSS 中，长度单位用于指定元素的尺寸或位置。以下是常见的 CSS 长度单位：

1. px（像素）：像素是相对于显示器屏幕上的一个点的单位。它是 CSS 中最常见的长度单位，通常用于固定尺寸的元素。
2. em：em 是相对于元素自身的字体大小的单位。1em 等于元素的字体大小。例如，如果一个元素的字体大小为 16px，那么 1em 就等于 16px。
3. rem：rem 也是相对于根元素（html）的字体大小的单位。与 em 不同，rem 不会受到父元素字体大小的影响，它始终相对于根元素的字体大小。这使得 rem 更适合用于构建响应式布局。
4. %（百分比）：百分比单位表示相对于父元素的长度。例如，如果父元素的宽度为 200px，子元素的宽度设为 50%，则子元素的宽度将为 100px。
5. vw（视口宽度的百分比）：vw 表示视口宽度的百分比。例如，1vw 等于视口宽度的 1%。
6. vh（视口高度的百分比）：vh 表示视口高度的百分比。例如，1vh 等于视口高度的 1%。
7. pt（点）：点是印刷行业中常用的长度单位，1pt 等于 1/72 英寸。
8. cm（厘米）：厘米是国际标准长度单位，1cm 等于 10 毫米。
9. mm（毫米）：毫米是国际标准长度单位，1mm 等于 1/10 厘米。
10. in（英寸）：英寸是美国和英国常用的长度单位，1英寸等于 2.54 厘米。
11. pc（派卡）：派卡是印刷行业中常用的长度单位，1pc 等于 12 点。

cursor设置鼠标样式

• 在 CSS3 中，cursor 属性用于设置鼠标指针在悬停在元素上时的样式。以下是常用的 cursor 属性值：
  1. auto: 浏览器自动决定光标的类型。
  2. default: 默认光标，通常是一个箭头。
  3. pointer: 手指指向链接时的光标。
  4. move: 表示可以移动的指示光标。
  5. text: 文本光标，通常是一条竖线。
  6. wait: 表示等待的指示光标，通常是一个旋转的圆圈或沙漏。
  7. help: 帮助指示光标，通常是一个问号。
  8. progress: 表示一个操作正在进行的指示光标，通常是一个旋转的圆圈。
  9. crosshair: 十字线光标，用于表明选择某个区域。
  10. not-allowed: 表示不允许操作的指示光标，通常是一个圆圈和一条斜线。
  11. e-resize: 东（右）边界调整光标。
  12. ne-resize: 东北（右上）角边界调整光标。
  13. nw-resize: 西北（左上）角边界调整光标。
  14. n-resize: 北（上）边界调整光标。
  15. se-resize: 东南（右下）角边界调整光标。
  16. sw-resize: 西南（左下）角边界调整光标。
  17. s-resize: 南（下）边界调整光标。
  18. w-resize: 西（左）边界调整光标。
  19. text: 表示文本的光标，通常是一条竖线。
  20. vertical-text: 垂直文本的光标。
  21. alias: 表示要求选择的指示光标，通常是一对箭头。
  22. all-scroll: 表示可移动的指示光标，通常是四个箭头。
  23. cell: 表示表格单元的指示光标。
  24. context-menu: 表示上下文菜单的指示光标，通常是一个小菜单图标。
  25. copy: 表示复制的指示光标，通常是两个重叠的矩形。
  26. grab: 表示可以抓取的指示光标，通常是一个手的形状。
  27. grabbing: 表示正在抓取的指示光标，通常是一个拳头的形状。
  28. not-allowed: 表示不允许操作的指示光标，通常是一个圆圈和一条斜线。
  29. zoom-in: 表示可缩放进的指示光标，通常是一个加号。
  30. zoom-out: 表示可缩放出的指示光标，通常是一个减号。

在项目中使用艺术字体

• 首先需要获取所需的艺术字体文件（通常是 .ttf 或 .otf 格式）

  1. 将字体文件添加到项目中： 将下载的艺术字体文件（如 .ttf 或 .otf 文件）放置在项目的合适目录中，例如 /fonts 文件夹。

  2. 在 CSS 中使用 @font-face： 使用 @font-face 规则将字体文件引入到 CSS 中，并为字体指定一个自定义的名称。

     cssCopy code
     @font-face {
       font-family: 'MyCustomFont';
       src: url('/fonts/MyCustomFont.ttf') format('truetype');
       /* 添加其他格式的字体文件路径和格式 */
     }
     

     在 src 属性中指定字体文件的路径，并使用 format 指定字体文件的格式。

  3. 应用字体样式： 使用 font-family 属性将定义的字体应用到元素上。

     cssCopy code
     .artistic-text {
       font-family: 'MyCustomFont', sans-serif; /* 使用自定义的艺术字体，并设置后备字体 */
       /* 添加其他字体样式，如字号、颜色等 */
     }
     

     在需要应用艺术字体的元素上添加对应的类名，然后使用 font-family 属性将自定义的字体应用到该元素上。