CSS 视觉设计与布局

系统介绍 CSS 基础语法、盒模型、Flex 与 Grid 布局、Tailwind CSS 框架及动画过渡机制，为新闻页面的视觉呈现与响应式设计奠定技术基础。

2026-03-17 第 3 周

学习要点

掌握 CSS 选择器的分类与优先级规则，能够精确定位页面元素
理解盒模型的构成原理，运用 Flex 与 Grid 布局实现新闻页面的结构化排版
了解 Tailwind CSS 工具类框架的使用方式及响应式断点机制
能够使用 CSS 过渡与动画为新闻页面添加交互反馈效果

正文

CSS 基础语法与选择器

CSS（Cascading Style Sheets，层叠样式表）是一种描述 HTML 文档视觉呈现方式的样式语言，通过"选择器—属性—值"的三元结构，将样式规则绑定到页面元素上。其核心语法形式如下：

1
2
3
选择器 {
  属性名: 属性值;
}

可将 CSS 与报纸的版式规范手册类比：HTML 是稿件本身，CSS 则是编辑部制定的字体、栏宽、色彩规范——两者相互独立，却共同决定最终的阅读体验。

选择器是 CSS 的核心定位机制，决定样式规则作用于哪些元素。常用选择器分为以下几类：

类型	语法示例	说明
元素选择器	`p { }`	匹配所有 `<p>` 元素
类选择器	`.headline { }`	匹配 `class="headline"` 的元素
ID 选择器	`#breaking { }`	匹配 `id="breaking"` 的唯一元素
属性选择器	`a[href] { }`	匹配含有特定属性的元素
伪类选择器	`a:hover { }`	匹配处于特定状态的元素
后代选择器	`.article p { }`	匹配 `.article` 内所有 `<p>` 后代

**优先级（Specificity）**决定多条规则冲突时哪条生效，计算规则为：内联样式（1000）> ID 选择器（100）> 类/伪类选择器（10）> 元素选择器（1）。此外，!important 声明可强制提升任意规则的优先级，但应谨慎使用，以免破坏样式的可维护性。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* 新闻卡片标题样式示例 */
.card .title {          /* 优先级：11 */
  font-size: 1.2rem;
  color: #1a1a1a;
}

#breaking-news .title { /* 优先级：101，将覆盖上方规则 */
  color: #cc0000;        /* 突发新闻标题使用红色 */
  font-weight: bold;
}

CSS 有三种引入方式：外部样式表（<link rel="stylesheet">，推荐用于项目级复用）、内部样式块（<style> 标签，适合单页原型）、内联样式（style 属性，仅用于特殊覆盖场景）。

盒模型与文本样式

CSS 盒模型（Box Model）是页面布局的基础认知模型：每个 HTML 元素在渲染时被视为一个矩形盒子，由内容区（content）、内边距（padding）、边框（border）和外边距（margin）四层结构从内到外依次包裹。

若以报纸版面类比：文章正文是"内容区"，文章与版心边线之间的留白是"内边距"，版心边线本身是"边框"，而相邻报道之间的间隔则是"外边距"。

1
2
3
4
5
6
7
.news-card {
  width: 320px;           /* 内容区宽度 */
  padding: 16px 20px;     /* 上下 16px，左右 20px 内边距 */
  border: 1px solid #ddd; /* 1像素灰色边框 */
  margin: 12px;           /* 卡片间外边距 */
  box-sizing: border-box; /* 使 width 包含 padding 和 border，更直观 */
}

默认情况下，width 仅指内容区宽度，设置 box-sizing: border-box 后，width 将包含 padding 与 border，元素的总宽度更易控制，是现代项目的通行做法。

文本样式是新闻页面排版的核心，常用属性包括：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
.article-body {
  font-family: "Source Han Serif", serif; /* 字体族，回退到衬线体 */
  font-size: 1rem;           /* 基准字号，等于浏览器默认 16px */
  line-height: 1.8;          /* 行高为字号的 1.8 倍，提升长文可读性 */
  color: #333333;            /* 正文深灰色，避免纯黑刺眼 */
  letter-spacing: 0.05em;    /* 字间距，中文排版常用微调 */
  text-align: justify;       /* 两端对齐，模仿印刷排版效果 */
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  border-left: 4px solid #e63946; /* 左侧红色标识线，常见于新闻栏目标题 */
  padding-left: 12px;
}

