目录
前言
一、CSS引入方式
1.内联样式（Inline Style）
2.内部样式表（Internal Style Sheet）
3.外部样式表（External Style Sheet）
4.导入样式表（@import）
5.引入方式对比
6.总结
三、字体修饰属性
1. 字体大小 font-size
2. 字体粗细 font-weight
3. 字体样式 font-style
4. 字体族 font-family
5. 字体简写 font
四、文本修饰属性
1. 首行缩进 text-indent
2. 文本对齐 text-align
3. 文本装饰线 text-decoration
4. 文字颜色 color
5. 其他相关属性
五、总结
前言
CSS（层叠样式表）是用于描述网页外观和格式的核心技术。
CSS基本结构：
选择器 {属性: 值;属性: 值;
}-
选择器：定位HTML元素（如
p、.class、#id）。 -
属性和值：定义样式规则（如
color: red;）。
一、CSS引入方式
1.内联样式（Inline Style）
定义：直接在 HTML 元素的 style 属性中编写 CSS 样式。
语法：
<p style="color: red; font-size: 16px;">这是一个段落。</p>特点：
-
优先级最高：内联样式优先级高于其他引入方式。
-
作用范围：仅对当前元素生效。
-
优点：适合快速测试或覆盖特定样式。
-
缺点：难以维护，代码冗余，不利于复用。
2.内部样式表（Internal Style Sheet）
定义：在 HTML 文件的 <head> 标签内使用 <style> 标签定义 CSS 样式。
语法：
<head><style>p {color: blue;font-size: 18px;}</style>
</head>
<body><p>这是一个段落。</p>
</body>特点：
-
优先级：低于内联样式，高于外部样式表。
-
作用范围：对当前 HTML 文件中的所有匹配元素生效。
-
优点：适合单页面样式管理，无需额外 HTTP 请求。
-
缺点：无法复用，多个页面需重复编写。
3.外部样式表（External Style Sheet）
定义：将 CSS 样式写入独立的 .css 文件，通过 <link> 标签引入 HTML 文件。
语法：
-
CSS 文件（styles.css）：
p {color: green;font-size: 20px; } -
HTML 文件：
<head><link rel="stylesheet" href="styles.css"> </head> <body><p>这是一个段落。</p> </body>
特点：
-
优先级：低于内联样式和内部样式表。
-
作用范围：对所有引入该样式表的 HTML 文件生效。
-
优点：
-
复用性强：多个页面共享同一份样式。
-
维护方便：样式与结构分离，便于管理。
-
缓存优化：浏览器缓存 CSS 文件，提升加载速度。
-
-
缺点：需要额外的 HTTP 请求。
4.导入样式表（@import）
定义：在 CSS 文件或 <style> 标签中使用 @import 引入外部样式表。
语法：
-
在 CSS 文件中引入：
@import url("styles.css"); -
在 HTML 文件中引入：
<style>@import url("styles.css"); </style>
特点：
-
优先级：与外部样式表相同。
-
作用范围：对引入该样式表的文件生效。
-
优点：适合模块化加载样式。
-
缺点：
-
性能问题：
@import是同步加载，可能阻塞页面渲染。 -
兼容性：部分旧浏览器不支持。
-
5.引入方式对比
| 引入方式 | 优先级 | 作用范围 | 复用性 | 性能 | 适用场景 |
|---|---|---|---|---|---|
| 内联样式 | 最高 | 当前元素 | 无 | 无额外请求 | 快速测试、覆盖特定样式 |
| 内部样式表 | 中 | 当前 HTML 文件 | 无 | 无额外请求 | 单页面样式管理 |
| 外部样式表 | 低 | 所有引入的 HTML 文件 | 高 | 需额外请求 | 多页面共享样式 |
| 导入样式表 | 低 | 引入该样式表的文件 | 中 | 可能阻塞渲染 | 模块化加载样式 |
6.总结
-
优先使用外部样式表：
-
样式与结构分离，便于维护和复用。
-
利用浏览器缓存提升性能。
-
-
避免滥用内联样式：
-
内联样式优先级高，难以覆盖，且不利于维护。
-
-
慎用 @import：
-
推荐使用
<link>标签替代@import，避免阻塞渲染。
-
-
模块化 CSS：
-
将样式按功能或组件拆分为多个文件，通过
<link>引入。
-
二、字体修饰属性
1. 字体大小 font-size
-
作用：定义文本大小。
-
常用值：
-
绝对单位：
px（像素）、pt（点）。 -
相对单位：
em（相对于父元素）、rem（相对于根元素）。 -
关键字：
small、medium（默认）、large。
-
-
示例：
p {font-size: 16px; }
2. 字体粗细 font-weight
-
作用：控制文本粗细。
-
常用值：
-
关键字：
normal（默认）、bold（加粗）。 -
数值：
100（细）到900（粗，步长 100）。
-
-
示例：
.bold-text {font-weight: 700; /* 等同于 bold */ }
3. 字体样式 font-style
-
作用：定义文本倾斜。
-
常用值：
-
normal：正常。 -
italic：斜体（使用字体库中的斜体字形）。 -
oblique：强制倾斜（无斜体字体时模拟）。
-
-
示例：
em {font-style: italic; }
4. 字体族 font-family
-
作用：指定字体名称列表（后备机制）。
-
语法：
font-family: 字体1, 字体2, 通用字体族; -
通用字体族：
-
serif（衬线体，如 Times New Roman）。 -
sans-serif（无衬线体，如 Arial）。 -
monospace（等宽字体，如 Courier New）。
-
-
示例：
body {font-family: "Helvetica Neue", Arial, sans-serif; }
5. 字体简写 font
-
作用：合并多个字体属性。
-
顺序：
font: style weight size/line-height family; -
必填项：
size和family。 -
示例：
p {font: italic 500 18px/1.5 "Segoe UI", sans-serif; }
三、文本修饰属性
1. 首行缩进 text-indent
-
作用：定义段落首行缩进。
-
常用值：
px、em（推荐相对单位）。 -
示例：
p {text-indent: 2em; /* 缩进两个字符宽度 */ }
2. 文本对齐 text-align
-
作用：控制文本水平对齐方式。
-
常用值：
-
left（左对齐，默认）。 -
right（右对齐）。 -
center（居中）。 -
justify（两端对齐）。
-
-
示例：
.center-text {text-align: center; }
3. 文本装饰线 text-decoration
-
作用：添加下划线、删除线等。
-
语法：
text-decoration: line style color; -
常用值：
-
line：underline（下划线）、line-through（删除线）。 -
style：solid（实线）、dotted（点线）。 -
color：颜色值。
-
-
示例：
a {text-decoration: underline wavy red; /* 红色波浪下划线 */ }
4. 文字颜色 color
-
作用：定义文本颜色。
-
表示方法：
-
颜色名：
red、blue。 -
十六进制：
#FF0000（红色）。 -
RGB/RGBA：
rgb(255,0,0)、rgba(255,0,0,0.5)（带透明度）。 -
HSL/HSLA：
hsl(0, 100%, 50%)（色调、饱和度、亮度）。
-
-
示例：
.warning {color: #ff0000; /* 红色警告文本 */ }
5. 其他相关属性
-
行高
line-height：控制行间距（如line-height: 1.5;）。 -
字母间距
letter-spacing：调整字符间距（如letter-spacing: 2px;）。 -
文本转换
text-transform：控制大小写（uppercase、lowercase、capitalize）。
四、总结
u