Leitfaden zum HTML-Dokumentstil

Einführung

Das HTML <style>-Tag wird verwendet, um Stile zu Ihren Webseiten hinzuzufügen. Diese Stile können das Aussehen und das Gefühl Ihrer Website auf verschiedene Weise verändern. In diesem Lab werden Sie lernen, wie Sie das <style>-Tag verwenden, um eine benutzerdefinierte Stylesheet zu erstellen, das auf Ihrer gesamten Webseite verwendet werden kann.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/viewport("Viewport Declaration") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/templating("HTML Templating") subgraph Lab Skills html/basic_elems -.-> lab-70845{{"HTML-Dokumentstil"}} html/head_elems -.-> lab-70845{{"HTML-Dokumentstil"}} html/viewport -.-> lab-70845{{"HTML-Dokumentstil"}} html/text_head -.-> lab-70845{{"HTML-Dokumentstil"}} html/layout -.-> lab-70845{{"HTML-Dokumentstil"}} html/doc_flow -.-> lab-70845{{"HTML-Dokumentstil"}} html/inter_elems -.-> lab-70845{{"HTML-Dokumentstil"}} html/templating -.-> lab-70845{{"HTML-Dokumentstil"}} end

Aufbau der HTML-Struktur

Zunächst legen wir die grundlegende HTML-Struktur auf. Erstellen Sie in Ihrer index.html-Datei folgenden HTML-Code:

<!doctype html>
<html>
  <head>
    <title>Meine Webseite</title>
  </head>

  <body>
    <h1>Willkommen auf meiner Webseite</h1>
    <p>Dies ist mein erster Absatz.</p>
  </body>
</html>

Dieser Code legt eine grundlegende Webseitenstruktur mit einem Header und einem Absatz fest.

Hinzufügen von Inline-Stilen

Der erste Weg, um Stile zu Ihrer Webseite hinzuzufügen, besteht darin, sie direkt in das style-Attribut des HTML-Elements hinzuzufügen. In diesem Schritt werden wir einen Inline-Stil zum h1-Header hinzufügen. Fügen Sie den folgenden Code zu dem h1-Element hinzu:

<h1 style="color: blue; font-size: 36px;">Willkommen auf meiner Webseite</h1>

Dieser Stil erhöht die Schriftgröße und ändert die Kopfzeilenfarbe in blau.

Hinzufügen von eingebetteten Stilen

Das <style>-Tag wird verwendet, um eingebettete Stile zu Ihrer Webseite hinzuzufügen. Sie können innerhalb dieses Tags mehrere Stile hinzufügen. In diesem Schritt werden wir einen eingebetteten Stil verwenden, um Stile zum p-Element hinzuzufügen. Fügen Sie innerhalb des <head>-Tags folgenden Code hinzu:

<style>
  p {
    color: green;
    font-size: 18px;
  }
</style>

Dieser Stil gibt dem Absatz eine grüne Farbe und verringert die Schriftgröße auf 18 Pixel.

Verwenden von CSS-Klassen

CSS-Klassen werden verwendet, um Stile gleichzeitig auf mehrere Elemente anzuwenden. In diesem Schritt werden wir eine Klasse für eine allgemeine Warnmeldung erstellen, die auf unserer gesamten Webseite wiederverwendet werden kann. Fügen Sie diesen Code in das <style>-Tag ein:

<style>
  .warning {
    color: red;
    background-color: yellow;
    border: 1px solid black;
    padding: 10px;
  }
</style>

Dieser Code erstellt einen Stil für eine Warnmeldung, der eine gelbe Hintergrundfarbe, eine schwarze Rahmenlinie und eine rote Textfarbe umfasst.

Als nächstes werden wir diese Klasse auf den h1-Header anwenden. Ändern Sie Ihr h1-Element, um die Klasse hinzuzufügen:

<h1 class="warning">Willkommen auf meiner Webseite</h1>

In diesem Schritt wird ein Warnstil zum Header hinzugefügt.

Hinzufügen externer Stylesheets

Externe Stylesheets werden verwendet, um das Stylesheet von den HTML-Inhalten zu trennen. In diesem Schritt erstellen Sie ein externes Stylesheet, das auf mehreren Webseiten wiederverwendet werden kann.

Erstellen Sie eine neue Datei mit dem Namen style.css. Fügen Sie in style.css folgenden Code hinzu:

h1 {
  font-size: 48px;
}

p {
  font-size: 24px;
}

.warning {
  background-color: green;
}

Dieser Code legt Stile für die h1- und p-Elemente fest und ändert die warning-Klasse, sodass sie eine grüne Hintergrundfarbe hat.

Um dieses externe Stylesheet mit Ihrer index.html-Seite zu verknüpfen, fügen Sie folgenden Code in das <head>-Tag hinzu:

<link rel="stylesheet" type="text/css" href="style.css" />

Dieser Code verknüpft die style.css-Datei mit der index.html-Seite.

Hinzufügen von Media Queries

Media Queries werden verwendet, um unterschiedliche Stile für verschiedene Gerätegrößen anzuwenden. In diesem Schritt werden wir Media Queries verwenden, um die Schriftgröße unserer Elemente anzupassen. Fügen Sie diesen Code zur style.css-Datei hinzu:

@media (max-width: 600px) {
  h1 {
    font-size: 36px;
  }

  p {
    font-size: 18px;
  }
}

Dieser Code passt die Schriftgröße von h1 auf 36 Pixel und die Schriftgröße von p auf 18 Pixel für Bildschirmgrößen kleiner oder gleich 600 Pixel in der Breite an.

Hinzufügen von Selektoren und Verschachtelung

In diesem Schritt werden wir Selektoren und Verschachtelung, zwei fortgeschrittene CSS-Konzepte, vorstellen.

Erstellen Sie eine neue Datei mit dem Namen advanced.css. Fügen Sie in advanced.css folgenden Code hinzu:

header h1 {
  color: blue;
  font-style: italic;
}

main p {
  color: red;
}

Dieser Code wählt das h1-Element innerhalb des header-Elements und wendet eine blaue Farbe und einen kursiven Schriftstil an. Es wählt auch das p-Element innerhalb des main-Elements und wendet eine rote Farbe an.

Um dieses externe Stylesheet mit Ihrer index.html-Seite zu verknüpfen, fügen Sie folgenden Code in das <head>-Tag hinzu:

<link rel="stylesheet" type="text/css" href="advanced.css" />

Dieser Code verknüpft die advanced.css-Datei mit der index.html-Seite.

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie verschiedene Methoden verwenden, um Stile zu Ihrem Webseiten hinzuzufügen. Sie haben begonnen, indem Sie Inline-Stile und eingebettete Stile verwendet haben, und sind dann zu CSS-Klassen und externen Stylesheets übergegangen. Sie haben auch über Media Queries, Selektoren und Verschachtelung gelernt. Mit diesen Methoden können Sie ein benutzerdefiniertes Stylesheet erstellen, das auf Ihrer gesamten Webseite verwendet werden kann, und eine moderne und reaktive Website erstellen.