2024 ke

HTML und CSS

Idee HTML, CSS

  • HTML-Seiten enthalten und strukturieren Inhalte in Form von Texten, Bildern und anderen Objekten.

  • CSS-Anweisungen beschreiben die Darstellung und das Layout (Style) einer HTML-Seite.

Anzustreben ist die Trennung von Inhalt und Darstellung innerhalb der Site.

HTML-Elemente

HTML-Elemente wie Links, Bilder, DIVs etc. werden vom Browser je nach Element-Typ dargestellt als

  • Inline-Elemente (hintereinander auf der selben Zeile)

oder als

  • Block-Elemente (Element jeweils auf einer neuen Zeile)

oder auch als

  • inline-block-, flex- oder grid-Elemente

Der Typ eines Elements kann mittels CSS festgelegt werden.
Beispiel: div { display:inline-block; }

Siehe dazu die Selfhtml-Site.

CSS Styles einfügen

CSS-Anweisungen können auf 3 Arten einem HTML-Dokument zugeordnet werden:

  • Inline Styles, für ein HTML-Tag

  • Embedded Styles, für eine Seite

  • Linked Styles, CSS-Datei zu einer ganzen Site

CSS Selektoren

Einige Beispiele:

    #single_box  {  }   
    .menu_box    {  }   
    .menu_box a  {  }   
    .menu_box a:hover {  }

CSS, Überschreiben

Nachfolgende Deklarationen überschreiben vorhergehende.

CSS, Vererbung

Innere Elemente erben von äusseren Elementen, sind Teil der Äusseren.

Das CSS Box Modell

CSS Box Modell

Achtung: FireFox/Chrome und IE benutzen unterschiedliche Boxdarstellungen (Box-Modelle).

Standardisierung HTML, CSS

Siehe W3C Organisation.