初めての CSS 実験：基礎をマスターする

はじめに

🧑‍💻 Linux や LabEx が初めてですか？Linux のクイックスタートコースから始めることをおすすめします。

こんにちは、LabEx へようこそ！この最初の実験では、CSS での古典的な「Hello, World!」プログラムを学びます。

下の続けるボタンをクリックして、実験を開始してください。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この中級レベルの実験の完了率は 78%です。学習者から 99% の好評価を得ています。

こんにちは、CSS

WebIDE ではすでに index.html ファイルが作成されています。これを開いて、いくつかの HTML コードを追加しましょう。

<!doctype html>

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

次に、右下隅のGo Liveボタンをクリックします。これにより、ポート 8080 でローカル Web サーバーが起動します。

これで、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 を使用する

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タブに切り替え、更新ボタンをクリックして変更を確認します。