团子和蛋糕的笔记

Appearance

上一篇把央视新闻的内容用标签摆好了，但页面还是"白底黑字"的默认样子。从这一篇开始给页面上样式——先弄清 CSS 怎么引进页面、颜色怎么写，再动手把标题区那行日期调成灰色。

CSS 是什么（回顾） ​

CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）。

结构没变，只是多了一条"颜色"样式：

html
<!-- 结构一样，只是给这个标题加了颜色 -->
<h1 style="color:red;">HTML入门程序</h1>

一句话：HTML 管"有什么"，CSS 管"长什么样"。

案例进度：给日期上样式 ​

标题排版做完时长这样：新闻标题、蓝色的"央视网"链接、黑色的日期。接下来要把日期调成灰色——这才是新闻页面该有的样子。

标题排版效果图：要改的就是这一行——<span> 包住的日期 2024年05月15日 20:07，目标颜色是浅灰

三种引入方式 ​

同一个"日期变灰"的需求，CSS 可以有三种写法（课程文件 04. 央视新闻-标题-样式.html 把三种都写了出来）：

方式一：行内样式 ​

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

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

方式二：内部样式 ​

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

html
<head>
  <!-- 方式二: 内部样式 -->
  <style>
    span {
      color: #b2b2b2;
    }
  </style>
</head>

方式三：外部样式 ​

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

单独的文件 css/news.css：

css
/* css/news.css */
span {
  color: gray;
}

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

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

NOTE

三种写法语法不一样，作用一样——不管用哪种，最终都是给"日期"这个元素加上一条 color 规则。区别只在于规则写在哪里。

三种方式对比 ​

引入方式写法写在哪适用场景
行内样式<h1 style="...">标签的 style 属性里只影响这一个标签；配合 JavaScript 动态改样式时用
内部样式<style> … </style>页面里（通常约定放在 <head> 中）样式只给当前这一个页面用
外部样式.css 文件 + <link href="...">单独的 CSS 文件多个页面共用一套样式；结构和样式彻底分离，最推荐

IMPORTANT

外部样式的两个细节：① rel="stylesheet" 是告诉浏览器"引进来的是样式表"，不能省；② href 走的是相对路径（css/news.css 表示 CSS 文件在与 html 同级的 css 目录里）。

NOTE

课程代码把这三种方式都留在文件里、用注释切换，是为了演示"三种写法效果一样"。如果同一条样式被多个地方设置，就会发生覆盖——行内样式优先级最高，几条选择器规则之间才按"id > 类 > 元素"比高低（见 07 篇）。

颜色的四种表示法 ​

PPT 给了一张完整的颜色表示形式表：

表示方式属性值说明示例
关键字颜色英文单词red、green、bluered、green、blue...
rgb 表示法rgb(r,g,b)红绿蓝三原色，取值：0-255rgb(0,0,0)、rgb(255,0,0)
rgba 表示法rgba(r,g,b,a)红绿蓝三原色，a 表示透明度，取值：0-1rgba(0,0,0,0.3)、rgba(255,0,0,0.5)
十六进制表示法#rrggbb# 开头，将数字转换成十六进制表示#000000、#ff0000，简写：#000、#f00

课程代码里把这四种都在同一个 span 上试了一遍（注释掉的几行就是）：

css
span {
  /* 关键字 */
  /* color: gray; */

  /* RGB表示法 */
  /* color: rgb(255, 120, 0); */

  /* RGBA表示法 */
  /* color: rgba(255, 120, 0, 0); */

  /* 十六进制表示法 */
  /* color: #0000ff; */
  color: #b2b2b2; /* 最后选定：十六进制的浅灰 */
}

几个记忆点：

  • rgb：三个数字依次是红、绿、蓝，每个 0~255。rgb(0,0,0) 是黑、rgb(255,255,255) 是白、rgb(255,0,0) 是纯红；
  • rgba：第四个数字是透明度（0 = 完全透明，1 = 完全不透明），rgba(255, 120, 0, 0) 就是"有颜色但完全看不见"；
  • 十六进制：#rrggbb 每两位一组，分别对应红、绿、蓝；两位都相同时可以简写——#000000 写成 #000、#ff0000 写成 #f00；
  • 案例最后用的 #b2b2b2 是三组十六进制数相同的灰色（也就是 #b2b2b2 → 灰、灰、灰）。

颜色属性 color ​

css
/* 颜色属性：设置文本内容的颜色 */
p {
  color: red;
}

案例里就是它把日期改成灰色的：

css
span {
  color: #b2b2b2;
}

TIP

