17、网页样式与文档对象模型的深入解析

网页样式与文档对象模型的深入解析

1. CSS 样式表基础

1.1 样式表单位

CSS 样式表属性支持多种单位，以下是常见的几种：
| 单位 | 说明 | 示例 |
| — | — | — |
| px | 像素，计算机屏幕或其他设备上可寻址的最小单位。在某些非典型分辨率的设备上，浏览器可能会重新缩放该值以适应设备。 | 15px |
| pt | 点，是字体大小的标准单位。指定点大小的文本大小会根据显示器分辨率而变化，1 点等于 1/72 英寸。 | 10pt |
| ex | 当前字体中字母 x 的近似高度。 | 1.2ex |
| em | 当前字体中字母 m 的近似宽度，通常等于当前元素的 font - size 属性。 | 1.5em |
| % | 包含对象值的百分比。 | 150% |

选择使用哪种单位通常取决于便利性。例如，点大小常用于字体，像素单位用于图层或其他对象的大小和位置等。

1.2 创建简单样式表

下面是一个使用 CSS 创建具有多种样式的网页示例：
- 整个页面主体文本颜色为蓝色。
- 段落居中显示，左右两侧有较宽的边距。
- 一级、二级和三级标题颜色为红色。
- 无序列表默认加粗且为绿色。

以下是定义这些属性的 CSS 样式表代码：

<style type="text/css">
    BODY {color: blue}
    P {text-align: center;