尚硅谷前端 2023 · 教程站

主题

HTML&CSS（Day4 3/3） ​

本页对应 Day04_HTML&CSS，共 6 段视频，约 48 分钟。

学习目标 ​

  1. 能说明 HTML 负责页面结构、CSS 负责页面样式的分工关系，并解释 CSS 声明必须作用于 HTML 元素。
  2. 能写出并演示在 HTML 中使用 CSS 的三种方式：行内式 style 属性、内嵌式 <style> 标签、外链式 <link> 引入 CSS 文件，并说明推荐使用场景。
  3. 能识别并写出 CSS 规则的基本语法结构：选择器 + 声明块，声明由 CSS 属性名、冒号、值和分号组成。
  4. 能根据书写位置和语法区分 HTML 属性与 CSS 属性，例如判断 style 是 HTML 属性，而 style 中的 width: 600px; 是 CSS 属性。
  5. 能正确书写 CSS 注释，并说明注释用于解释代码或暂时不执行代码的作用。

知识点 ​

先厘清：HTML 与 CSS 的关系 ​

为什么需要：写 CSS 之前必须先知道“样式给谁用”。转写稿反复强调：HTML 实现页面结构，CSS 实现页面样式或表现。CSS 里是一条一条的样式，比如字体大小、宽高、边框、背景色、文字颜色，这些一条一条的内容可以叫“声明”。但声明不能悬空存在，它一定要作用在 HTML 元素上。

怎么想：不要理解成“字体大小是给字设置的”，而要先想“这个字体大小是给哪个元素设置的”。所以写 CSS 的第一步，是确定样式要设置给哪个元素。转写稿里的“H7M6”应纠正为 HTML，“CS”应纠正为 CSS，“复元素”应纠正为父元素，“组先元素”应纠正为祖先元素。

怎么做：同时要理解元素之间的关系。常用五个词：父元素、祖先元素、子元素、后代元素、兄弟元素。以表格中的 tr 为例：tbody 是它的父元素；table、tbody 等包括父元素在内的上层元素统称祖先元素；th、td 是它的子元素，也是后代元素；具有相同父元素的多个 tr 才是兄弟元素。

易错点：兄弟元素只看是否具有相同父元素，不取决于标签名是否相同；转写稿中说的“表兄弟”不算兄弟。caption 和 tbody 标签名不同，但可以有兄弟关系。判断关系只看结构位置，不要按标签名猜。

在 HTML 中使用 CSS 的三种方式 ​

为什么需要：CSS 不能凭空存在，初学阶段要把它写进 HTML 文件，或者用 HTML 关联 CSS 文件。转写稿把三种方式命名为行内式、内嵌式、外链式。

怎么想：行内式是直接把样式写到某个标签的 style 属性里；内嵌式是在 HTML 中写 style 标签；外链式是新建 .css 文件，再用 link 关联。

怎么做：行内式示例：

html
<p style="width: 600px; border: 1px solid red; background-color: #ccc;">
  行内式设置样式
</p>

内嵌式示例：

html
<head>
  <style>
    p {
      width: 600px;
      border: 1px solid red;
      background-color: #ccc;
    }
  </style>
</head>

外链式需要一个 CSS 文件，例如 default.css，里面只写 CSS：

css
p {
  width: 600px;
  border: 1px solid red;
  background-color: #ccc;
}

HTML 中用 link 引入：

html
<link rel="stylesheet" href="default.css">

易错点：行内式可读性差，多个元素要写多遍，不推荐；内嵌式的 style 是标签，不是属性；外链的 CSS 文件里不能再写 style 标签，只能写 CSS；link 的 rel="stylesheet" 不要改，href 写 CSS 文件地址。转写稿中的“外面式”应纠正为“外链式”，“号”应纠正为 href。style 标签和 link 放页面任意位置通常都能生效，但建议放 head 中。

CSS 基本语法结构 ​

为什么需要：内嵌式和外链式要解决“给哪些元素设置样式”的问题，所以需要选择器。行内式已经进入标签内部，不需要选择器。

怎么想：基本结构是“选择器 + 声明块”。声明块由大括号包住，里面是一条条声明；每条声明由 CSS 属性和值组成，形式是“属性: 值;”。