color 只管文字颜色（背景色是另一个属性 background-color）。写样式时如果发现"怎么没反应"，先检查两件事：属性名拼写、声明末尾的分号——CSS 既不报错也不提示，一句写错后面整块样式都可能失效。

line-height：行高 ​

正文文字挨得太挤，用 line-height 设置行高：

css
p {
  /* 设置行高 */
  line-height: 2; /* 行高: 2倍行高 */
}
  • 写不带单位的数字时，表示字号的倍数：line-height: 2 就是 2 倍行高（字号 16px 时行高 32px）；
  • 也可以写具体长度，如 line-height: 32px。

text-indent：首行缩进 ​

中文正文每段要空两格，用 text-indent 设置首行缩进：

css
p {
  /* 设置首行缩进 */
  text-indent: 2em; /* 首行缩进2个字符 */
}

2em 里的 em 是相对于当前字号的单位：字号 16px 时，2em 就缩进 32px，也就是两个汉字的宽度。

TIP

这正是 05 篇里那个"笨办法"的升级版：之前为了段首空 4 格要敲 4 个 &nbsp;，现在一条 text-indent: 2em 管住所有段落，字号变了缩进还会跟着变。

案例实战：正文样式 ​

把上面两条属性加到新闻正文的段落上（课程文件 07. 央视新闻-正文-样式.html）：

html
<head>
  <style>
    /* id 选择器：把日期调成灰色 */
    #time {
      color: #b2b2b2;
    }

    /* 元素选择器：去掉超链接的下划线（见 07 篇） */
    a {
      text-decoration: none;
    }

    /* 元素选择器：所有段落统一行高与首行缩进 */
    p {
      line-height: 2;      /* 行高: 2倍行高 */
      text-indent: 2em;    /* 首行缩进2个字符 */
    }
  </style>
</head>

效果：

正文段落样式效果图：加上 line-height: 2 和 text-indent: 2em 之后——段落之间松快多了，每段开头自动空两格，加粗的"央视网消息"也一并生效

这就完成了案例的前半程：标题排版（05 篇）→ 标题样式（本篇）→ 选择器（07 篇），后面还会给正文的段落、图片补上样式。

小结：本篇的 CSS 速查 ​

分类内容
CSS 引入方式行内样式：<h1 style="...">；内部样式：<style> … </style>；外部样式：xxx.css + <link href="...">
颜色表示关键字：red、green...；rgb：rgb(255,0,0)、rgb(134,100,89)；rgba：rgba(255,0,0,0.5)、rgba(134,100,89,1)；十六进制：#ff0000、#cccccc、#f00
颜色属性color：设置文本内容的颜色
CSS 属性line-height：设置行高；text-indent：首行缩进

相关 ​

练习题 ​

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

  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 不会报错，写错只会静默失效（并且可能连累后面整块样式）

二、裸写题 ​

    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：

    html
    <head>
  <meta charset="UTF-8">
  <title>三种引入方式</title>
  <!-- 方式三：把外部样式文件引进来（路径相对本文件） -->
  <link rel="stylesheet" href="test_06_外部样式.css">
  <!-- 方式二：内部样式 -->
  <style>
    p {
      color: green;
    }
  </style>
</head>
<body>
  <!-- 方式一：行内样式 -->
  <h1 style="color: red;">行内样式的文字</h1>

  <p>内部样式的文字</p>

  <span>外部样式的文字</span>
</body>

    test_06_外部样式.css：

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

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

    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) 看看颜色有没有变化）

    - 参考答案（做完再点开）

    css
    p {
  /* 1. 关键字 */
  /* color: red; */

  /* 2. rgb 表示法：红绿蓝三原色，0-255 */
  /* color: rgb(255, 0, 0); */

  /* 3. rgba 表示法：第 4 个值是透明度，0-1 */
  /* color: rgba(255, 0, 0, 0.5); */

  /* 4. 十六进制简写：每两位相同才能简写 */
  color: #f00;
}

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

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

    - 提示（先自己想，实在想不出再点开）

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

    - 参考答案（做完再点开）

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

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

三、综合题 ​

    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">

    - 参考答案（做完再点开）

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

    html
    <head>
  <meta charset="UTF-8">
  <title>新闻页面样式</title>
  <style>
    /* 日期：浅灰 */
    span {
      color: #b2b2b2;
    }
    /* 段落：2 倍行高 + 首行缩进 2 字符 */
    p {
      line-height: 2;
      text-indent: 2em;
    }
  </style>
</head>

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

    css
    span {
  color: #b2b2b2;
}

p {
  line-height: 2;
  text-indent: 2em;
}

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

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

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