CSS 样式美化
基础CSS 格式：选择器 { 属性: 值; }。标签 p{}、类别 .highlight{}、ID #title{}。盒子模型由内至外：content → padding → border → margin。响应式用 @media (max-width: 600px) 在手机萤幕缩排版。
- CSS 管外观，HTML 管内容；外部 .css 档一处改、全站生效。
- 格式：选择器 { 属性: 值; }；每条宣告以分号结尾。
- 三种选择器：标签 p、类别 .highlight（可重用）、ID #title（全页唯一）。
文体小知识：编程教学课每个概念都配一段可以亲手试的代码例子，照住输入、改一改，最快学会。
§课文原文 Passage
1HTML 管内容，CSS（Cascading Style Sheets，层叠样式表）管外观：颜色、字体、间距、排版全部由它管。接入方法有三种：写在标签上的 style 属性（行内）、写在 ＜style＞ 区块内（页内）、写成独立的 .css 档再用 ＜link＞ 引入（外部）— 外部最好，因为几十页可以共用同一份样式，改一处全站生效。
2CSS 的基本格式是「选择器 { 属性: 值; }」。三种常用选择器：标签选择器 p { } 影响所有段落；类别选择器 .highlight { } 影响标了 class="highlight" 的元素；ID 选择器 #title { } 只影响那一个 id="title" 的元素。例如 p { color: #23634f; font-size: 18px; } 令全部段落变墨绿色、字大 18 像素。
3每个元素其实是一个盒子，这就是盒子模型（Box Model）：最内是内容（content），向外依次是内边距 padding（内容与边框之间的空间）、边框 border、外边距 margin（与其他元素之间的空间）。例如 .card { padding: 16px; border: 2px solid black; margin: 10px; } — 内松、有框、盒与盒之间留距离。
4色彩可以用英文名（red）或十六进制码（#f07f2e 橙色）；字体用 font-family、大小用 font-size、行距用 line-height。还有简单响应式（Responsive）概念：@media (max-width: 600px) { body { font-size: 14px; } } 的意思是「萤幕阔度不足 600 像素（手机）时，字体缩到 14px」— 同一页在电脑和手机都看得舒服。
1重点摘要 Summary
CSS 格式：选择器 { 属性: 值; }。标签 p{}、类别 .highlight{}、ID #title{}。盒子模型由内至外：content → padding → border → margin。响应式用 @media (max-width: 600px) 在手机萤幕缩排版。
2生字卡 Vocabulary
描述网页外观的语言，管理颜色、字体、间距和排版。
指定样式套用到哪些元素的开头部分，例如 p、.highlight、#title。
以点号开头（.highlight），套用于所有标了该 class 的元素，可重复使用。
以井号开头（#title），只套用于该页唯一一个对应 id 的元素。
样式宣告的两半：属性讲改什么（color），值讲改成什么（red），以分号结尾。
每个元素都是盒：内容、内边距 padding、边框 border、外边距 margin 由内至外四层。
padding 是内容与边框之间的空间；margin 是元素与其他元素之间的空间。
以 # 开头的六位颜色代码，例如 #f07f2e 是橙色、#ffffff 是白色。
@media (max-width: 600px) { ... } 令样式只在特定萤幕阔度下生效，是响应式设计的基础。
3逐步讲解 Steps
- 第一句 CSS 与基本格式CSS 管网页外观，HTML 管内容。第一句例子：在 ＜style＞ 区块内写 p { color: red; }，页面所有段落立即变红色。基本格式是「选择器 { 属性: 值; }」：p 是选择器，指定作用对象；color: red 是一条样式规则；行尾分号不可少，多条规则并列时靠它分隔。例如再添 font-size: 18px; 便同时改变字体大小。这种「一处规则、全页生效」的模式，是 CSS 高效率的根源。
- 三种选择器三种常用选择器：标签选择器 p { } 作用于所有段落；类别选择器 .highlight { } 作用于标了 class='highlight' 的元素，一个类别可同时用在多个元素，适合「重点段落」这类重复样式；ID 选择器 #title { } 只作用于 id='title' 的那一个元素，全页唯一，适合点名主标题。选用原则：全体统一用标签选择器，部分共享用类别，单一特别用 ID，层次分明便不易混乱。
- 盒子模型每个元素都是一个盒子，由内至外四层：内容（文字与图片）、内边距 padding（内容与边框之间的空间）、边框 border、外边距 margin（与其他元素之间的空间）。例子：.card { padding: 16px; border: 2px solid black; margin: 10px; }，文字与框之间松 16px，框为 2px 黑实线，卡片与四周元素隔 10px。改任何一层都立即见效；网页排版的微调，本质上就是调整这四层的尺寸。
- 字体、行距与色彩字体与阅读体验：body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.8; } 一口气设定全站字体、16 像素字大与 1.8 倍行距，长文立即易读，行距 1.5 至 1.8 是公认舒适范围。色彩两种写法：color: red 与 color: #ff0000 效果相同；十六进制码三组两位数字分别控制红、绿、蓝的份量，#000000 全黑、#ffffff 全白、#f07f2e 是橙色。网站宜全站统一配色，通常先定一个主色再延伸。
- 响应式设计入门响应式设计让同一页在手机与电脑都好看。入门工具是媒体查询：@media (max-width: 600px) { body { font-size: 14px; } } 的意思是「萤幕阔度不足 600 像素（手机）时，字体缩至 14px」，桌面仍维持 16px。一行代码，两种装置各自舒适；进一步可为手机版收窄边距、隐藏侧栏。现时过半网站流量来自手机，响应式设计已是网页的基本要求，而非额外的加分项。
- 三种接入方式CSS 接入 HTML 有三种：行内样式写在标签的 style 属性上，只影响该元素，优先级最高但难以重用；页内样式写在 ＜style＞ 区块内，影响本页全部元素；外部样式表写成独立的 .css 档，再用 ＜link rel='stylesheet' href='css/style.css'＞ 引入，几十页共用一份，改一处全站生效。正式专案一律采用外部样式表，行内样式只作临时微调，这是业界通行做法。
- 卡片样式实战综合练习：为介绍文字设计「卡片」。样式：.card { background-color: #ffffff; border: 2px solid #000000; border-radius: 14px; padding: 16px; margin: 10px; }，即白底、黑框、14px 圆角、16px 内边距。HTML 端在段落标上 class='card'：＜p class='card'＞这是卡片内的文字。＜/p＞。套用之后网页出现圆角白卡，文字与边框之间留白舒适。这个「类别定义样式、HTML 挂上类别」的流程，是日常 CSS 工作的基本节奏。
4图解 Diagrams
5例题示范 Example
例题：为一段介绍文字设计「卡片」样式 — 白底、黑边框、圆角、内边距足够，并套用到 HTML 上。
- 写选择器：.card { } — 用类别，因为多段文字都要用同一款卡。
- 设底色和边框：background-color: #ffffff; border: 2px solid #000000; — 白底配 2px 黑实线框。
- 加圆角和内边距：border-radius: 14px; padding: 16px; — 角位圆滑，文字与框之间留 16px 空间。
- 套用到 HTML：＜p class="card">这是卡片内的文字。＜/p＞ — 网页上即见白底黑框圆角的卡片效果。
- 答案：.card { background-color: #ffffff; border: 2px solid #000000; border-radius: 14px; padding: 16px; } 配合 ＜p class="card">...＜/p＞ 使用。
6常见错误 Mistakes
75 题快测 Quick check
Q1.highlight { background-color: yellow; } 中的 .highlight 是什么？
Q2盒子模型由内至外的四层次序是什么？
Q3哪个属性控制文字与边框之间的空间？A. margin B. padding C. border
Q4#ffffff 是什么颜色？#000000 又是什么？
Q5@media (max-width: 600px) { body { font-size: 14px; } } 的作用是什么？
8重点回顾 Recap
- CSS 管外观，HTML 管内容；外部 .css 档一处改、全站生效。
- 格式：选择器 { 属性: 值; }；每条宣告以分号结尾。
- 三种选择器：标签 p、类别 .highlight（可重用）、ID #title（全页唯一）。
- 盒子模型：content → padding（内） → border（框） → margin（外）。
- @media (max-width: 600px) 令同一页在手机与电脑都好看 — 响应式的第一步。