怎么做：

css
p {
  width: 600px;
  border: 1px solid red;
  background-color: #ccc;
}

这里 p 是选择器，决定给哪些元素设置样式；大括号是声明块；width: 600px; 是一条声明；width 是 CSS 属性，600px 是属性值。

易错点：声明末尾的分号要写。转写稿演示中不写分号会标红，属于语法错误；最后一条声明虽然有时可省略分号，但建议统一写上。还要区分 HTML 属性和 CSS 属性：style 虽然功能是写 CSS，但它写在标签里，是 HTML 属性；width、border 等写在声明块里，是 CSS 属性。CSS 属性后跟冒号，HTML 属性后跟等号。CSS 属性不挑元素，选择器选到谁就能给谁设置；HTML 属性属于具体标签，比如 p 没有 width 属性，但可以用 CSS 给 p 设置宽度。

层叠性与注释 ​

为什么需要：CSS 全称是层叠样式表。同一个元素可能被行内式、内嵌式、外链式、不同选择器同时选中，样式会叠加到该元素上。

怎么想：转写稿用“找人”比喻：可以通过名字、身份证号、外部特征找到同一个人；CSS 也可以通过标签名、类名、ID 等选择到同一个元素。不同途径设置的样式最终层叠到一起。

怎么做：例如一个 div 同时有 id、class，又写了行内 style，外部再用选择器设置样式，刷新后这些样式会共同作用。若同一个选择器里相同属性写了两遍，后面的覆盖前面的。不同选择器冲突时，要看选择器权重，转写稿明确说后续再讲，这里不要提前下结论。

易错点：不要把它和 HTML 同名属性混淆。HTML 标签设置同名属性时后一个通常无效；CSS 同一选择器相同属性后写可以覆盖前写。CSS 注释写法是 /* 注释内容 */，可单行也可多行。在 style 标签内部按快捷键通常生成 CSS 注释；在 style 外部则可能是 HTML 注释。注释用于解释代码或暂时不想执行的代码。

说明 ​

本节笔记标题是“附录 VsCode 的使用”，但提供的转写稿内容主要是 HTML/CSS 关系、CSS 三种引入方式、CSS 语法、HTML 属性与 CSS 属性、层叠性和注释，与本节 VSCode 笔记不匹配。为避免编造，下面只按笔记中的 VSCode 内容扩写，不把无关的 HTML/CSS 转写内容硬塞进来；笔记中没有图片，因此不补图片。

使用方式 ​

为什么需要：写前端代码时，通常一个项目包含多个 HTML、CSS、JS 文件和子目录。如果每次只打开单个文件，文件之间不好对照，目录结构也看不清。
怎么想：把“项目文件夹”作为工作区打开，而不是只打开一个文件；新建文件和目录也在 VS Code 里完成，保持结构清晰。
怎么做：按笔记操作：

整个目录拖进vsode
在vscode里面新建文件和目录

实际就是：把项目目录拖入 VS Code 窗口，或使用“文件 → 打开文件夹”；在左侧资源管理器中点击新建文件/新建文件夹图标。
易错点：拖入的是“目录”而不是单个文件；如果左侧没有资源管理器，检查是否隐藏了侧边栏；新建文件时注意扩展名，如 .html、.css，不要只写文件名导致语言模式识别错误。

相关设置 ​

为什么需要：默认设置不一定适合教学和日常开发，比如忘记保存、字体太小、目录层级缩进不明显，都会影响效率。
怎么想：把常用设置分成“编辑体验”和“界面观感”两类：自动保存、字体大小、目录缩进属于编辑体验；颜色主题、文件图标主题属于观感。
怎么做：按笔记逐项设置：

自动保存：  设置 -> Auto Save
字体大小：  设置 -> Font Size
目录结构缩进距离： 设置 ->  Tree: Indent
合并单个目录结构： 设置 ->  Compact Folders  去掉前面的√
颜色主题
文件图标主题

