HTML 样式
你已经能搭建页面结构，并用路径指向其他文件。初学者接下来常问的是如何改变内容的外观：文字颜色、背景和大小。在早期 HTML 练习中，可以用 style 属性做到这一点。它是通往 CSS 概念的一扇小门——适合演示——而完整的站点设计会在学习路径的稍后阶段进入正式的 CSS。
什么是 style 属性？
style 属性允许你把 CSS 声明直接写在某个 HTML 元素的开始标签上。浏览器读取这些声明，并据此绘制该元素。你并不是从零发明第二种语言：你是在 HTML 已经提供的位置上写简短的 CSS 规则。因此行内样式是很好的教学工具，即便专业项目很少把全部设计都留在属性里。
直接回答
用元素上的 style="property: value;" 添加外观。入门属性包括 color（文字前景色）、background-color（内容背后的区域）和 font-size（文字大小）。把整份列表放在引号内。多个声明用分号分隔。对于真实的多页站点，更宜使用 CSS 文件或 <style> 块，以免在每个标签上重复同一套外观——但本课请专注于读懂并写出清晰的行内声明。
属性与值，一次一个
每条声明都有一个属性（你想改什么）和一个值（应当怎样呈现）。两者之间是冒号。初学者应先把少数几个属性学扎实，再去记一长串清单。
每个段落一个属性
html<p style="color: blue;">蓝色文字</p>
<p style="background-color: lightyellow;">浅黄背景</p>
<p style="font-size: 24px;">更大的文字</p>如何阅读示例
color: blue只改变该段落的文字颜色background-color: lightyellow给文字背后的区域上色font-size: 24px设置文字大小；px是初学者常用单位- 每个段落有各自的
style="..."，因此三种效果彼此独立、容易看清 - 像
blue这样的命名颜色适合练习；之后你还会见到#336699这类十六进制值
若浏览器里毫无变化，请确认已保存文件、刷新了页面，并且整段 style 值都包在引号里。
一个属性里的多条声明
你可以在单个 style 属性中组合多条声明。列表保持简短，HTML 才易读。每条声明以分号结束——末尾再加一个分号也可以，以后编辑时往往更清晰。
组合的 style 声明
html<p style="color: navy; background-color: #f0f0f0; font-size: 18px;">
浅灰背景上的藏青色文字
</p>为什么这个模式重要
- 一个元素可以同时带上颜色、背景和字号
- 分号分隔声明，浏览器才能解析每一对
#f0f0f0是十六进制颜色；对初学者非必需，但在真实 CSS 中很常见- 段落里可见的句子是普通 HTML 文本；只有
style属性改变外观
第一天不要把十个设计决定塞进一个属性。先用两三个清晰属性学会语法。
不同元素上的 style
style 属性不只限于 p。标题、span 以及许多其他元素都可以同样使用。这有助于你看清：样式跟随你附加到的那个元素——而不是某个神奇的全局开关。
带 style 的标题与段落
html<h1 style="color: darkgreen;">花园笔记</h1>
<p style="color: #333333;">深灰色的普通正文。</p>
<p style="background-color: honeydew; font-size: 20px;">带柔和绿色背景的高亮提示。</p>注意什么
h1的颜色不会自动重设段落样式- 第二段同时组合了背景和字号
- 行内样式是局部的：它影响该元素（按普通 CSS 规则也可能影响子元素——但眼下请把演示保持简单）
现在用行内 style，以后用 CSS
行内 style 适合快速试验。当二十个页面都需要同一种藏青色标题，而你必须改二十个属性时，就会很痛苦。共享 CSS——文档 head 中的 <style> 块，或外部 .css 文件——把外观集中在一处。本课程后面有专门的 CSS 学习。在本 HTML 会话中，你的任务是理解 property:value 的想法，并写出几个正确的行内示例，而不是把行内样式当作整个网站的最终架构。
在编辑器中练习
- 创建带一个
h1和三个短段落的页面。 - 给第一段文字
color。 - 给第二段
background-color。 - 给第三段
color与font-size的组合。 - 可选：用自己的
style给h1上色。 - 保存并刷新。确认每一块看起来都不同。
- 故意弄坏一个示例（去掉引号或
px），刷新，看到失败，再修复。
处理失败的 style，比只复制完美样例更能快速学会引号和单位。
会让样式“消失”的错误
- 忘记给值加引号：在正常的 HTML 属性写法中，
style=color:red无效 - 把
color（文字）和background-color（文字背后）搞混，以为“颜色没起作用” - 在需要单位的尺寸处省略单位（许多初学者情况下写
font-size: 24而不是24px） - 使用会把直引号换成弯引号的文字处理软件写入属性
- 把整页设计塞进行内样式，而不是接着学习共享 CSS
- 改了文件却忘了在刷新前保存——浏览器仍显示旧版本
小结
style属性把 CSS 声明加到一个 HTML 元素上- 写
property: value;，并把整份列表放在引号内 - 入门属性：
color、background-color、font-size - 用分号组合少量声明；演示保持简短易读
- 行内样式非常适合学习和微小试验，不适合维护整个站点的设计
- 当你想在一处控制外观时，共享 CSS 会在学习路径的下一步出现
- 务必用保存 + 刷新验证；样式“神秘失效”时检查引号和单位
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部