zhaoJians Tech-Notizen

IT-Kurs CSS-Grundlagen 019_HelloCSS

Lernen / CSS-Grundlagen ~9329 Wörter · 24 Min. Lesezeit - Aufrufe

Was ist CSS?

CSS (Cascading Style Sheets) ist ähnlich wie HTML keine echte Programmiersprache und nicht einmal eine Auszeichnungssprache. CSS ist eine Stylesheet-Sprache, die verwendet wird, um HTML-Elementen Stile hinzuzufügen, das Erscheinungsbild von HTML-Dokumenten zu beschreiben und Farbe, Größe, Schriftart, Layout usw. von HTML-Dokumentelementen zu steuern.

CSS ist ein wichtiger Bestandteil der Webentwicklung und kann Ihnen helfen, ansprechende und benutzerfreundliche Webseiten zu erstellen.

Grundstruktur von CSS

CSS-Stile bestehen aus Selektoren und Eigenschaften. Selektoren wählen die HTML-Elemente aus, auf die Stile angewendet werden sollen. Eigenschaften legen die Werte der Stile fest.

Beispiel:

p {
    color: red;
}

Ergebnis:

Beispieleffekt

Strukturanalyse:

Beispieleffekt

[!Zusammenfassung]

  • Selektor (Selector) Der Name des HTML-Elements steht am Anfang des Regelsets. Er wählt ein oder mehrere Elemente aus, denen Stile hinzugefügt werden sollen (in diesem Beispiel das <p>-Element). Um verschiedenen Elementen Stile hinzuzufügen, ändern Sie einfach den Selektor.

  • Deklaration (Declaration) Eine einzelne Regel wie color: red; legt die Eigenschaften der zu gestaltenden Elemente fest. CSS-Deklarationen enden immer mit einem Semikolon ; und werden von geschweiften Klammern {} umschlossen:

  • Eigenschaften (Properties) Der Weg, um HTML-Elementstile zu ändern (in diesem Beispiel ist color die Eigenschaft des <p>-Elements). In CSS entscheidet der Autor, welche Eigenschaft geändert werden soll.

  • Eigenschaftswert (Property value) Rechts von der Eigenschaft, nach dem Doppelpunkt, steht der Eigenschaftswert, der einen Wert aus den vielen möglichen Erscheinungsformen auswählt (neben red gibt es viele andere Eigenschaftswerte für color).

Wie bindet man CSS ein?

Inline-Einbindung:

CSS-Code wird direkt in HTML-Tags geschrieben, unter Verwendung des style-Attributs.

Inline-Einbindung bedeutet, den Stilcode direkt in HTML-Tags zu schreiben, eine einfache und schnelle Methode. Vorteile: bequem und schnell, geeignet für wenige Stile. Nachteile:

  • Ungünstig für Wiederverwendung, schwer zu warten.
  • HTML-Dateien werden unübersichtlich, verstößt gegen das Trennungsprinzip.
  • Ungünstig für Browser-Caching, beeinträchtigt die Leistung.

Beispiel:

  <div style="color: red; font-size: 16px;">Dies ist ein roter Text</div>

Ergebnis:

Beispieleffekt

Interne Einbindung:

CSS-Code wird in <style>-Tags geschrieben, innerhalb des <head>-Tags platziert.

Interne Einbindung bedeutet, den Stilcode in den style-Tags der HTML-Datei zu schreiben, ein relativ ausgewogener Ansatz. Vorteile: Stile und HTML-Datei sind getrennt, leicht zu warten. Außerdem kann Browser-Caching die Ladegeschwindigkeit erhöhen. Nachteile:

  • Beim Laden der Seite sind zusätzliche Netzwerkanfragen erforderlich, relativ ineffizient.
  • Stile und HTML-Datei haben noch eine gewisse Kopplung.

Beispiel:

div {
    color: red;
    font-size: 16px;
}
  <div>Dies ist ein roter Text</div>

Ergebnis:

Beispieleffekt

Externe Einbindung:

CSS-Code wird in einer separaten CSS-Datei geschrieben und dann mit dem link-Tag eingebunden.

Externe Einbindung bedeutet, den Stilcode in einer separaten CSS-Datei zu schreiben, eine standardmäßige Methode. Vorteile: Stile und HTML-Datei sind vollständig getrennt, leicht zu warten. Außerdem kann CDN-Beschleunigung die Ladegeschwindigkeit erhöhen. Externe Einbindung unterstützt auch Komprimierung und Zusammenführung zur Reduzierung der Dateigröße. Nachteile:

  • Beim Laden der Seite sind zusätzliche Netzwerkanfragen erforderlich, aber optimierbar.
  • Abhängigkeit von externen Ressourcen, kann zu Blockierung oder Ladefehler führen.
  • Während der Entwicklung können mehrere Anfragen an externe Dateien erforderlich sein.

Beispiel:

<head>


<!-- Im aktuellen Verzeichnis, Verweis auf Stylesheet im Unterordner styles -->
<link rel="stylesheet" href="style.css" />


<!-- Im aktuellen Verzeichnis, Verweis auf Stylesheet im Unterordner styles/general -->
<link rel="stylesheet" href="/style.css" />


<!-- Im übergeordneten Verzeichnis, Verweis auf Stylesheet im Unterordner styles -->
<link rel="stylesheet" href="../styles/style.css" />


</head>
div {
    color: red;
    font-size: 16px;
}

