江苏龙网

  1. 主页 > 生活百科 > >

使用 CSS 提升你的 HTML 文档

css


使用 CSS 提升你的 HTML 文档

文章插图
当你编写文档时，无论是为开源项目还是技术写作项目，你都应该有两个目标：文档应该写得好，同时要易于阅读 。前者通过清晰的写作技巧和技术编辑来解决 。第二个目标可以通过对 html 文档进行一些简单的更改来解决 。
超文本标记语言（HTML）是互联网的支柱 。自 1994 年“万维网”问世以来，所有网络浏览器都使用 HTML 来显示文档和网站 。几乎与此同时，HTML 一直支持样式表，它是对 HTML 文档的一种特殊添加，用于定义文本在屏幕上的呈现方式 。
单纯用 HTML 编写项目文档也是可以的 。然而，纯 HTML 样式可能感觉有点简陋 。因此，尝试向 HTML 文档添加一些简单的样式，为文档添加一点活力，并使文档更清晰、更易于阅读 。
定义一个 HTML 文档让我们从一个纯 HTML 文档开始，探索如何向其添加样式 。一个空的 HTML 文档在顶部包含 ??<!DOCTYPE html>??? 定义，后面跟着一个 ??<html>??? 块来定义文档本身 。在 ??<html>??? 元素中，你还需要加上一个文档标头，其中包含有关文档的元数据，例如标题 。文档正文的内容放在父 ??<html>??? 块内的 ??<body>?? 块中 。
你可以使用以下 HTML 代码定义一个空白页面：
<!DOCTYPE html><html><head><title>这是一个新文档</title></head><body></body></html>在另一篇关于 ??用 HTML 编写项目文档??? 的文章中，我将一个开源棋盘游戏的自述文件从纯文本更新为 HTML 文档，并使用一些基本的 HTML 标记，如 ??<h1>??? 和 ??<h2>??? 作为标题和副标题，??<p>??? 用于段落，??<b>??? 和 ??<i>?? 用于粗体和斜体文本 。让我们从那篇文章结束的地方继续讲：
<!DOCTYPE html><html><head><title>简易 S.NET</title></head><body><h1>简易 Senet</h1><h2>游戏玩法</h2><p>游戏会自动为你“投掷”投掷棒，并在屏幕右下角显示结果 。</p><p>如果“投掷”结果为零，你失去本轮机会 。</p><p>轮到你的时候，游戏会自动选择你在棋盘上的第一块棋子 。你不一定能够用这个棋子走棋，所以选择你的棋子移动，然后按 <i>Space</i>（或 <i>Enter</i>）移动它 。你可以通过几种不同的方法进行选择：</p><ul><li><i>向上</i>/<i>向下</i>/<i>向左</i>/<i>向右</i> to朝特定方块移动 。</li><li>加号 (<b>+</b>) 或减号 (<b>-</b>) 使棋子在棋盘上向“左”或向“右”移动 。请注意，它们会自动遵循棋盘的“倒过来的 S”方向移动 。</li><li><em>Tab</em>在棋盘上选择下一个你想要移动的棋子 。</li></ul><p>要随时退出游戏，请按 <b>Q</b>（大写Q）或按 <i>Esc</i>，这样游戏会提示你是否想要放弃比赛 。</p><p>如果你比对手更快将所有棋子移出棋盘，你就赢得了比赛 。这同时需要运气和游戏策略！</p></body></html>此 HTML 文档演示了利用 HTML 的技术写作者经常使用的一些块和内联元素 。块元素在围绕文本定义一个矩形 。段落和标题就是块元素，因为它们从文档的左边缘延伸到右边缘 。例如，??<p>??? 在段落周围包含一个不可见的矩形 。相比之下，内联元素的使用则紧跟在它们包围的文本 。如果你在段落中的某些文本上使用 ??<b>???，则只有被 ??<b>??? 和 ??</b>?? 包围的文本会变为粗体 。
你可以将直接样式应用于此文档以更改字体、颜色和其他文本样式，但修改文档外观的更有效方法是将样式表应用于文档本身 。你可以在 ??<head>??? 元素中使用其他元数据执行此操作 。你可以为样式表引用文件，但在这个例子中，我使用 ??<style>??? 块在文档中定义样式表 。以下是带有空样式表的 ??<head>?? ：
<!DOCTYPE html><html><head><title>简易 Senet</title><style></style></head><body>...</body></html>


推荐阅读


上一篇：研究称ChatGPT可以取代AI训练师

下一篇：没有了