CSS (Cascading Style Sheets) ist eine Sprache, die zum Entwerfen und Stylen von Webseiten verwendet wird. Es ermöglicht Ihnen, verschiedene äußere Eigenschaften von Elementen auf einer Seite festzulegen, z. B. Farbe, Schriftgröße, Einzug und vieles mehr. Das Anpassen von CSS-Stilen kann es Webentwicklern ermöglichen, schöne und funktionale Websites zu erstellen.
In dieser exemplarischen Vorgehensweise werden wir die Grundlagen der Arbeit mit CSS-Stilen untersuchen und lernen, wie man Stile auf verschiedene Elemente einer Webseite erstellt und anwendet. Wir werden uns auch einige gebräuchliche CSS-Eigenschaften ansehen, mit denen Sie das Aussehen von Elementen steuern können.
Schritt 1: Erstellen Sie zunächst eine CSS-Datei und verknüpfen Sie sie mit einer Webseite. Fügen Sie dazu die folgende Codezeile zum Abschnitt hinzu head ihre HTML-Seite:
Schritt 2: Jetzt können Sie mit dem Hinzufügen von Stilen zur CSS-Datei beginnen. Sie können das Element auswählen, auf das Sie den Stil anwenden möchten, indem Sie die CSS-Selektoren verwenden. Um beispielsweise den Kopfzeilenstil der ersten Ebene zu ändern, können Sie den folgenden Code schreiben:
Im obigen Beispiel legen wir die rote Farbe und die Schriftgröße für alle Überschriften der ersten Ebene auf der Seite auf 36 Pixel fest.
Definieren von Stilen in CSS
In CSS werden Stile mit Selektoren und Stildeklarationen definiert. Selektoren werden verwendet, um Elemente auf der Webseite auszuwählen, auf die Stile angewendet werden. Stildeklarationen legen fest, wie die ausgewählten Elemente aussehen sollen.
Um beispielsweise die Textfarbe aller Überschriften der ersten Ebene auf einer Webseite zu ändern, können wir den folgenden CSS-Code verwenden:
| Selektor | Stildeklaration |
|---|---|
| h1 | color: red; |
Dies bedeutet, dass alle Elemente auf der Webseite eine rote Textfarbe haben.
In CSS können Sie auch Stile für Klassen und Elementbezeichner definieren, sodass Sie das Aussehen bestimmter Elemente auf der Seite besser anpassen können.
Um beispielsweise den Stil für ein Element mit der Schaltfläche-Klasse anzupassen, können wir den folgenden CSS-Code verwenden:
| Selektor | Stildeklaration |
|---|---|
| .Knopf | background-color: blue; |
Dies bedeutet, dass Elemente mit der Button-Klasse eine blaue Hintergrundfarbe haben.
Das Definieren von Stilen in CSS ermöglicht daher eine flexible und effiziente Möglichkeit, das Erscheinungsbild einer Webseite anzupassen.
Externe CSS-Stile
Um externe CSS-Stile zu erstellen, benötigen Sie:
- Öffnen Sie einen Texteditor und erstellen Sie eine neue Datei mit der Erweiterung .css .
- In einer CSS-Datei können Sie verschiedene Stile für verschiedene HTML-Elemente definieren. Sie können beispielsweise Textfarbe, Schriftart, Einzug, Hintergrundbild und vieles mehr festlegen.
- Speichern Sie die CSS-Stylesheet-Datei.
- Fügen Sie in einem HTML-Dokument innerhalb eines Tags ein Tag mit den Attributen rel , type und href hinzu. Das rel-Attribut muss den Wert "stylesheet" haben, der type den Wert "text/css" und das href–Attribut den Pfad zur CSS–Stylesheet-Datei.
Jetzt sind alle Stile in der styles-Datei definiert.das CSS wird auf Ihr HTML-Dokument angewendet.
Inline-CSS-Stile
Normalerweise werden CSS-Stile in einer separaten Datei angegeben, die an ein HTML-Dokument angehängt wird. Es gibt jedoch auch die Möglichkeit, Inline-Stile in CSS zu verwenden. In diesem Fall werden die Stile direkt innerhalb des HTML-Tags angegeben.
Um Inline-Stile hinzuzufügen, müssen Sie das style-Attribut für das HTML-Tag verwenden, für das der Stil angewendet werden soll. Im style-Attribut werden die durch Semikolons getrennten Zeichnungsregeln angegeben.
Um beispielsweise die Hintergrundfarbe und die Textfarbe für einen Absatz festzulegen, können Sie den folgenden Code verwenden:
Этот текст будет иметь желтый фон и синий цвет.
In diesem Beispiel verwenden wir die background-color-Eigenschaft, um einen gelben Hintergrund festzulegen, und die color-Eigenschaft, um die blaue Farbe des Textes festzulegen.
Inline-CSS-Stile sind ein praktisches Werkzeug, um bestimmten Elementen auf einer Seite schnell Stile hinzuzufügen. Sie haben jedoch ihre Grenzen und es wird nicht empfohlen, sie für globale Stile der gesamten Website zu verwenden. Es ist besser, externe Stile für diesen Zweck zu verwenden.
Wenn Sie dieselben Stile auf mehrere Elemente auf einer Seite anwenden möchten, wird die Verwendung von Stilklassen oder IDs empfohlen, um die Lesbarkeit und die Codewartbarkeit zu verbessern.
Interne CSS-Stile
Mit den internen CSS-Stilen können Sie Stile direkt im HTML-Dokument festlegen. Dies geschieht mit einem speziellen Tag . Im Gegensatz zu externen Stilen benötigen interne Stile keine separate CSS-Datei und werden direkt in das HTML-Dokument geschrieben.
Um die internen CSS-Stile zu definieren, müssen Sie die Selektoren und die entsprechenden Stilregeln innerhalb des Tags angeben.
pЭтот текст будет красным и иметь размер шрифта 18px
In diesem Beispiel haben wir angegeben, dass alle Elemente
sie müssen eine rote Textfarbe und eine Schriftgröße von 18 Pixeln haben.
Interne Stile können sehr nützlich sein, wenn Sie Stile für ein bestimmtes Dokument definieren möchten, es ist jedoch nicht wünschenswert, eine separate CSS-Datei zu erstellen.
Sie haben jedoch ihre Nachteile. Die internen Stile werden auf jeder Seite dupliziert, sodass Sie beim Ändern der Stile Änderungen an jeder HTML-Datei vornehmen müssen. Außerdem erschweren sie das Lesen und Warten von Code, da sich die Stile und das Markup an derselben Stelle befinden.
Die inneren Stile bleiben jedoch ein praktisches Werkzeug, wenn Sie die Stile eines kleinen Teils des HTML-Dokuments schnell definieren oder mit dem Aussehen von Elementen auf einzelnen Seiten experimentieren müssen.
Kaskadierende CSS-Stile
Kaskadierung in CSS bedeutet, dass Stile auf verschiedenen Ebenen definiert und auf Elemente einer Webseite angewendet werden können, abhängig von der Reihenfolge der Vererbung und der Spezifität der Regeln.
Die gängigste Methode zum Festlegen von Stilen besteht darin, externe CSS-Dateien zu verwenden. Eine externe Stylesheet-Datei enthält alle Stylesheet-Regeln und -Definitionen und wird mithilfe eines Tags mit der Webseite verbunden :
Innerhalb von CSS-Stylesheets werden Regeln mit Selektoren und Deklarationen definiert. Selektoren legen fest, auf welche Elemente der Stil angewendet wird, und Deklarationen legen die Stile selbst fest.
Es gibt verschiedene Arten von Selektoren in CSS:
- Elementselektoren - werden nach ihrem Namen auf HTML-Elemente angewendet (z. B. p, h1, div).
- Klassenselektoren - gelten für Elemente mit bestimmten Klassen (z. B. .my-class).
- ID-Selektoren - gelten für Elemente mit bestimmten IDs (z. B. #my-id).
- Nachkommen-Selektoren - werden auf Elemente angewendet, die Nachkommen anderer Elemente sind (z. B. div p).
Wenn Sie CSS-Cascading-Stile verwenden, können Sie auch verschiedene Stileigenschaften festlegen, z. B. Farbe, Hintergrund, Schriftart, Einzug, Rahmen usw. Eigenschaften können entweder in absoluten Werten (z. B. Pixeln) oder in relativen Werten (z. B. Prozentsätzen oder em) angegeben werden.
Durch die Verwendung von Cascading Styles können Sie das Erscheinungsbild einer Webseite einfach und flexibel ändern und Stile auf mehreren Seiten wiederverwenden. Sie verfügen außerdem über leistungsstarke Funktionen, um das Erscheinungsbild von Elementen anzupassen und Ihr eigenes einzigartiges Design zu erstellen.