Ergebnis:

Beispieleffekt Beispieleffekt

Kaskadierungsreihenfolge und Priorität

Die CSS-Kaskadierungsreihenfolge (Cascading Order) und Spezifität (Specificity) sind zwei Schlüsselfaktoren, die den angezeigten CSS-Stil bestimmen.

Kaskadierungsreihenfolge: Die CSS-Kaskadierungsreihenfolge definiert das Gewicht der Stilregeln, von hoch nach niedrig:

  1. Wichtigkeit (!important): Mit !important deklarierte Stilregeln haben die höchste Priorität. Sollte sparsam verwendet werden, da Missbrauch die Wartung erschwert.
  2. Autorstile (Author Styles): Vom Webentwickler definierte Stile, einschließlich externer, interner und Inline-Stile. Priorität liegt zwischen Benutzerstilen und User-Agent-Stilen.
  3. Benutzerstile (User Styles): Vom Benutzer über Browser-Plugins oder Einstellungen festgelegte Stile, Priorität höher als User-Agent-Stile, z.B. Schrift-Plugins.
  4. User-Agent-Stile (User Agent Styles): Die Standardstile des Browsers, niedrigste Priorität, z.B. Schriftarten.

Priorität: Wenn mehrere Stilregeln derselben Ebene oder widersprüchliche Regeln vorhanden sind, zeigt CSS die Stile nach Priorität an.

  1. Inline-Stile (Inline Styles): In HTML-Tags angegebene Stile, höchste Priorität.
  2. ID-Selektor (id): Über ID-Selektor angegebene Stile, z.B. #header.
  3. Klassen-, Attribut- und Pseudoklassen-Selektoren (class): Über class-Selektor, z.B. .container. Über Attributselektor, z.B. [type="text"]. Über Pseudoklassen-Selektor, z.B. :hover.
  4. Element-Selektor: Selektor mit HTML-Elementnamen, z.B. div, p.

Bei gleicher Priorität hat die zuletzt definierte Regel Vorrang.

Beispiel:

#header {
    color: red;
}


.container p {
    color: blue;
}


p {
    color: green;
}
CSS-Vererbung

CSS-Vererbung bedeutet, dass Kindelemente bestimmte Eigenschaftswerte von Elternelementen erben. Vererbung ist ein wichtiges Merkmal in CSS, das das Schreiben von Stilen vereinfacht und die Wartbarkeit des Codes verbessert. Nicht alle CSS-Eigenschaften sind vererbbar, nur ein Teil der Eigenschaften ist als vererbbar definiert.

Die vererbbaren CSS-Eigenschaften umfassen hauptsächlich:

  • Texteigenschaften: font-family, font-size, font-weight, font-style, color, text-decoration, text-align, line-height, letter-spacing, word-spacing
  • Farbeigenschaften: background-color, border-color, color, outline-color
  • Rahmeneigenschaften: border-width, border-style, border-color
  • Box-Modell-Eigenschaften: margin, padding, width, height, display, float, position, z-index

Nicht vererbbare CSS-Eigenschaften sind z.B. width, height, margin, padding und andere Box-Modell-Eigenschaften, Positionierung (position), Float (float), Clear (clear) und andere Layout-Eigenschaften.

Häufig verwendete CSS-Eigenschaften und ihre Funktionen:

Grundeigenschaften width, height: Breite und Höhe des Elements festlegen. margin: Außenabstand des Elements festlegen. padding: Innenabstand des Elements festlegen. color, background-color: Farbe und Hintergrundfarbe des Elements festlegen. font-size, font-family, font-weight, font-style: Schriftgröße, Schriftart, Schriftstärke und Schriftstil festlegen.

Layout-Eigenschaften display: Anzeigemodus des Elements festlegen. float: Float-Verhalten des Elements festlegen. position: Position des Elements festlegen. top, left, right, bottom: Oben, links, rechts und unten Position festlegen. z-index: Stapelreihenfolge des Elements festlegen.

Texteigenschaften text-align: Textausrichtung des Elements festlegen. text-decoration: Textdekoration des Elements festlegen. line-height: Zeilenhöhe des Elements festlegen. font-variant: Schriftvariante des Elements festlegen. text-transform: Texttransformation des Elements festlegen. letter-spacing, word-spacing: Zeichenabstand und Wortabstand festlegen.

Rahmeneigenschaften border: Rahmenstil des Elements festlegen. border-width: Rahmenbreite festlegen. border-style: Rahmenstil festlegen. border-color: Rahmenfarbe festlegen. border-radius: Rahmeneckenradius festlegen.

Hintergrundeigenschaften background: Hintergrund des Elements festlegen. background-color: Hintergrundfarbe festlegen. background-image: Hintergrundbild festlegen. background-repeat: Wiederholungsmodus des Hintergrundbilds festlegen. background-position: Position des Hintergrundbilds festlegen. background-size: Größe des Hintergrundbilds festlegen.

Übergangseigenschaften transition: Übergangseffekt des Elements festlegen. transition-property: Übergangseigenschaft festlegen. transition-duration: Übergangsdauer festlegen. transition-timing-function: Übergangsfunktion festlegen. transition-delay: Übergangsverzögerung festlegen.

IT-Kurs HTML-Kurs CSS-Kurs JavaScript-Kurs Java-Kurs Computersysteme und Netzwerk hello css CSS-Grundlagen
Teilen:

Kommentare