方式一：行内样式#

写在标签的 style 属性中（PPT 说明：通常配合 JavaScript 使用）：

1
<!-- 方式一: 行内样式 -->
2
<span style="color: gray;">2024年05月15日 20:07</span>

方式二：内部样式#

写在 <style> 标签中——可以写在页面任何位置，但通常约定写在 <head> 标签中：

1
<head>
2
  <!-- 方式二: 内部样式 -->
3
  <style>
4
    span {
5
      color: #b2b2b2;
6
    }
7
  </style>
8
</head>

方式三：外部样式#

写在一个单独的 .css 文件里，再通过 <link> 标签在网页中引入。

单独的文件 css/news.css：

1
span {
2
  color: gray;
3
}

在网页的 <head> 里引入它：

1
<!-- 方式三: 外部样式 -->
2
<link rel="stylesheet" href="css/news.css">

三种方式对比#

一、知识回顾（读完直接做下面的实践题）#

1. CSS 全称 Cascading Style Sheet（层叠样式表），负责网页的表现（元素的外观、位置等样式），HTML 负责结构、JavaScript 负责行为
2. CSS 三种引入方式：行内样式写在标签的 style 属性中（配合 JavaScript 使用）；内部样式写在 <style> 标签中（可以写在页面任何位置，通常约定写在 <head> 标签中）；外部样式写在一个单独的 .css 文件中，通过 <link> 标签引入
3. 外部样式的标准写法是 <link rel="stylesheet" href="css/news.css">：rel="stylesheet" 说明引入的是样式表（不能省），href 是 CSS 文件的相对路径
4. 三种引入方式的适用场景：行内样式只影响单个标签（配合 JS 动态改样式）；内部样式给当前页面用；外部样式可以给多个页面共用，样式与结构分离，最推荐
5. 颜色四种表示法：关键字（red、green、blue，颜色英文单词）、rgb（rgb(r,g,b)，红绿蓝三原色，取值 0-255）、rgba（rgba(r,g,b,a)，a 是透明度，取值 0-1）、十六进制（#rrggbb，# 开头）
6. 十六进制每两位一组分别对应红、绿、蓝；两位都相同才能简写——#000000 → #000、#ff0000 → #f00
7. color 属性设置文本内容的颜色，例如 color: #b2b2b2;（案例里日期用的浅灰）、color: gray;、rgba(255, 120, 0, 0.5)（半透明的橙色）
8. line-height 设置行高：line-height: 2 表示 2 倍行高（不带单位时是字号的倍数），也可以写 32px 这样的具体值
9. text-indent 设置首行缩进：text-indent: 2em 表示首行缩进 2 个字符，em 是相对于当前字号的单位
10. 写 CSS 声明时的规矩：属性名拼写正确、每条声明末尾加分号——CSS 不会报错，写错只会静默失效（并且可能连累后面整块样式）

二、裸写题#

• 2-1 用三种方式分别给三段文字设颜色 页面里从上到下有三段文字：行内样式的文字、内部样式的文字、外部样式的文字。要求：

  1. 第一段用行内的方式设成红色
  2. 第二段用内部的方式设成绿色
  3. 第三段用外部的方式设成蓝色——样式规则要写在同目录的 test_06_外部样式.css 文件里，并在页面里把它引入进来
  4. 保存后双击打开，三段文字的颜色都要生效 （练习文件 test_06_三种引入方式.html 与 test_06_外部样式.css 里各有写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：给自己身上的属性、页面里的一个样式块、以及一个独立的样式文件——三条路各自把规则写在不同的地方 二级 · 方法：行内用 style="color:red"；内部用 <style> 标签包规则；外部用 .css 文件 + <link rel="stylesheet" href="文件名.css"> 三级 · 骨架：<标签名 style="color:____">…</标签名> / <style> p { color: ____; } </style> / <link rel="____" href="____.css">

  参考答案（做完再点开）

  test_06_三种引入方式.html：

  1
  <head>
  2
    <meta charset="UTF-8">
  3
    <title>三种引入方式</title>
  4
    <!-- 方式三：把外部样式文件引进来（路径相对本文件） -->
  5
    <link rel="stylesheet" href="test_06_外部样式.css">
  6
    <!-- 方式二：内部样式 -->
  7
    <style>
  8
      p {
  9
        color: green;
  10
      }
  11
    </style>
  12
  </head>
  13
  <body>
  14
    <!-- 方式一：行内样式 -->
  15
    <h1 style="color: red;">行内样式的文字</h1>
  16
  
  17
    <p>内部样式的文字</p>
  18
  
  19
    <span>外部样式的文字</span>
  20
  </body>

  显示更多显示更少

  test_06_外部样式.css：

  1
  /* 方式三：外部样式文件里写规则（这里的 span 是元素选择器的写法，07 篇细讲） */
  2
  span {
  3
    color: blue;
  4
  }

  检查：<link> 要写在 <head> 里；href 是相对路径（同目录就直接写文件名）；rel="stylesheet" 不能漏。