操作路径是打开设置，搜索对应项。Auto Save 可选择 afterDelay 等模式；Font Size 调整编辑器字号；Tree: Indent 调整资源管理器目录缩进；Compact Folders 去掉勾选后，单层目录不会合并显示。颜色主题和文件图标主题可在命令面板或设置中搜索 Color Theme、File Icon Theme。
易错点：Tree: Indent 是左侧目录树的缩进，不是代码缩进；Compact Folders 是“合并单层文件夹”，去掉勾选才会展开；自动保存开启后不要再依赖 Ctrl+S 判断是否保存；设置分“用户”和“工作区”，改错位置可能只对当前项目生效。

快捷键 ​

为什么需要：格式化代码和复制行是高频操作，用快捷键能减少手工调整。
怎么想：先记两个最常用的：格式化当前文档、复制当前行到下一行。
怎么做：

代码自动格式化： alt + shift + f
复制当前行到下一行： 连续按 ctrl+c ctrl+v

格式化前确认文件语言模式正确，例如 HTML 文件应识别为 HTML。复制行时把光标放在当前行，不选中内容，连续按 Ctrl+C、Ctrl+V。
易错点：Alt+Shift+F 没反应时，先看右下角语言模式是否正确，是否安装了对应格式化器；复制行如果先选中了文本，会复制选中内容而不是整行；不同系统或扩展可能改动快捷键。

Emmet 快捷键 ​

为什么需要：手写完整 HTML 结构很慢，Emmet 能用缩写快速生成标签和结构。
怎么想：先掌握两个入口：! 生成 HTML 骨架，标签名+Tab 生成标签；再按笔记设置 Emmet 变量 lang 为 zh-CN。
怎么做：

!
标签名+tab

更多语法见笔记链接：https://docs.emmet.io/abbreviations/syntax/

设置中文变量：

设置语言为zh-CN
设置 -> Emmet: Variables 点击添加项 选择 lang 值 zh-CN

在 HTML 文件中输入 ! 后按 Tab，应生成 HTML5 骨架；输入 div 后按 Tab 生成 <div></div>。
易错点：Emmet 不生效时，检查文件是否为 HTML 语言模式、Emmet 是否启用；! 后要按 Tab 或回车触发；Emmet: Variables 中新增 lang 的值写 zh-CN，不要写成 zh_CN 或带多余空格。

常用扩展 ​

为什么需要：VS Code 本体轻量，中文界面、浏览器预览、本地服务器、中文占位文本等能力常通过扩展补齐。
怎么想：按用途装：汉化、打开浏览器、本地服务器、中文假文。不要一次装太多无关扩展。
怎么做：在扩展面板搜索并安装：

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
open in browser
Live Server
Chinese Lorem

中文语言包安装后按提示重启或切换显示语言；open in browser 用于在浏览器打开当前 HTML；Live Server 启动本地服务器并支持保存后刷新；Chinese Lorem 用于生成中文占位文本。
易错点：中文包安装后没生效，检查显示语言是否切换并重启；Live Server 要右键 HTML 文件选择“Open with Live Server”；扩展装多了可能冲突，出现异常时先禁用最近安装的扩展排查。

作业目标：把 HTML 结构与 CSS 样式连起来 ​

以下统一纠正转写稿中的同音字：复元素→父元素，组先元素→祖先元素，生明→声明，死料→style，号→href，IEL→rel。本节作业不是孤立背标签，而是把“结构归 HTML、样式归 CSS”落实到代码里，并能解释每一步为什么这样写。

HTML 与 CSS 的分工：先确定样式作用在谁身上 ​

为什么需要：只说“HTML 管结构、CSS 管样式”太笼统，写代码时容易把样式写错位置。怎么想：CSS 是一条条声明，如字体大小、宽高、边框、背景色、文字颜色；每条声明必须作用到某个 HTML 元素上。怎么做：写样式前先问“我要设置给哪个元素”，再决定用行内式、内嵌式还是外链式。易错点：不要以为“字体大小只是给字设置”，它首先是给某个元素设置；元素没选对，样式就不会按预期生效。

元素关系五词：父、祖先、子、后代、兄弟 ​

