【前端(三)】CSS 属性梳理：从字体文本到背景表格

文章目录

前言
[1. CSS 三大特性](#1. CSS 三大特性)
- [1.1 层叠性](#1.1 层叠性)
- [1.2 继承性](#1.2 继承性)
- [1.3 优先级](#1.3 优先级)
[2. CSS字体属性（Font）](#2. CSS字体属性（Font）)
[3. CSS 文本属性（Text）](#3. CSS 文本属性（Text）)
- [3.1 line-height 详解](#3.1 line-height 详解)
[4. CSS 列表属性（List）](#4. CSS 列表属性（List）)
[5. CSS 表格属性（Table）](#5. CSS 表格属性（Table）)
- [5.1 边框通用属性（可用于任何元素）](#5.1 边框通用属性（可用于任何元素）)
- [5.2 表格专用属性（仅 `<table>` 标签使用）](#5.2 表格专用属性（仅 <table> 标签使用）)
[6. CSS 背景属性（Background）](#6. CSS 背景属性（Background）)
[7. CSS 鼠标属性（Cursor）](#7. CSS 鼠标属性（Cursor）)
[8. 属性复合写法总结](#8. 属性复合写法总结)
[9. 补充知识](#9. 补充知识)
- [9.1 CSS 长度单位](#9.1 CSS 长度单位)
- [9.2 CSS 颜色表示](#9.2 CSS 颜色表示)

前言

上一篇笔记我们学习了 CSS 的选择器，这一章我们将聚焦于声明块中的属性与属性值，学习如何通过 CSS 属性来精细控制页面的外观。

1. CSS 三大特性

1.1 层叠性

如果多个选择器对元素的同一个样式名 设置了不同的值 ，就会发生样式冲突。此时浏览器会根据选择器的优先级来决定使用哪个样式，这个过程就叫层叠。

1.2 继承性

元素如果自身设置 了某个样式，就使用自身的样式；如果自身没有设置 ，会从父元素开始一级一级向上继承（优先继承离得近的祖先元素）。

会被继承的属性 ：字体属性（font-）、文本属性（text-，除了 vertical-align）、文字颜色（color）等。
不会被继承的属性：宽高（width/height）、边框（border）、内外边距（margin/padding）、背景（background）、溢出方式（overflow）等。

总结：能继承的属性，通常都是不影响盒子布局的、与盒模型无关的样式。

1.3 优先级

当多个选择器选中同一个元素且定义了同一个样式时，最终生效的样式由优先级决定。优先级从高到低依次为：

!important > 行内样式 > ID选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器 > 通配符* > 继承的样式

详细请看前端知识二的选择器优先级部分

补充：并集选择器的每一个部分是分开算的！

权重计算：

行内样式：(1,0,0,0)
ID选择器：(0,1,0,0)
类/伪类/属性选择器：(0,0,1,0)
元素/伪元素选择器：(0,0,0,1)
通配符*、组合器（>、+等）、否定伪类:not()：不增加权重

注意：

并集选择器中的每个选择器是分开计算的。例如 p, .box, #id 的权重分别是 (0,0,0,1)、(0,0,1,0)、(0,1,0,0)，互不影响。

!important 会覆盖任何普通声明，但一般不推荐滥用，否则会破坏样式层叠的自然规则。

2. CSS字体属性（Font）

属性	作用	常用值	示例
`font-family`	设置字体族，即控制字体类型	具体字体名（如 `"微软雅黑"`）、通用字体族（如 `sans-serif`）	`font-family: "微软雅黑", "苹方", Arial, sans-serif;`
`font-size`	设置字体大小	`px`（像素） `em`（相对父元素） `rem`（相对根元素） `%` 等	`font-size: 16px;`
`font-weight`	设置字体粗细	关键词：`normal`（默认）、`bold`（加粗）、`lighter` (细)、`bolder`(很粗）[有些字体不支持] 数值：100 ~1000 且无单位，数值越大，字体越粗，100~300 等同于 lighter ， 400~500 等同于 normal ， 600 及以上等同于bold 。	`font-weight: bold;` 或 `font-weight: 700;`
`font-style`	设置字体样式	`normal`（正常）、`italic`（斜体）、`oblique`（倾斜）	`font-style: italic;`

注意点：

font-size ：
- 浏览器会默认文字大小，最小文字大小等，并且0px会自动消失。
- 浏览器有默认文字大小，不同浏览器可能不一致，建议给 body 明确设置 font-size，其他元素通过继承获得。
font-family ：
- Windows 系统默认字体为"微软雅黑"，macOS 默认"苹方"。
- 建议使用字体的英文名称，兼容性更好。具体的英文名可以自行查询，或在电脑的设置里去寻找。
- 可以设置多个字体作为备选，浏览器从左到右查找，找到第一个存在的字体即使用。最后通常加一个通用字体族 serif （衬线字体）或 sans-serif （非衬线字体），确保用户设备至少能显示一种合适的字体。

字体复合写法

可以在一行中同时设置多个字体属性，顺序有要求：

css 复制代码

font: italic 700 16px/1.5 "微软雅黑", sans-serif;

注意点：

font-size 和 font-family 是必须指定的。
font-size 必须写在 font-family 之前，通常 font-size写在倒数第二位，font-family写在倒数第一位。
line-height 可选，紧跟在 font-size 后面，用 / 分隔。

小知识 ：

不同的字体都是由不同的设计师设计的。在设计文字的时候，每个文字都会有自己的基框，但是文字如何在基框里面分布就是设计师所决定的。有些文字可能会超出基框，所以我们有时候就会看见一些字体显示的时候存在上下重叠的情况。

所以font-size 设置的是文字的基框高度 ，并非文字实际占用的高度。不同字体在设计时可能有不同的上下留白，因此即使 font-size 相同，不同字体看起来大小也可能不一样。

bolder 如果不起作用，是因为该字体没有设计更粗的字重。数值对应三种范围，这个三种也不是固定的，假如这种字体设计师出了10种粗细版本，那么数值呈现效果也可以分10类。

3. CSS 文本属性（Text）

属性	作用	常用值	示例
`color`	设置文字颜色	颜色名（`red`）、HEX（`#ff0000`）、RGB（`rgb(255,0,0)`）、HSL	`color: #333;`
`text-decoration`	设置文字装饰线	`none`（无）、`underline`（下划线）、`overline`（上划线）、`line-through`（删除线）可搭配如下值使用：1. dotted (虚线) 2. wavy (波浪线) 3. 也可以指定颜色	`text-decoration: underline wavy red ;`
`text-align`	设置文字水平对齐	`left`、`center`、`right`	`text-align: center;`
`text-indent`	设置首行缩进	`px`、`em`、`%` 等	`text-indent: 2em;`
`letter-spacing`	设置字符间距	`px`（正值为增加间距，负值为减少）	`letter-spacing: 2px;`
`word-spacing`	设置单词间距	`px` （正值为增加间距，负值为减少）	`word-spacing: 5px;`
`line-height`	设置行高（行距）	normal（默认）、px、无单位数字（相对自身 font-size，推荐）、%（相对自身 font-size）	`line-height: 60px;` `line-height: 1.5;` `line-height: 1.5;`
`vertical-align`	设置行内元素或表格单元格内容的垂直对齐	`baseline`（基线对齐默认）、`top`、`middle`、`bottom`	`vertical-align: middle;`

注意点：

letter-spacing 与 word-spacing
- letter-spacing 控制所有字符间距
- word-spacing 只控制单词间的间距，依赖空格。
- 对于中文，"上好佳"三个字不会因为 word-spacing 产生间距，letter-spacing可以。
vertical-align 的应用
它通常用于行内元素 （如 <span>、<img>）或表格单元格 （<td>）的垂直对齐。
- 当对一个行内元素（如 <span>、<img>）设置 vertical-align 时，它相对于同一行内的其他行内元素或父元素的基线进行对齐。
- 它生效的关键是：存在一个"行盒"作为对齐参考。如果元素没有父级（或父级内没有其他行内元素），单独一个行内元素设置 vertical-align 看起来没有效果，因为它没有参考对象。
- 常见场景 ：让图片和文字在同一行内居中对齐，可给图片设置 vertical-align: middle;。

html 复制代码

<div style="line-height: 50px;">
  <img src="icon.png" style="vertical-align: middle;"> 文字
</div>

3.1 line-height 详解

单位/值	参照物	特点与注意事项
`px`	绝对长度	固定像素值，不会随字体大小变化
无单位数字	当前元素的 `font-size`	推荐。子元素继承的是这个数字（倍数），而不是计算后的像素值。例如 `line-height: 1.5;`，子元素会用自己的 `font-size` × 1.5 作为行高，灵活性好，这也是为什么推荐使用无单位数字的原因。
`%`	当前元素的 `font-size`	例如 `line-height: 150%;`，如果当前 `font-size` 是 16px，则行高为 24px。但子元素继承的是计算后的像素值（24px），而不是百分比，可能导致子元素行高异常。
`em`	当前元素的 `font-size`	与 `%` 类似，`2em` 相当于 `200%`。子元素继承计算后的像素值。

关键点 ：% 和 em 作为长度单位时，其参照物取决于使用它们的属性 。[详情见 CSS 长度单位](#详情见 CSS 长度单位)

在 width、margin、padding 等属性中，% 通常参照父元素的宽度（或高度，取决于属性），而 em 参照当前元素的 font-size。

在 line-height 中，它们参照当前元素的 font-size。

因此，line-height: 150% 与 width: 50% 中的 % 含义完全不同，前者参照自身字体，后者参照父元素宽度。

继承差异举例：（为什么推荐使用无单位数字的原因）

css 复制代码

/* 父元素 */
.parent {
  font-size: 20px;
  line-height: 1.5;   /* 无单位数字，子元素继承数字 1.5 */
}
.child {
  font-size: 16px;
  /* 行高 = 16px * 1.5 = 24px */
}

css 复制代码

.parent {
  font-size: 20px;
  line-height: 150%;  /* 计算值 = 30px，子元素继承 30px */
}
.child {
  font-size: 16px;
  /* 行高 = 30px，而不是 16px * 1.5，可能过大 */
}

line-height 和 height 是什么关系 ？

设置了 height ，那么高度就是 height 的值；不设置 height 的时候，会根据 line-height 计算：line-height*行数
line-height 和 font-size

如果行高等于字体大小，而字体有些会超出基框，那么页面显示时可能就会有字重叠，所以浏览器normal默认情况给的是不重叠的行高。
应用场景：
1. 对于多行文字：控制行与行之间的距离。
2. 对于单行文字：让 height 等于 line-height ，可以实现文字垂直居中。

4. CSS 列表属性（List）

控制列表的图标显示

CSS 属性名	功能	属性值
`list-style-type`	设置列表符号	`none`：不显示前面的标识（很常用！） `square`：实心方块 `disc`：圆形 `decimal`：数字 `lower-roman`：小写罗马字 `upper-roman`：大写罗马字 `lower-alpha`：小写字母 `upper-alpha`：大写字母
`list-style-position`	设置列表符号的位置	`inside`：在 li 的里面 `outside`：在 li 的外边，默认
`list-style-image`	自定义列表符号	`url(图片地址)`
`list-style`	复合属性	没有数量、顺序的要求

列表示例：

css 复制代码

/* 去除默认列表样式（常用） */
ul, ol {
  list-style: none;
}

/* 自定义列表符号 */
li {
  list-style: url("icon.png") inside;
}

5. CSS 表格属性（Table）

5.1 边框通用属性（可用于任何元素）

CSS 属性名	功能	属性值
`border-width`	边框宽度	CSS 中可用的长度值
`border-color`	边框颜色	CSS 中可用的颜色值
`border-style`	边框风格	solid（实线）、dashed（虚线）、dotted（点线）、double（双实线）默认值为 none，因此必须设置 border-style 边框才能显示
`border`	边框复合属性	没有数量、顺序的要求

5.2 表格专用属性（仅 `<table>` 标签使用）

CSS 属性名	功能	属性值
`table-layout`	设置列宽度	`auto`：自动，列宽根据内容计算（默认值） `fixed`：固定列宽，平均分
`border-spacing`	单元格间距	CSS 中可用的长度值。生效的前提：单元格边框不能合并。
`border-collapse`	合并单元格边框	`collapse`：合并 `separate`：不合并
`empty-cells`	隐藏没有内容的单元格	`show`：显示，默认 `hide`：隐藏生效前提：单元格不能合并。
`caption-side`	设置表格标题位置	`top`：上面（默认值） `bottom`：在表格下面

常见疑问：这些属性必须写在表格标签上吗？

是的，以上 5 个属性只能应用于 <table> 元素。内部的 <tr>、<td>、<caption> 等标签不能单独使用这些属性，但可以通过继承获得部分效果（如 border-collapse 会继承给所有单元格）。

表格示例：

css 复制代码

table {
  border-collapse: collapse;   /* 合并边框 */
  width: 100%;
  table-layout: fixed;         /* 固定列宽，提高渲染速度 */
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

6. CSS 背景属性（Background）

边框相关属性，因为border-style默认值是none不显示边框，所以一定要设置了style设置其他次啊可以有显示吧？还是三个属性都必须写？

CSS 属性名	功能	属性值
`background-color`	设置背景颜色	符合 CSS 中颜色规范的值。默认背景颜色是 `transparent`。
`background-image`	设置背景图片	`url(图片的地址)`
`background-repeat`	设置背景重复方式	`repeat`：重复，铺满整个元素，默认值。 `repeat-x`：只在水平方向重复。 `repeat-y`：只在垂直方向重复。 `no-repeat`：不重复。
`background-size`	设置背景图片尺寸	`cover`（等比覆盖整个元素，可能裁剪）、`contain`（等比完全显示，可能留白）、长度/百分比
`background-position`	设置背景位置	通过关键字设置位置：写两个值，用空格隔开。水平：`left`、`center`、`right` 垂直：`top`、`center`、`bottom` 如果只写一个值，另一个方向的值取 `center`。通过长度指定坐标位置：以元素左上角为坐标原点，设置图片左上角的位置。两个值，分别是 x 坐标和 y 坐标。只写一个值，会被当做 x 坐标，y 坐标取 `center`。
`background`	复合属性	没有数量和顺序要求。

背景示例：

css 复制代码

/* 常用背景简写 */
.box {
  background: url("bg.jpg") no-repeat center/cover;
}

注意：背景图片默认会从元素左上角开始绘制，且会重复平铺 。如果只需要一张图片，务必设置 background-repeat: no-repeat;。

7. CSS 鼠标属性（Cursor）

CSS 属性名	功能	属性值
`cursor`	设置鼠标光标的样式	`pointer`：小手 `move`：移动图标 `text`：文字选择器 `crosshair`：十字架 `wait`：等待 `help`：帮助

8. 属性复合写法总结

CSS 中有许多属性支持简写（复合属性），这能大大减少代码量。但也有部分属性没有复合形式。为了便于记忆，我们总结如下：

分类	复合属性	说明
字体	`font`	复合写法有固定顺序：`style weight size/line-height family`。`size` 和 `family` 必须写。
列表	`list-style`	无顺序要求。
背景	`background`	无顺序要求，常用顺序：`color image repeat position/size`。
边框	`border`	无顺序要求，如 `border: 1px solid red;`
文本	无	文本相关属性（`color`、`text-align`、`text-decoration` 等）没有统一的复合写法，需要分开设置。
表格专用	无	`border-collapse`、`border-spacing`、`empty-cells` 等只能单独设置，没有复合属性。
外边距/内边距	`margin`、`padding`	支持上右下左四个方向的复合，如 `margin: 10px 20px;`。

注意：复合属性虽然方便，但要注意覆盖问题，不能滥用。比如 background 会重置所有背景相关属性，若只改颜色，最好用 background-color。

9. 补充知识

9.1 CSS 长度单位

单位	说明
`px`	像素，CSS 像素是一个逻辑单位，不是物理点。浏览器会根据屏幕的设备像素比（DPR）决定用几个物理像素显示 1 个 CSS 像素。
`em`	相对当前元素的 `font-size` 的倍数。如果用于 `font-size` 本身，则相对父元素的 `font-size`。
`rem`	相对根元素（`<html>`）的 `font-size` 的倍数。
`%`	相对父元素对应属性的百分比，不一定都是父元素的字体大小。例如 `width: 50%` 相对父元素的内容宽度，`line-height: 150%` 相对当前元素的 `font-size`。

当一个属性使用相对单位（如 %、em、rem等）时，浏览器会先根据当前元素的参照物计算出计算值，然后子元素继承这个计算值 ，而不是继承原来的相对单位。

css 复制代码

.parent {
  font-size: 20px;
  margin-left: 10%;   /* 假设父元素宽度 1000px，计算值 = 100px */
}
.child {
  /* 子元素 margin-left 继承的是 100px，而不是 10% */
}

概念说明举例

物理像素 屏幕上的实际发光点，是硬件的真实分辨率。一块屏幕标着 1920×1080 ，表示横向有 1920 个物理点，纵向 1080 个物理点。

CSS 像素 我们在代码里写的 px 单位，是一个逻辑单位，不是物理点。浏览器会根据设备情况，决定用几个物理点来显示 1 个 CSS 像素。 width: 100px; 这里的 px 就是 CSS 像素。

设备像素比（DPR）：DPR = 物理像素数 / CSS 像素数。它表示1 个 CSS 像素对应几个物理像素。例如 iPhone 6 的屏幕宽度是 750 物理像素，但 CSS 逻辑宽度为 375px，因此 DPR = 2。DPR 越高，屏幕显示越细腻。它是连接物理像素和 CSS 像素的桥梁，它保证了同样的 px 在不同设备上看起来物理大小差不多，同时让高分辨率屏幕显示更细腻。

概念	说明	举例
物理像素	屏幕上的实际发光点，是硬件的真实分辨率。	一块屏幕标着 1920×1080 ，表示横向有 1920 个物理点，纵向 1080 个物理点。
CSS 像素	我们在代码里写的 px 单位，是一个逻辑单位，不是物理点。浏览器会根据设备情况，决定用几个物理点来显示 1 个 CSS 像素。	width: 100px; 这里的 px 就是 CSS 像素。

9.2 CSS 颜色表示

表示法	格式	说明
颜色名	`red`、`blue` 等	直观但颜色数量有限。
RGB/RGBA	`rgb(255, 0, 0)` 或 `rgba(255, 0, 0, 0.5)`	红、绿、蓝各通道 0~255，`a` 表示透明度 0~1。
HEX/HEXA	`#ff0000` 或 `#ff0000ff`	6 位十六进制（每两位一组：红绿蓝），可简写为 `#f00`（每位重复时）。`#ff0000ff` 最后两位为透明度 0~255。
HSL/HSLA	`hsl(0, 100%, 50%)` 或 `hsla(0, 100%, 50%, 0.5)`	`h` 色相 0~360°，`s` 饱和度 0%~100%，`l` 亮度 0%~100%，`a` 透明度 0~1。

注意点：

若三种颜色值相同，呈现的是灰色，值越大，灰色越浅。 rgb(0, 0, 0) 是黑色， rgb(255, 255,255) 是白色。
对于 rbga 来说，前三位的 rgb 形式要保持一致，要么都是 0~255 的数字，要么都是百分比。
如果每种颜色的两位都是相同的，就可以简写，但要注意前三位简写了，那么透明度就也要简写。

css 复制代码

color:#ff998866;/*可简为：#f986*/

色相图：

以上为个人学习总结，旨在梳理个人理解。如有疏漏或不当之处，欢迎指正与交流。

【前端(三)】CSS 属性梳理：从字体文本到背景表格

文章目录

前言

1. CSS 三大特性

1.1 层叠性

1.2 继承性

1.3 优先级

2. CSS字体属性（Font）

3. CSS 文本属性（Text）

3.1 line-height 详解

4. CSS 列表属性（List）

5. CSS 表格属性（Table）

5.1 边框通用属性（可用于任何元素）

5.2 表格专用属性（仅 <table> 标签使用）

6. CSS 背景属性（Background）

7. CSS 鼠标属性（Cursor）

8. 属性复合写法总结

9. 补充知识

9.1 CSS 长度单位

9.2 CSS 颜色表示

5.2 表格专用属性（仅 `<table>` 标签使用）