em 与 rem 是相对单位：em 相对于当前元素的字号，rem 相对于根元素（<html>）的字号。在响应式设计中，使用相对单位可使排版随用户的字号偏好自动缩放，比像素单位更具可访问性。

Flex 布局与 Grid 布局

Flexbox（弹性盒布局）是一种一维布局模型，适合处理单行或单列的元素排列，如导航栏、标签列表、卡片组。将容器设为 display: flex 后，其直接子元素（flex item）即进入弹性流中。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* 新闻网站顶部导航栏 */
.navbar {
  display: flex;
  justify-content: space-between; /* 主轴：左右两端分布 */
  align-items: center;            /* 交叉轴：垂直居中 */
  padding: 0 24px;
  height: 60px;
  background-color: #1a1a2e;
}

.nav-links {
  display: flex;
  gap: 24px;                      /* 子项间距，替代 margin 更简洁 */
}

justify-content 控制主轴（水平方向）的分布方式，align-items 控制交叉轴（垂直方向）的对齐方式，flex-wrap: wrap 允许子项在空间不足时换行。

CSS Grid（网格布局）是二维布局模型，可同时控制行与列，适合整体页面结构或多栏内容网格。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
/* 新闻首页三栏网格 */
.news-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* 左主栏占 2/4，两侧各占 1/4 */
  grid-template-rows: auto;
  gap: 20px;                          /* 行列间距统一 20px */
}

/* 头条新闻跨越所有列 */
.featured-story {
  grid-column: 1 / -1;               /* 从第1列线到最后一列线 */
}

fr（fraction）单位表示可用空间的份数，1fr 1fr 1fr 即三等分。grid-template-areas 可用命名区域的方式直观定义布局结构，尤其适合复杂的杂志型新闻排版。Flex 与 Grid 并非互斥：通常用 Grid 搭建页面骨架，用 Flex 排列骨架内部的组件细节。

Tailwind CSS 与响应式设计

Tailwind CSS 是一套原子化（Utility-First）CSS 框架，其设计理念是将每条 CSS 声明拆分为独立的功能类（utility class），直接在 HTML 元素上组合使用，而非编写自定义选择器。

1
2
3
4
5
6
7
8
<!-- 传统 CSS 写法 -->
<div class="news-card">...</div>

<!-- Tailwind CSS 写法：直接组合功能类 -->
<div class="bg-white rounded-lg shadow-md p-6 mb-4 border border-gray-200">
  <h2 class="text-xl font-bold text-gray-900 mb-2">突发：...</h2>
  <p class="text-gray-600 text-sm leading-relaxed">正文摘要...</p>
</div>

这种方式减少了在 HTML 与 CSS 文件之间频繁切换的认知负担，对于快速原型制作尤为高效。代价是 HTML 标签的 class 属性可能变长，需要通过组件化的方式管理复用。

响应式设计（Responsive Design）指页面能够依据设备屏幕宽度自动调整布局，核心机制是 CSS 媒体查询（Media Query）。Tailwind 将媒体查询封装为前缀修饰符：

Tailwind 前缀	对应断点	典型设备
（无前缀）	全部尺寸	移动端优先基准
`sm:`	≥ 640px	大屏手机
`md:`	≥ 768px	平板
`lg:`	≥ 1024px	桌面浏览器
`xl:`	≥ 1280px	大屏显示器

1
2
3
4
5
6
<!-- 移动端单栏，桌面端三栏的新闻网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="news-card">...</div>
  <div class="news-card">...</div>
  <div class="news-card">...</div>
</div>

Tailwind 采用"移动端优先"（Mobile First）策略：无前缀的类作用于所有屏幕，md: 等前缀类仅在达到对应宽度时生效。这与新闻网站的实际流量结构高度吻合——移动端读者通常占据多数，基础样式应首先保障小屏体验。

CSS 动画与过渡

**过渡（Transition）**为元素在两个状态之间的样式变化添加时间插值，使突变转为渐变，常见于悬停、激活等交互反馈场景。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.story-card {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* 属性名 | 持续时间 | 缓动函数 */
}