为什么需要：CSS 选择器和后续“父元素怎么着、后代也跟着生效”都依赖这些关系。怎么想：以表格为例，tr 的父元素是直接包裹它的 tbody；table 是 tr 的祖先；th、td 是 tr 的子元素，也是后代；同一父元素下的多个 tr 才是兄弟。怎么做：判断关系只看位置，不看标签名。易错点：不同 tbody 下的 tr 不是兄弟；caption 和 tbody 同属 table 的子元素，可以互为兄弟。转写稿里“表兄弟不算兄弟”就是这个意思。

三种引入方式：行内式、内嵌式、外链式 ​

为什么需要：CSS 必须写进 HTML 页面才能生效，但写法不同，维护成本不同。怎么想：先写无样式 HTML，再加样式刷新观察变化。怎么做：

html
<!-- 行内式：style 是 HTML 全局属性，值里写 CSS 声明 -->
<p style="width: 600px; padding: 10px; border: 1px solid red; background-color: #ccc;">段落</p>
html
<!-- 内嵌式：style 是标签，写在 head 中；p 选择器会选中所有 p -->
<head>
  <style>
    p {
      width: 600px;
      border: 1px solid red;
      background-color: #ccc;
    }
  </style>
</head>
html
<!-- 外链式：新建 default.css，用 link 关联；rel 固定为 stylesheet -->
<link rel="stylesheet" href="default.css">
css
/* default.css 中只写 CSS，不要再写 style 标签 */
p {
  width: 600px;
  border: 1px solid red;
  background-color: #ccc;
}

易错点：行内式代码挤在一行、可读性差，且多个元素要重复写；外链式不要把 <style> 粘进 .css 文件；style 标签和 link 标签虽可放页面其他位置生效，但建议放 head 中。

CSS 基本语法：选择器、声明块、声明 ​

为什么需要：内嵌式和外链式必须先“选中元素”，否则不知道样式给谁。怎么想：p { ... } 中 p 是选择器，大括号是声明块，里面每条“属性: 值;”是一条声明。怎么做：选择器决定选一个或多个元素；声明块里写多条声明；每条声明用分号结尾。易错点：分号不写，编辑器会标红，语法错误；最后一条虽可省略，但建议统一写；style 属性是 HTML 属性，里面的 width、color 才是 CSS 属性。

HTML 属性与 CSS 属性：别把 style 当 CSS 属性 ​

为什么需要：同一个需求可能两种写法都能做，但性质不同。怎么想：看书写位置和符号——HTML 属性写在标签里，后跟等号；CSS 属性写在声明里，后跟冒号。怎么做：

html
<img src="图片地址" alt="示例图片" width="400" height="300">
<img src="图片地址" alt="示例图片" style="width: 400px; height: 300px;">

易错点：width 不是所有标签都有，给 p 写 HTML 的 width 不生效；CSS 的 width 通过选择器或行内 style 可作用到 p。图片设置宽高更推荐 CSS；style 本身是 HTML 属性，不是 CSS 属性。

层叠性与注释：为后续选择器权重留接口 ​

为什么需要：同一元素可能被行内式、内嵌式、外链式、不同选择器同时设置样式。怎么想：只要选择器选到该元素，样式就会层叠上去；冲突时后续会讲选择器权重，本节先留印象。怎么做：同一选择器内相同属性写两遍，后写覆盖前写；CSS 注释用 /* ... */，HTML 注释用 <!-- ... -->。在 <style> 内按快捷键得到的是 CSS 注释，在 style 外得到的是 HTML 注释。易错点：不要用 HTML 注释包 CSS 声明；注释可解释代码，也可暂时屏蔽不想执行的代码。

作业检查清单与调试过程 ​

先写 HTML 看无样式效果；加行内式，只应影响目标元素；改内嵌式 p 选择器，三个 p 应同时变化；新建 default.css，用 link 关联后刷新，样式应生效；故意删一个分号看编辑器标红；把 style 或 link 移到 head 中确认规范写法。最后检查：元素关系词是否用对，三种方式代码是否保留，alt 是否写成中文说明，HTML 属性与 CSS 属性是否分清。

课堂画面 ​

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例 ​

