你的第一个 CSS 实验：掌握基础知识

介绍

🧑‍💻 刚接触 Linux 或 LabEx？我们建议从 Linux 快速入门 课程开始。

你好，欢迎来到 LabEx！在第一个实验中，你将学习经典的 "Hello, World!" 程序，不过这次是用 CSS 来实现。

点击下方的继续按钮开始实验。

Hello CSS

我们已经在 WebIDE 中创建了 index.html 文件。让我们打开它并添加一些 HTML 代码。

<!doctype html>

<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello HTML</h1>
  </body>
</html>

WebIDE 中的 HTML 代码

然后点击右下角的 Go Live 按钮，这将在 8080 端口上运行一个本地 Web 服务器。

现在，你可以切换到 Web 8080 标签页，并点击刷新按钮查看更改。

Web 8080 标签页视图

添加 CSS

让我们在 index.html 文件中添加一些 CSS 代码。

<!doctype html>

<html>
  <head>
    <title>My First Web Page</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello HTML</h1>
  </body>
</html>

切换到 Web 8080 标签页，并点击刷新按钮查看更改。

应用了 CSS 样式的 Hello HTML

使用外部 CSS

我们已经在 WebIDE 中创建了 style.css 文件。让我们打开它并添加一些 CSS 代码。

h1 {
  color: red;
}

p {
  color: blue;
}

然后，修改 index.html 文件以使用外部 CSS 文件。

<!doctype html>

<html>
  <head>
    <title>My First Web Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello HTML</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

切换到 Web 8080 标签页，并点击刷新按钮查看更改。

应用了外部 CSS 的网页

总结

恭喜！你已经完成了你的第一个 LabEx 实验。

如果你想了解更多关于 LabEx 以及如何使用它的信息，可以访问我们的支持中心。或者你可以观看视频以了解更多关于 LabEx 的内容。

编程是一段漫长的旅程，但 下一个实验 只需点击一下即可开始。让我们继续吧！