• 2-2 用四种表示法写出同一个红色 页面里有一段文字，要求依次给出四种写法（先注释掉再逐个打开效果）：

  1. 用颜色关键字表示纯红
  2. 用红绿蓝三原色数字表示纯红
  3. 用带一半透明度的红色
  4. 用十六进制并简写成 3 位 （练习文件 test_06_颜色表示.html 里已经给出这段文字和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：同样是红色，四种”说法”分别对应四个写法：英文单词、三个数字、四个数字、# 开头的短码 二级 · 方法：red / rgb(255,0,0) / rgba(255,0,0,0.5) / #f00 三级 · 骨架：color: ____;（试试把 rgb(255,0,0) 写成 rgb(255,0,1) 看看颜色有没有变化）

  参考答案（做完再点开）

  1
  p {
  2
    /* 1. 关键字 */
  3
    /* color: red; */
  4
  
  5
    /* 2. rgb 表示法：红绿蓝三原色，0-255 */
  6
    /* color: rgb(255, 0, 0); */
  7
  
  8
    /* 3. rgba 表示法：第 4 个值是透明度，0-1 */
  9
    /* color: rgba(255, 0, 0, 0.5); */
  10
  
  11
    /* 4. 十六进制简写：每两位相同才能简写 */
  12
    color: #f00;
  13
  }

  对照课程 04. 央视新闻-标题-样式.html：四种写法都在注释里试过，最后选了十六进制的 #b2b2b2 作为日期颜色。注意 rgba 的透明度取值是 0-1，0.5 是一半透明。

• 2-3 把一段长文字调成”能读”的排版 页面里有一段很长的新闻文字，要求：

  1. 文字的行间距松快一些，行高调到字号的 2 倍
  2. 每段首行空出两个汉字的宽度
  3. 两件事各只用一条 CSS 声明（不要敲空格实体） （练习文件 test_06_行高与缩进.html 里有一段现成的正文和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：一个属性管”一行的上下距离”，另一个属性管”第一行往右挪多少” 二级 · 方法：line-height: 2（不带单位＝字号倍数）；text-indent: 2em（em 相对当前字号） 三级 · 骨架：p { line-height: ____; text-indent: ____em; }

  参考答案（做完再点开）

  1
  p {
  2
    /* 行高：2 倍行高 */
  3
    line-height: 2;
  4
    /* 首行缩进：2 个字符 */
  5
    text-indent: 2em;
  6
  }

  对照课程 07. 央视新闻-正文-样式.html：段首的缩进最早是用 4 个   手敲的，改用 text-indent: 2em 后，光标停在任意段落都有缩进，字号变大缩进也跟着变大。

三、综合题#

• 3-1 给新闻页面配齐样式 在 05 篇综合题做的”新闻详情页”基础上，把样式补上（也可以从练习文件里的页面写）：

  1. 把发布时间（那行灰色文字所在的小标签）的文字颜色改成浅灰 #b2b2b2
  2. 所有段落统一：行高 2 倍、首行缩进 2 个字符
  3. 上面两条先用内部样式实现；再把它们整体搬到一个独立的 test_06_综合_新闻页面样式.css 文件里，用外部样式的方式引进来，确认效果完全一样
  4. 对照一下：搬之前和搬之后，页面显示有没有任何区别？（应该没有——这正是外部样式的作用：结构和样式分开管） （练习文件 test_06_综合_新闻页面样式.html 与 test_06_综合_新闻页面样式.css 里各有写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：先”选中元素”再”给属性”；选中有两类写法——按标签选、按名字选（这个名字是之前写在标签属性里的） 二级 · 方法：内部样式写在 <style> 里；搬出去后用 <link rel="stylesheet" href="....css"> 引入；日期用 color: #b2b2b2，段落用 line-height: 2 + text-indent: 2em 三级 · 骨架：<style> span { ____: #b2b2b2; } p { ____: 2; ____: 2em; } </style> → 搬到 .css 文件 → <link rel="____" href="____.css">

  参考答案（做完再点开）

  第三步之前（内部样式）：

  1
  <head>
  2
    <meta charset="UTF-8">
  3
    <title>新闻页面样式</title>
  4
    <style>
  5
      /* 日期：浅灰 */
  6
      span {
  7
        color: #b2b2b2;
  8
      }
  9
      /* 段落：2 倍行高 + 首行缩进 2 字符 */
  10
      p {
  11
        line-height: 2;
  12
        text-indent: 2em;
  13
      }
  14
    </style>
  15
  </head>

  显示更多显示更少

  第三步之后（外部样式）——test_06_综合_新闻页面样式.css：

  1
  span {
  2
    color: #b2b2b2;
  3
  }
  4
  
  5
  p {
  6
    line-height: 2;
  7
    text-indent: 2em;
  8
  }

  页面里把 <style> 整块删掉，换成：

  1
  <link rel="stylesheet" href="test_06_综合_新闻页面样式.css">

  两处对比时注意：属性名拼写和每条声明末尾的分号是 CSS 最容易出错的地方（写错不报错，只是样式静默不生效）。