示例一：内嵌式 —— CSS 基本语法结构（选择器 + 声明块 + 声明） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS 基本语法结构</title>
  <style>
    /* 这是 CSS 注释：快捷键 Ctrl + / （光标在 style 内时） */

    /* 选择器：选中页面中所有 p 元素，一个或多个 */
    p {
      width: 600px;              /* 声明 = CSS属性 : 值 ; */
      padding: 20px;             /* 内边距（内部补白） */
      border: 1px solid red;     /* 边框 */
      background-color: #ccc;    /* 背景色 */
    }

    h1 {
      font-size: 100px;
      color: #900;
      font-weight: normal;       /* 虽然又大又红，但不粗 */
    }
  </style>
</head>
<body>
  <h1>CSS 的使用</h1>
  <p>第一个段落：选择器一次就能把页面里所有 p 都选中并设置样式。</p>
  <p>第二个段落：写 CSS 的第一步，永远是先确定样式要设置给哪个元素。</p>
  <p>第三个段落：每条声明之间用分号隔开，一条占一行可读性最好。</p>
</body>
</html>

关键行与易错点

  • p { ... }：p 是选择器，决定“给哪些元素设置样式”；后面的大括号叫声明块。
  • width: 600px;：一条声明由「CSS 属性 : 属性值」组成，以分号结尾。
  • <style> 是标签（内嵌式），不是属性；它和行内式的 style 属性同名但完全是两回事，别混。
  • 建议把 <style> 放在 <head> 中（写在哪都能生效，但放 head 符合标准、加载更快）。
  • 易错：最后一条声明的分号虽然可以省略，但统一写上；漏写分号该声明会标红、整条失效。
  • 易错：Ctrl + / 在 <style> 内部生成的是 /* */（CSS 注释），在 <style> 外部生成的才是 HTML 注释 <!-- -->。

示例二：外链式 —— 结构与样式分离（两个文件） ​

css
/* 文件名：default.css  —— .css 文件里只能写 CSS，绝不能写 <style> 标签 */
p {
  width: 600px;
  padding: 20px;
  border: 1px solid red;
  background-color: #ccc;
}

h1 {
  font-size: 100px;
  color: #900;
  font-weight: normal;
}
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>外链式</title>
  <!-- link 是单标签：rel 固定写 stylesheet，href 写 CSS 文件地址 -->
  <link rel="stylesheet" href="./default.css">
</head>
<body>
  <h1>CSS 的使用</h1>
  <p>第一个段落：样式全部来自外部 default.css 文件。</p>
  <p>第二个段落：内嵌式和外链式的 CSS 代码是一模一样的。</p>
  <p>第三个段落：正式发布时通常都用外链式，让结构和样式彻底分离。</p>
</body>
</html>

关键行与易错点

  • <link rel="stylesheet" href="./default.css">：link 是单标签，rel 的值必须是 stylesheet，不要改；href 写 CSS 文件路径（相对路径、绝对路径都可以）。
  • CSS 文件的扩展名必须是 .css；HTML 文件的扩展名是 .html，两者要用 link 关联起来，否则写了也白写。
  • 内嵌式与外链式本质是一回事，只是代码放的位置不同：一个在 <style> 里，一个在独立 .css 文件里。
  • 易错：复制粘贴时把 <style> 标签一起粘进 .css 文件 —— .css 里只能写 CSS，带上标签就失效。
  • 易错：rel 写错或 href 路径写错，页面完全没样式；link 同样建议放 <head> 中。

示例三：行内式 + 层叠性 + HTML 属性与 CSS 属性的区别 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>行内式与层叠性</title>
  <style>
    /* 标签选择器 */
    div {
      padding: 20px;
      border: 1px solid red;
    }

    /* 类选择器：前面加点，选 class="item" 的元素 */
    .item {
      background-color: #ccc;
      background-color: green;   /* 同一选择器里相同属性写两遍，后边的覆盖前边的 */
      text-decoration: underline;
      font-weight: bold;
    }

    /* ID 选择器：前面加井号，选 id="box" 的元素 */
    #box {
      color: #900;
    }
  </style>