.story-card:hover {
  transform: translateY(-4px);                  /* 上浮 4px */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);     /* 阴影加深，营造悬浮感 */
}

缓动函数（easing function）控制速度曲线：ease 慢入慢出（最自然），linear 匀速（适合加载进度条），ease-in 慢入快出（适合退出动画），ease-out 快入慢出（适合入场动画）。

**关键帧动画（@keyframes）**通过定义动画序列的中间状态，实现更复杂的自动播放效果，不依赖用户交互触发。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
/* 突发新闻标签闪烁动画 */
@keyframes blink-badge {
  0%   { opacity: 1; background-color: #cc0000; }
  50%  { opacity: 0.6; background-color: #ff4444; }
  100% { opacity: 1; background-color: #cc0000; }
}

.breaking-badge {
  animation: blink-badge 1.2s ease-in-out infinite;
  /* 动画名 | 时长 | 缓动 | 循环次数 */
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
}

animation 属性的常用子属性包括：animation-name（关键帧名称）、animation-duration（单次时长）、animation-iteration-count（循环次数，infinite 表示无限循环）、animation-fill-mode（动画结束后的状态保持，forwards 表示保持最终帧）。过度使用动画会分散读者注意力，在新闻界面设计中应以"强调信息层级"为原则，克制使用。

实践示例

场景：某新闻学院学生正在为校园媒体搭建一个简洁的新闻首页，需要包含顶部导航栏、头条新闻区和多栏新闻卡片列表。

目标：使用纯 CSS（结合 Flex 与 Grid）实现一个响应式新闻首页布局，在移动端呈现单栏，在桌面端呈现三栏卡片网格，并为卡片添加悬停动效。

实现步骤：

步骤一：搭建 HTML 结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- viewport meta 是响应式设计的必要声明 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>校园新闻</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 顶部导航栏 -->
  <header class="navbar">
    <div class="logo">校园新闻</div>
    <nav class="nav-links">
      <a href="#">要闻</a>
      <a href="#">学术</a>
      <a href="#">文体</a>
      <a href="#">评论</a>
    </nav>
  </header>

  <!-- 主内容区 -->
  <main class="container">
    <!-- 头条新闻 -->
    <section class="featured">
      <span class="badge">头条</span>
      <h1>新闻传播学院举办国际媒体融合论坛</h1>
      <p>来自十余所高校及媒体机构的学者共同探讨数字时代的新闻生产转型……</p>
    </section>

    <!-- 新闻卡片网格 -->
    <section class="news-grid">
      <article class="card">
        <div class="card-tag">学术</div>
        <h2>数据新闻工作坊招募志愿者</h2>
        <p>本次工作坊将涵盖数据清洗、可视化及报道发布全流程……</p>
        <span class="card-date">2026-03-15</span>
      </article>
      <article class="card">
        <div class="card-tag">文体</div>
        <h2>校报摄影大赛获奖作品展开幕</h2>
        <p>本届大赛共收到投稿逾三百件，评委会从中评选出三十幅……</p>
        <span class="card-date">2026-03-14</span>
      </article>
      <article class="card">
        <div class="card-tag">评论</div>
        <h2>算法推荐时代的新闻把关再思考</h2>
        <p>当个性化算法主导内容分发，传统把关人角色正在经历深刻重塑……</p>
        <span class="card-date">2026-03-13</span>
      </article>
    </section>
  </main>
</body>
</html>

步骤二：编写全局与导航样式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/* style.css */

/* 全局重置与基准设置 */
*, *::before, *::after {
  box-sizing: border-box; /* 统一盒模型计算方式 */
  margin: 0;
  padding: 0;
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #222;
  background-color: #f5f5f0; /* 米白色背景，模拟新闻纸质感 */
}

/* 导航栏：Flex 实现两端对齐 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  height: 56px;
  background-color: #1a1a2e;
  position: sticky;           /* 滚动时固定在顶部 */
  top: 0;
  z-index: 100;
}

.logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.1em;
}

.nav-links {
  display: flex;
  gap: 28px;
}

.nav-links a {
  color: #cccccc;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease; /* 颜色过渡，悬停反馈 */
}

.nav-links a:hover {
  color: #ffffff;
}

步骤三：编写头条与网格布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/* 内容容器：限制最大宽度并水平居中 */
.container {
  max-width: 1100px;
  margin: 32px auto;
  padding: 0 20px;
}

/* 头条区域 */
.featured {
  background: #ffffff;
  border-left: 5px solid #e63946; /* 红色左侧标识线 */
  padding: 24px 28px;
  margin-bottom: 32px;
  border-radius: 4px;
}

.badge {
  display: inline-block;
  background-color: #e63946;
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 3px;
  margin-bottom: 12px;
}

.featured h1 {
  font-size: 1.6rem;
  line-height: 1.4;
  margin-bottom: 10px;
}

/* Grid 新闻卡片网格：移动端 1 列，桌面端 3 列 */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;          /* 默认：单列（移动端） */
  gap: 20px;
}

