20、CSS 样式基础与布局全解析

CSS 样式基础与布局全解析

1. CSS 样式基础

在网页设计中，CSS 样式基础是至关重要的，它涉及到众多关键概念和属性的运用。

1.1 单位的选择

在 CSS 里，单位分为绝对单位和相对单位。绝对单位如像素（px）和英寸（in），相对单位如百分比（%）和 em。下面是它们的对比表格：
| 单位类型 | 示例 | 特点 |
| ---- | ---- | ---- |
| 绝对单位 | px、in | 固定大小，不受其他元素影响 |
| 相对单位 | %、em | 大小会根据父元素或其他相关元素变化 |

在实际应用中，要根据具体情况选择合适的单位。比如在需要固定尺寸的元素上可以使用绝对单位，而在需要根据页面大小自适应的元素上则选择相对单位。

1.2 常见属性的影响

网站中常见的属性，如字体、颜色、透明度、行高和背景等，对网站的整体观感有着重大影响。
- 字体 ：不同的字体给人的感觉不同，例如为殡仪馆网站选择过于花哨的字体就不合适。
- 颜色 ：除了选择美观的调色板，还需考虑颜色的透明度，以营造不同的视觉效果。
- 行高 ：当使用大而粗的下划线，或者书写诗歌等需要增加行间距的文本时，行高属性就派上用场了。行高的取值可以是“normal”，也可以是具体的值，如倍数、em、% 或 px。例如：

p {
    line-height: 200%;
}