</head>
<body>
  <!-- 行内式：style 是 HTML 属性，值里写 CSS；它和上面的选择器样式会叠加到一起 -->
  <div class="item" id="box" style="width: 600px;">层叠性测试：行内式、类选择器、ID 选择器都作用在我身上</div>

  <!-- 用 HTML 属性设宽度：p 标签没有 width 属性，不生效 -->
  <p width="600">我是第一个 p，width 写在标签上是 HTML 属性，p 没有这个属性，所以不起作用</p>

  <!-- 用 CSS 属性设宽度：生效 -->
  <p style="width: 600px;">我是第二个 p，width 写在 style 里是 CSS 属性，任何元素都能作用上</p>
</body>
</html>

关键行与易错点

  • style="width: 600px;"：行内式不用写选择器（已经写在标签内部了），只写「属性名: 值」，因此只能给当前这一个标签设置样式，且代码全挤在一行、可读性极差，不推荐。
  • style 这个 style 是HTML 属性（后面跟等号 =）；width、color 这些是 CSS 属性（后面跟冒号 :）——判断依据是书写位置，不是功能。
  • 层叠性：行内式、div 标签选择器、.item 类选择器、#box ID 选择器设置的样式会全部叠加到该元素上。
  • 冲突处理：同一个选择器里相同属性写了两遍，后边的覆盖前边的（所以最终背景是绿色）；不同选择器之间的冲突要看选择器权重（后续讲）。
  • 易错：<p width="600"> 完全无效 —— HTML 属性属于某个具体标签，只有该标签定义了才有；而 CSS 属性不挑元素，选择器选上谁就能给谁设。
  • 易错：行内式里的 CSS 也别忘了分号和单位（600px 不能写成 600）。

常见错误 ​

1. 在 .css 文件里写了 <style> 标签

  • 现象：外链引入后页面毫无变化，浏览器控制台报错或整段样式失效。
  • 原因：把内嵌式的代码整段复制进 .css 文件，.css 文件里只能写纯 CSS（选择器 + 声明块），<style> 是 HTML 标签。
  • 修法：删掉 <style> 和 </style>，只保留选择器和声明块；.css 文件里出现任何尖括号都要警惕。

2. 声明末尾漏写分号

  • 现象：编辑器里整段标红，或者后面的几条声明莫名其妙不生效。
  • 原因：分号是声明的结束符，漏写后浏览器无法判断下一条声明从哪开始，会把后续内容一起吞掉。
  • 修法：每条声明都以 ; 结尾，包括最后一条（虽然语法上可省，但统一写上，避免后续追加声明时踩坑）。

3. 把 HTML 属性当成 CSS 属性用

  • 现象：给 <p> 写 width="600"，页面没反应；给 <img> 用 width 属性能生效，就以为所有标签都能这么干。
  • 原因：HTML 属性属于具体标签，只有该标签定义过的属性才有效（img 有 width，p 没有）；而 CSS 属性通过选择器作用于任意元素。
  • 修法：结构用 HTML 属性，尺寸/颜色/边框等表现一律交给 CSS；判断依据是书写位置——写在标签里且用等号连接的是 HTML 属性，写在 {} 里用冒号连接的是 CSS 属性。style 本身是 HTML 属性，它里面的内容才是 CSS。

4. 行内式里用等号或漏写分号

  • 现象：style="width=600px" 或 style="color:red width:600px" 不生效。
  • 原因：把 HTML 的 = 语法带进了 CSS，或者多条声明之间没有分隔。
  • 修法：style 属性值内部严格按 CSS 语法写：属性名: 值;，多条声明用分号隔开。

5. 选择器忘记加点或井号

  • 现象：写了 item { ... }，结果一条样式都没应用上。
  • 原因：不加前缀的 item 是标签选择器，找的是 <item> 标签；而页面上的 item 是 class 值。
  • 修法：类选择器写 .item，ID 选择器写 #box，标签选择器才直接写标签名。写完后自查：我到底想按什么条件选元素？

6. 用 <!-- --> 给 CSS 写注释

  • 现象：注释内容直接显示在页面上，或导致样式失效。
  • 原因：<!-- --> 是 HTML 注释，只在 <style> 外部有效；进入 CSS 语境后必须用 CSS 注释。
  • 修法：CSS 注释统一用 /* ... */，单行多行都用它；在 <style> 内按 Ctrl + / 会自动生成正确形式。

