练习 - 使用 CSS 概念

  • 7 分钟

你希望开始设计你的简历网页样式。 首先，选择字体并设置页面上使用的各种元素的大小。

本模块使用 vscode.dev - 基于 Web 的 Visual Studio Code 和 CodeSwing 版本。 这些工具有助于简化开发过程。 无需本地安装即可完成以下练习。

创建项目

首先，您需要在 vscode.dev 中创建一个文件夹，设置您的工具，然后使用 CodeSwing 创建一个代码样例。 Swing 将自动显示 vscode.dev 中的代码的结果。 将 Microsoft Visual Studio Code 与 CodeSwing 配合使用可让你快速进行修改，并预览实时发生的更新。

  1. 在桌面上创建名为“简历”的文件夹。
  2. 打开 vscode.dev。
  3. 选择“打开文件夹”。
  4. 导航到之前创建的“简历”文件夹，然后选择“选择文件夹”。
  5. 当系统提示“允许网站查看文件”时，选择“查看文件”。
  6. 选择“扩展”按钮。

    Visual Studio 扩展按钮的屏幕截图。

  7. 在“在市场中搜索扩展”文本框中，键入“CodeSwing”。
  8. 选择“安装”以安装 CodeSwing。
  9. 选择 Ctrl+Shift+P（在 Mac 上为 Cmd-Shift-P），打开命令面板。
  10. 在命令面板中键入“CodeSwing”，然后选择“CodeSwing: 目录中的新 Swing”。
  11. 选择“选择文件夹”以使用当前目录（这是你在上一步中创建的目录）。
  12. 选择“基本: HTML/CSS/JavaScript”。
  13. 如果系统提示“保存更改以继续”，选择“保存更改”。
  14. 选择 vscode.dev 中script.js 旁边的 x 以关闭 JavaScript 文件，因为您在练习期间不会使用此文件。

Visual Studio Code 并排创建两个部分。 左侧是编辑器，可在其中输入 HTML 和 CSS。 right 的行为类似于浏览器，显示代码的结果。

创建 HTML

您使用现有的 HTML 以允许我们仅关注 CSS。 此 HTML 包含用于引用 CSS 文件的 link 元素。

  • 将以下 HTML 复制到标题为 index.html 的窗口中：

    <html>
    <head>
        <title>Your Name resume</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1>Your Name</h1>
        <a href="mailto:your-email@example.com">your-email@example.com</a>

        <div id="social-media">
            <h2>Social media</h2>
            <ul>
                <li><a href="https://github.com/">GitHub</a></li>
                <li><a href="https://linkedin.com/in/">LinkedIn</a></li>
                <li><a href="https://x.com/">X</a></li>
            </ul>
        </div>

        <h2>Education</h2>
        <h3>School name</h3>
        <h4>Major</h4>
        <ul>
            <li>GPA: 4.0</li>
            <li>Years attended</li>
        </ul>

        <h2>Experience</h2>
        <div class="experience">
            <h3>Company name</h3>
            <h4>Title</h4>
        </div>
        <div class="experience">
            <h3>Cool hackathon</h3>
            <h4>Project title</h4>
        </div>

    </body>
</html>

设置字体类型和大小

默认情况下，大多数浏览器使用衬线字体，例如 Times New Roman。 你希望将页面默认值设置为更常用的字体。 此外，还希望设置页面和各种标题的字体大小。

  1. 在名为 style.css 的文件中，使用后退选项添加以下 CSS 以在 元素上将字体系列设置为 Verdana，并将字体大小设置为 12 像素：

    html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

    你正在使用 html 元素更新根字体和大小调整。 html使用元素允许您使用rem大小调整。

  2. 请注意，页面会自动更新更改。

  3. 将以下 CSS 代码添加到 style.css 的末尾以设置 到 h1 的大小。

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem 基于根大小，即 14 像素。 例如，此 CSS 将 的大小 h1 设置为 22.4 像素。

  4. 此页面在 vscode.dev 中会自动更新。

  5. 保持窗口打开，因为你将在下一个练习中使用它。

结果和后续步骤

以下屏幕截图是在本练习中应用的 CSS 的结果。 如果想要体验不同的字体和大小，可以根据需要修改 CSS。

浏览器中呈现的最终页面的屏幕截图。