CSS 基础
CSS（层叠样式表）用于控制网页的外观和布局。CSS 规则由选择器和声明块两部分组成：
h1 {
color: red;
background-color: lightblue;
text-align: center;
}选择器
选择器用于定位要应用样式的 HTML 元素。常见的选择器类型包括：
- 元素选择器：直接选择 HTML 标签（如
h1,p,div） - ID 选择器：使用
#符号选择特定 ID 的元素（如#header） - 类选择器：使用
.符号选择特定类的元素（如.container）
声明块
声明块包含在大括号 {} 中，由多个样式声明组成。每个声明由属性和值组成，以分号 ; 结束。
CSS 代码书写位置
CSS 可以在三个不同位置添加到 HTML 中：
内部样式表：在 HTML 文档的
<head>部分，使用<style>元素<head> <style> h1 { color: blue; } </style> </head>内联样式表：直接添加到 HTML 元素的
style属性中<h1 style="color: blue;">标题</h1>外部样式表[推荐]：将 CSS 代码放在单独的
.css文件中，然后通过<link>元素引入<head> <link rel="stylesheet" href="styles.css"> </head>
外部样式表的优势：
- 解决多页面样式重复问题
- 有利于浏览器缓存，提高页面响应速度
- 实现代码分离（HTML 和 CSS），更易于阅读和维护
常见样式声明
1. 文本颜色与背景
color
控制元素内部文字的颜色。
颜色值表示法：
- 预设值：使用定义好的颜色名称（如
red,blue,green） - RGB 表示法：
rgb(红, 绿, 蓝)，每个值范围为 0-255 - 十六进制表示法：
#RRGGBB或简写形式#RGB
常见颜色十六进制值：
- 淘宝红：
#ff4400或#f40 - 黑色：
#000000或#000 - 白色：
#ffffff或#fff - 红色：
#ff0000或#f00 - 绿色：
#00ff00或#0f0 - 蓝色：
#0000ff或#00f - 紫色：
#ff00ff或#f0f - 青色：
#00ffff或#0ff - 黄色：
#ffff00或#ff0 - 灰色：
#cccccc或#ccc
background-color
设置元素的背景颜色。
2. 字体样式
font-size
控制文字的大小。
单位：
- px：像素，绝对单位
- em：相对单位，相对于父元素的字体大小
- rem：相对单位，相对于根元素的字体大小
每个元素必须有字体大小，如果没有声明，则继承父元素的字体大小。若没有父元素（如 html），则使用浏览器的基准字号（通常为 16px）。
em 单位示例：
<div style="font-size: 16px;">
<p style="font-size: 1.5em;">这段文字大小为 24px (16px × 1.5)</p>
</div>em 单位具有层叠计算的特性：
<div style="font-size: 16px;">
<div style="font-size: 1.5em;"> <!-- 24px (16px × 1.5) -->
<div style="font-size: 1.5em;"> <!-- 36px (24px × 1.5) -->
文本
</div>
</div>
</div>font-weight
控制文字的粗细程度。
可以使用：
- 数值：100-900（400 为正常，700 为粗体）
- 预设值：
normal,bold,lighter,bolder
注意：<strong> 元素默认应用粗体样式。
font-family
指定文字的字体类型。
可以指定多个字体，浏览器会按顺序尝试使用：
font-family: "Helvetica Neue", Arial, sans-serif;最后应添加通用字体族作为后备：
serif：衬线字体sans-serif：非衬线字体monospace：等宽字体cursive：草书字体fantasy：装饰字体
font-style
控制字体样式，常用来设置斜体：
normal：正常italic：斜体oblique：倾斜体
注意：<i> 和 <em> 元素默认样式是斜体。在现代 Web 开发中，<i> 元素常用于表示图标。
3. 文本布局
text-decoration
文本修饰，用于添加下划线、删除线等：
none：无装饰（常用于移除链接的下划线）underline：下划线line-through：删除线overline：上划线
相关 HTML 元素：
<a>元素默认带有下划线<del>元素用于表示错误的内容<s>元素用于表示过期的内容
text-indent
控制首行文本缩进。常用值：
2em：缩进两个字符20px：缩进 20 像素
line-height
控制行高，即每行文本的高度。该值越大，行间距越大。
设置方式：
- 绝对单位：
line-height: 24px; - 相对单位：
line-height: 1.5em; - 无单位数值（推荐）：
line-height: 1.5;
无单位数值会被子元素继承为一个比例而非固定值，更适合响应式设计。
技巧：设置行高等于容器高度可以实现单行文本垂直居中。
letter-spacing
控制字符间的间距。
text-align
控制文本的水平对齐方式：
left：左对齐right：右对齐center：居中对齐justify：两端对齐
4. 元素尺寸
width
设置元素的宽度。
height
设置元素的高度。
总结
外部样式表是组织 CSS 代码的最佳方式，它提高了代码的可维护性并支持浏览器缓存。在响应式设计中，相对单位（如 em）比绝对单位（如 px）更为灵活。