/* 媒体查询：屏幕宽度 ≥ 768px 时切换为三栏 */
@media (min-width: 768px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr); /* 三等分列 */
  }
}

步骤四：编写卡片样式与悬停动效

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* 新闻卡片 */
.card {
  background: #ffffff;
  border-radius: 6px;
  padding: 20px;
  border: 1px solid #e8e8e8;
  /* 过渡：同时作用于上移和阴影 */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-5px);                  /* 悬停时上浮 */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);  /* 阴影加深 */
}

.card-tag {
  display: inline-block;
  font-size: 0.7rem;
  color: #e63946;
  border: 1px solid #e63946;
  padding: 1px 8px;
  border-radius: 2px;
  margin-bottom: 10px;
}

.card h2 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.5;
}

.card p {
  font-size: 0.875rem;
  color: #555;
  line-height: 1.65;
  margin-bottom: 14px;
}

.card-date {
  font-size: 0.75rem;
  color: #999;
}

效果说明：

完成上述步骤后，在浏览器中打开页面，可看到：顶部导航栏深色背景固定在页面顶端，站名与导航链接分列两侧，鼠标悬停链接时文字变白；头条区域以白色卡片呈现，左侧红色标识线与红色标签形成视觉锚点；下方三张新闻卡片在宽屏下并排三列，在移动端或窄浏览器窗口下自动堆叠为单列；鼠标悬停任意卡片时，卡片平滑上浮并投下更深的阴影，产生明显的交互层次感。整体配色与排版规范参照了主流新闻网站的视觉惯例，具备直接应用于校媒网站的可行性。

练习

基础练习：在实践示例的基础上，为导航栏新增一个"搜索"图标链接，要求使用 Flex 的 gap 属性控制其与其他链接的间距，并为所有导航链接添加 border-bottom 下划线过渡动画（悬停时出现，离开时消失）。
进阶练习：将新闻卡片网格改为使用 Tailwind CSS 的原子类实现（需引入 Tailwind CDN），对照原有 CSS 写法，理解两种方案在可维护性与开发效率上的差异；同时将媒体查询断点调整为 lg:（≥1024px），观察布局响应变化。
综合练习：参照国内外知名新闻网站（如《卫报》guardian.com 或澎湃新闻 thepaper.cn）的首页视觉风格，设计并实现一个包含"头条大图区 + 侧边栏要闻列表 + 底部专题卡片网格"三段式结构的新闻首页。要求：侧边栏使用 CSS Grid 的 grid-template-areas 命名区域定义布局，至少使用一处 @keyframes 动画（如"最新"标签的呼吸效果），并撰写不少于 200 字的设计说明，解释色彩、字体与排版选择背后的新闻传播逻辑。

本章小结

CSS 选择器与优先级：通过元素、类、ID 等选择器精确定位页面元素，优先级规则决定冲突样式的最终生效顺序
盒模型：页面每个元素均遵循"内容—内边距—边框—外边距"四层结构，box-sizing: border-box 是现代项目的通行设置
Flex 与 Grid：Flexbox 处理一维（行或列）排列，CSS Grid 处理二维（行与列）结构，二者配合可实现新闻页面的完整布局体系
Tailwind CSS 与响应式设计：原子化工具类框架加速样式编写，媒体查询断点前缀实现"移动端优先"的多设备自适应布局
过渡与动画：transition 为交互状态变化添加平滑插值，@keyframes 定义自动播放的关键帧序列，两者均应以"辅助信息传达"为使用原则