Ihr erstes CSS-Lab: Grundlagen meistern

Einführung

🧑‍💻 Neu bei Linux oder LabEx? Wir empfehlen, mit dem Kurs Quick Start with Linux zu beginnen.

Hallo und herzlich willkommen bei LabEx! In diesem ersten Lab lernen Sie das klassische "Hello, World!"-Programm in CSS kennen.

Klicken Sie auf die Schaltfläche Weiter unten, um das Lab zu starten.

Hallo CSS

Wir haben bereits die Datei index.html im WebIDE erstellt. Öffnen wir sie und fügen wir etwas HTML-Code hinzu.

<!doctype html>

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

Klicken Sie dann auf die Schaltfläche Go Live in der unteren rechten Ecke. Dadurch wird ein lokaler Webserver auf Port 8080 gestartet.

Jetzt können Sie zur Registerkarte Web 8080 wechseln und auf die Aktualisierungsschaltfläche klicken, um die Änderungen zu sehen.

Hinzufügen von CSS

Fügen wir etwas CSS-Code zur Datei index.html hinzu.

<!doctype html>

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

Wechseln Sie zur Registerkarte Web 8080 und klicken Sie auf die Aktualisierungsschaltfläche, um die Änderungen zu sehen.

Verwendung von externem CSS

Wir haben bereits die Datei style.css im WebIDE erstellt. Öffnen wir sie und fügen wir etwas CSS-Code hinzu.

h1 {
  color: red;
}

p {
  color: blue;
}

Ändern Sie dann die Datei index.html, um die externe CSS-Datei zu verwenden.

<!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>

Wechseln Sie zur Registerkarte Web 8080 und klicken Sie auf die Aktualisierungsschaltfläche, um die Änderungen zu sehen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben Ihr erstes LabEx-Lab abgeschlossen.

Wenn Sie mehr über LabEx erfahren und lernen möchten, wie Sie es nutzen können, können Sie unseren Support Center besuchen. Oder Sie können sich das Video ansehen, um mehr über LabEx zu erfahren.

Programmieren ist eine lange Reise, aber das nächste Lab ist nur einen Klick entfernt. Lassen Sie uns anfangen!