你的第一个 CSS 实验

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

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

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CSSPreprocessorsGroup -.-> css/import_and_extend("`Import and Extend`") subgraph Lab Skills css/selectors -.-> lab-92744{{"`你的第一个 CSS 实验`"}} css/colors -.-> lab-92744{{"`你的第一个 CSS 实验`"}} css/import_and_extend -.-> lab-92744{{"`你的第一个 CSS 实验`"}} end

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 的内容。

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

您可能感兴趣的其他 CSS 教程