W3Docs

Darstellung

Deutsch

HTML-Stile - CSS ​

CSS wird verwendet, um HTML zu gestalten. Es bestimmt, wie die HTML-Elemente auf dem Bildschirm, auf Papier oder in anderen Medien erscheinen.

CSS spart viel Arbeit. Es kann das Layout mehrerer Seiten auf einmal steuern.

Sie können CSS auf HTML-Elemente auf 3 Arten hinzufügen:

  • Inline, wobei das style-Attribut in HTML-Elementen verwendet wird.
  • Intern, wobei das Element <style> im Abschnitt <head> verwendet wird.
  • Extern, wobei eine externe CSS-Datei verwendet wird.

Schauen wir uns jede Möglichkeit an.

Inline-CSS ​

Inline-CSS wendet einen bestimmten Stil auf ein einzelnes HTML-Element an. Hier wird das style-Attribut eines HTML-Elements verwendet.

Im folgenden Beispiel ist die Textfarbe des Elements <p> rot:

Beispiel für Inline-CSS: ​

Beispiel für Inline-CSS

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Usage of the inline CSS</h1>
    <p style="color:red;">The paragraph is red.</p>
  </body>
</html>
Try it Yourself »

Internes CSS ​

Internes CSS legt einen Stil für eine einzelne HTML-Seite fest. Es wird im Element <code><head></code> einer HTML-Seite innerhalb eines <code><style></code>-Tags definiert:

Beispiel für internes CSS: ​

Beispiel für internes CSS

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: yellow;
      }
      h1 {
        font-size: 30px;
      }
      p {
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Externes CSS ​

Ein externes Stylesheet legt den Stil für mehrere HTML-Seiten fest. Es kann das Aussehen der gesamten Website ändern, indem nur eine Datei geändert wird.

Um ein externes Stylesheet zu verwenden, sollten Sie im <code><head></code>-Element der HTML-Seite einen Link dazu hinzufügen: ### Beispiel für das externe CSS-Stylesheet:

Beispiel für das externe CSS-Stylesheet

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Die Datei darf keinen HTML-Code enthalten und muss mit der Erweiterung .css gespeichert werden.

CSS-Schriftarten ​

Die Eigenschaft CSS color beschreibt die Farbe des Textinhalts.

Die Eigenschaft CSS font-family definiert die Schriftart des Textinhalts.

Die Eigenschaft CSS font-size definiert die Textgröße.

Beispiel für CSS-Schriftarten: ​

Beispiel für CSS-Schriftarten

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: #008000;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 200%;
      }
      p {
        color: #666666;
        font-family: 'New Roman', serif;
        font-size: 150%;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

CSS-Rahmen ​

Die Eigenschaft CSS border legt Werte für alle vier Seiten eines Elements fest.

Beispiel für die CSS-border-Eigenschaft: ​

Beispiel für die CSS-border-Eigenschaft

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dotted red;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

CSS-Abstand innen ​

Die Eigenschaft CSS padding legt den Innenabstand (Abstand) zwischen dem Text und dem Rahmen fest.

Beispiel für die CSS-padding-Eigenschaft: ​

Beispiel für die CSS-padding-Eigenschaft

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dashed #008022;
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

CSS-Außenabstand ​

Die Eigenschaft CSS margin erzeugt Abstand um das Element herum.

Beispiel für die CSS-margin-Eigenschaft: ​

Beispiel für die CSS-margin-Eigenschaft

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dashed #090fce;
        margin: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Das id-Attribut ​

Das id-Attribut legt einen bestimmten Stil für ein Element fest.

Beispiel für das id-Attribut: ​

Beispiel für das id-Attribut

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #large-text {
        border: 8px groove powderblue;
        font-size: 24px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p id="large-text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Das class-Attribut: ​

Das class-Attribut wird verwendet, um einen Stil für bestimmte Arten von Elementen festzulegen.

Beispiel für das class-Attribut: ​

Beispiel für das class-Attribut

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        border: 8px inset powderblue;
        font-size: 20px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p class="text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p class="text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Übung ​

What are the ways to add CSS styles to an HTML document according to the article from w3docs?

Finden Sie das nützlich?

Dual-run-Vorschau — vergleichen Sie mit den Symfony-Routen live.