7. 给多个同类元素逐个写行内 style

  • 现象：三个 <p> 要一样的外观，就在每个标签里各写一遍 style，改一个颜色要改三处。
  • 原因：行内式只作用于当前标签，无法复用。
  • 修法：改用内嵌式或外链式，用一个标签选择器 p { ... } 一次性命中全部；正式项目中优先外链式，实现结构与样式分离。

练习 ​

练习 1（辨析） 下面四个片段中，标出哪些是 HTML 属性、哪些是 CSS 属性，并说明判断依据： ① <img src="a.jpg" width="400"> ② <div style="width: 400px"> ③ <p class="item"> ④ p { color: red; } 中的 color

练习 2（三种引入方式） 新建 index.html 和 style.css，要求：用外链式给页面中所有 <p> 设置 width: 600px、background: #ccc、border: 1px solid red；再用行内式单独给其中一个 <p> 把背景改成绿色。写出两个文件的完整代码，并说明为什么最终那个 <p> 显示绿色。

练习 3（语法结构拆解） 写出下面这段 CSS 的语法结构分解：指明选择器、声明块、每条声明、每条声明的属性名与属性值，并指出哪一条声明如果漏写分号会出问题。

css
h1 { font-size: 100px; color: #900; }
p  { width: 600px; border: 1px solid #333; background: #ccc; }

练习 4（层叠性验证） 对一个 <div id="box" class="item"> 同时用四种途径设置样式：行内式设宽度、标签选择器设内边距、.item 设背景色、#box 设文字颜色。写完后回答：这些样式是否全部生效？如果把 .item 和 #box 都设置背景色且值不同，最终显示哪一个？为什么？

练习 5（纠错） 下面代码有 3 处错误，找出来并改正：

html
<link rel="stylesheet" href="style.css">
<style>
  p { width: 600px
      color: red; }
  .item { background: #ccc; }
</style>
<!-- 这是段落样式 -->
<p style="font-size=20px; color: blue">文字</p>

（假设 style.css 内容为 <style> p { border: 1px solid red; } </style>）

原视频对照 ​

#视频时长
1HTML和CSS的关系06:38
2HTML中使用CSS的三种方式18:50
3CSS基本语法结构08:40
4HTML属性和CSS属性05:27
5CSS注释07:44
6CSS注释01:25

小结 ​

  1. 写 CSS 的第一步永远是确定样式作用在哪个元素上，选择器承担的就是这个职责；行内式因为已经身处标签内部，所以不需要选择器。
  2. 完整 CSS 语法的骨架是「选择器 + 声明块」，声明块由多条「属性名: 值;」组成；行内式是这条骨架的简化版——去掉选择器，只留声明。
  3. 三种引入方式的本质区别只在代码存放位置：行内式在标签属性里，内嵌式在 <style> 里，外链式在独立 .css 文件里再用 <link> 关联。后两者语法完全一致，只是搬运了位置。
  4. <style> 和 <link> 写在页面任何位置都能生效，但规范做法是放进 <head>：既符合「head 放非内容信息」的定义，也让样式先于内容加载，避免页面重排闪烁。
  5. HTML 属性与 CSS 属性是两种东西，区分标准是书写位置和连接符号，不是功能——style 这个 HTML 属性里装的才是 CSS 属性，正如 href 是 HTML 属性一样。
  6. HTML 属性与标签是从属关系（只有定义过的属性才可用），CSS 属性与元素是合作关系（选择器选到谁，谁就能用）；所以给图片设尺寸这类需求，统一用 CSS 更通用也更推荐。
  7. 「层叠」指的是不同方式、不同选择器设置的样式会叠加到同一个元素上；发生冲突时由选择器权重决定，权重相同则后写的覆盖先写的——这与 HTML 同名属性「后写的无效」规则正好相反。
  8. 注释要分清语境：<style> 之外用 <!-- -->，<style> 之内和 .css 文件中一律用 /* */；正式项目优先外链式，做到结构（HTML）与样式（CSS）彻底分离。