CSS 教程

纯干货教学，从零开始学习 CSS

CSS 排版

学习 CSS 排版的基本概念、CSS 排版属性以及实际应用示例，掌握如何在 CSS 中设置和控制文本样式。

CSS 排版概述

CSS 排版是指通过 CSS 控制文本的字体、大小、粗细、行高、对齐方式等属性，以创建美观、易读的文本布局。良好的排版可以提高用户体验和内容的可读性。

CSS 字体属性

1. font-family

设置元素的字体系列。

/* 设置字体系列 */
.element {
    font-family: Arial, sans-serif;
}

/* 设置多个字体备选 */
.text {
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

/* 设置 serif 字体 */
.serif-text {
    font-family: "Times New Roman", Times, serif;
}

/* 设置 monospace 字体 */
.code {
    font-family: "Courier New", Courier, monospace;
}

2. font-size

设置元素的字体大小。

单位 描述 示例
px 像素，固定大小 font-size: 16px;
em 相对于父元素的字体大小 font-size: 1.2em;
rem 相对于根元素的字体大小 font-size: 1.1rem;
% 相对于父元素的字体大小的百分比 font-size: 120%;
vw 相对于视口宽度的百分比 font-size: 5vw;
vh 相对于视口高度的百分比 font-size: 3vh; 
/* 设置字体大小 */
.element {
    font-size: 16px;
}

/* 使用相对单位 */
.relative-size {
    font-size: 1.2em; /* 相对于父元素的 1.2 倍 */
}

/* 使用 rem 单位 */
.rem-size {
    font-size: 1.1rem; /* 相对于根元素的 1.1 倍 */
}

/* 使用视口单位 */
.viewport-size {
    font-size: 5vw; /* 视口宽度的 5% */
}

3. font-weight

设置元素的字体粗细。

值 描述
normal 默认值，正常粗细，等同于 400
bold 粗体，等同于 700
bolder 比父元素更粗
lighter 比父元素更细
100-900 数值表示的粗细，400 是 normal，700 是 bold 
/* 设置字体粗细 */
.element {
    font-weight: normal;
}

.bold-text {
    font-weight: bold;
}

.light-text {
    font-weight: 300;
}

.extra-bold {
    font-weight: 800;
}

4. font-style

设置元素的字体样式。

值 描述
normal 默认值，正常样式
italic 斜体
oblique 倾斜体，与 italic 类似但不是真正的斜体 
/* 设置字体样式 */
.element {
    font-style: normal;
}

.italic-text {
    font-style: italic;
}

.oblique-text {
    font-style: oblique;
}

5. font-variant

设置元素的字体变体。

值 描述
normal 默认值，正常变体
small-caps 小型大写字母 
/* 设置字体变体 */
.element {
    font-variant: normal;
}

.small-caps {
    font-variant: small-caps;
}

6. font

字体属性的简写，按顺序设置 font-style、font-variant、font-weight、font-size/line-height、font-family。

/* 使用 font 简写属性 */
.element {
    font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}

/* 最少需要设置 font-size 和 font-family */
.minimal {
    font: 14px Arial, sans-serif;
}

CSS 文本属性

1. line-height

设置元素的行高。

值 描述
normal 默认值，正常行高
number 数字，乘以字体大小得到行高
length 具体的长度值，如 px、em 等
% 相对于字体大小的百分比 
/* 设置行高 */
.element {
    line-height: normal;
}

.number-line-height {
    line-height: 1.5; /* 字体大小的 1.5 倍 */
}

.length-line-height {
    line-height: 24px;
}

.percent-line-height {
    line-height: 120%; /* 字体大小的 120% */
}

2. text-align

设置元素的文本对齐方式。

值 描述
left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐
justify-all 两端对齐，包括最后一行
start 根据文本方向对齐到起始位置
end 根据文本方向对齐到结束位置 
/* 设置文本对齐方式 */
.element {
    text-align: left;
}

.center-text {
    text-align: center;
}

.right-text {
    text-align: right;
}

.justify-text {
    text-align: justify;
}

3. text-decoration

设置元素的文本装饰。

值 描述
none 默认值，无装饰
underline 下划线
overline 上划线
line-through 删除线
blink 闪烁文本（已废弃） 
/* 设置文本装饰 */
.element {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.overline {
    text-decoration: overline;
}

.line-through {
    text-decoration: line-through;
}

/* 组合使用 */
.combined {
    text-decoration: underline overline;
}

/* 设置装饰的颜色、样式和厚度 */
.decorated {
    text-decoration: underline red wavy 2px;
}

4. text-transform

设置元素的文本转换。

值 描述
none 默认值，无转换
capitalize 首字母大写
uppercase 全部大写
lowercase 全部小写
full-width 全角显示
full-size-kana 全角假名 
/* 设置文本转换 */
.element {
    text-transform: none;
}

.capitalize {
    text-transform: capitalize;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

5. text-indent

设置元素的文本缩进。

/* 设置文本缩进 */
.element {
    text-indent: 2em;
}

.negative-indent {
    text-indent: -2em;
    padding-left: 2em;
}

.percent-indent {
    text-indent: 10%;
}

6. letter-spacing

设置元素的字母间距。

/* 设置字母间距 */
.element {
    letter-spacing: normal;
}

.wide-spacing {
    letter-spacing: 2px;
}

.tight-spacing {
    letter-spacing: -1px;
}

7. word-spacing

设置元素的单词间距。

/* 设置单词间距 */
.element {
    word-spacing: normal;
}

.wide-word-spacing {
    word-spacing: 10px;
}

.tight-word-spacing {
    word-spacing: -2px;
}

8. text-shadow

设置元素的文本阴影。

/* 设置文本阴影 */
.element {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 多重阴影 */
.multi-shadow {
    text-shadow: 2px 2px 4px red, -2px -2px 4px blue;
}

/* 模糊效果 */
.blur-shadow {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

9. text-align-last

设置元素最后一行的对齐方式。

/* 设置最后一行对齐方式 */
.element {
    text-align: justify;
    text-align-last: center;
}

.right-last {
    text-align: justify;
    text-align-last: right;
}

10. text-wrap

设置元素的文本换行方式。

/* 设置文本换行方式 */
.element {
    text-wrap: normal;
}

.balance {
    text-wrap: balance;
}

.stable {
    text-wrap: stable;
}

11. white-space

设置元素的空白处理方式。

/* 设置空白处理方式 */
.element {
    white-space: normal;
}

.pre {
    white-space: pre;
}

.nowrap {
    white-space: nowrap;
}

.pre-wrap {
    white-space: pre-wrap;
}

.pre-line {
    white-space: pre-line;
}

12. word-break

设置元素的单词换行方式。

/* 设置单词换行方式 */
.element {
    word-break: normal;
}

.break-all {
    word-break: break-all;
}

.keep-all {
    word-break: keep-all;
}

.break-word {
    word-break: break-word;
}

13. overflow-wrap

设置元素的长单词或 URL 的换行方式。

/* 设置长单词换行方式 */
.element {
    overflow-wrap: normal;
}

.break-word {
    overflow-wrap: break-word;
}

.anywhere {
    overflow-wrap: anywhere;
}

CSS 网页字体

1. @font-face 规则

使用 @font-face 规则可以加载自定义字体。

/* 加载自定义字体 */
@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2'),
         url('myfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 使用自定义字体 */
.element {
    font-family: 'MyFont', sans-serif;
}

2. 字体格式

格式 描述 浏览器支持
WOFF2 Web Open Font Format 2.0，压缩率最高 现代浏览器
WOFF Web Open Font Format 1.0 所有现代浏览器
TTF/OTF TrueType/OpenType 字体 大多数浏览器
SVG SVG 字体 旧版 iOS Safari
EOT Embedded OpenType 字体 旧版 IE

3. 字体服务

使用第三方字体服务可以方便地加载和使用网页字体。

/* 使用 Google Fonts */
/* 在 HTML 头部添加 */
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

/* 在 CSS 中使用 */
.element {
    font-family: 'Roboto', sans-serif;
}

/* 使用 Adobe Fonts */
/* 在 HTML 头部添加 */
<link rel="stylesheet" href="https://use.typekit.net/xxxxxx.css">

/* 在 CSS 中使用 */
.element {
    font-family: 'adobe-font', sans-serif;
}

CSS 排版实际应用示例

示例 1：基本排版设置

<div class="typography-basic">
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <p>这是一段普通文本，用于展示基本的排版设置。这段文本应该有适当的行高，使阅读更加舒适。</p>
    <p>这是另一段文本，包含 <strong>粗体</strong>、<em>斜体</em> 和 <u>下划线</u> 等格式。</p>
</div>

<style>
.typography-basic {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

.typography-basic h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.typography-basic h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.8rem;
}

.typography-basic p {
    margin-bottom: 1rem;
}

.typography-basic strong {
    font-weight: 600;
}

.typography-basic em {
    font-style: italic;
}

.typography-basic u {
    text-decoration: underline;
}
</style>

示例 2：响应式排版

<div class="responsive-typography">
    <h1>响应式标题</h1>
    <p>这段文本的大小会根据屏幕尺寸自动调整，确保在不同设备上都有良好的可读性。</p>
</div>

<style>
.responsive-typography {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

.responsive-typography h1 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.2;
}

.responsive-typography p {
    font-size: clamp(1rem, 2vw, 1.2rem);
}
</style>

示例 3：特殊排版效果

<div class="special-typography">
    <h2 class="shadow-text">阴影文本</h2>
    <h2 class="gradient-text">渐变文本</h2>
    <p class="letter-spacing">加宽字母间距的文本</p>
    <p class="word-spacing">加宽单词间距的文本</p>
</div>

<style>
.special-typography {
    font-family: Arial, sans-serif;
}

.shadow-text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.gradient-text {
    background: linear-gradient(90deg, red, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.letter-spacing {
    letter-spacing: 3px;
}

.word-spacing {
    word-spacing: 10px;
}
</style>

示例 4：多列文本

<div class="multi-column">
    <p>这是一段多列文本，用于展示如何在 CSS 中创建报纸式的多列布局。这种布局可以在有限的空间内显示更多的内容，提高页面的信息密度。</p>
    <p>多列布局在展示长文本时非常有用，如文章、新闻等。通过调整列数和列间距，可以创建不同的视觉效果。</p>
    <p>CSS 的 column 属性提供了一种简单的方式来创建多列布局，而不需要使用浮动或其他复杂的布局技术。</p>
</div>

<style>
.multi-column {
    column-count: 3;
    column-gap: 20px;
    column-rule: 1px solid #ddd;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* 响应式调整列数 */
@media (max-width: 768px) {
    .multi-column {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .multi-column {
        column-count: 1;
    }
}
</style>

CSS 排版使用技巧

  • 选择合适的字体：根据内容和设计风格选择合适的字体，确保可读性和美观性。
  • 建立字体层次结构：为不同级别的标题和正文建立清晰的字体层次结构，使用不同的字体大小、粗细和颜色。
  • 使用合适的行高：行高通常设置为字体大小的 1.4-1.6 倍，以确保良好的可读性。
  • 注意字间距和词间距：适当的字间距和词间距可以提高文本的可读性。
  • 使用相对单位：使用 rem、em 等相对单位设置字体大小，可以提高响应式设计的灵活性。
  • 考虑响应式排版：使用媒体查询或 clamp() 函数等技术，确保在不同屏幕尺寸下的良好排版效果。
  • 使用网页字体时注意性能：加载自定义字体时要注意字体文件的大小和加载方式，避免影响页面加载速度。
  • 测试不同设备和浏览器：确保排版在不同设备和浏览器上都能正常显示。
  • 遵循排版最佳实践：如使用合适的对齐方式、避免过多的文本装饰、保持一致的风格等。
  • 使用 CSS 变量管理排版：使用 CSS 变量定义字体、大小、行高等排版相关的值，可以提高代码的可维护性和一致性。

CSS 排版总结

  • CSS 排版包括字体属性和文本属性两大部分。
  • 字体属性包括 font-family、font-size、font-weight、font-style 等。
  • 文本属性包括 line-height、text-align、text-decoration、text-transform 等。
  • 使用 @font-face 规则可以加载自定义字体。
  • 良好的排版可以提高内容的可读性和用户体验。
  • 考虑字体选择、层次结构、行高、间距、响应式设计等因素，可以创建专业、美观的排版效果。
  • 使用 CSS 变量和遵循排版最佳实践，可以提高代码的可维护性和一致性。