Eine CSS-Datei ist eine wichtige Komponente jeder Website. Es bietet die Möglichkeit, das Erscheinungsbild und den Stil der Elemente einer Webseite zu ändern, um sie attraktiver und benutzerfreundlicher zu machen. Aber wie können Anfänger mit diesem Tool umgehen? In diesem Artikel erfahren Sie, wie Sie eine CSS-Datei einrichten, und geben Ihnen einige nützliche Tipps, um damit zu arbeiten.
Schritt 1: Erstellen einer CSS-Datei
Zuerst müssen Sie eine CSS-Datei erstellen. Um dies zu tun, öffnen Sie einfach einen beliebigen Texteditor und speichern Sie die Datei mit der Erweiterung .css. Normalerweise wird eine CSS-Datei als style bezeichnet.css oder main.css, aber Sie können einen beliebigen Titel auswählen, den Sie mögen.
Schritt 2: Verbinden der CSS-Datei
Nachdem Sie die CSS-Datei erstellt haben, müssen Sie sie mit der Webseite verbinden. Dazu im Tag head fügen Sie den folgenden Code ein:
Wo statt style.css geben Sie den Pfad zu Ihrer CSS-Datei an. Wenn sich die CSS-Datei beispielsweise im selben Ordner wie die Webseite befindet, sieht der Pfad wie folgt aus href="style.css".
Sie haben also gelernt, eine CSS-Datei zu erstellen und zu verbinden. Betrachten wir nun, wie Sie darin Stile für Elemente einer Webseite festlegen können. Die Fortsetzung folgt.
Was ist eine CSS-Datei
Mit CSS können Sie die Farben, Schriftarten, Größen und Platzierung von Elementen auf einer Seite ändern. Es bietet die Möglichkeit, dieselben Stile auf viele Elemente anzuwenden, was die Entwicklung und Aktualisierung von Websites erheblich vereinfacht.
Eine CSS-Datei kann mit einem Tag an ein HTML-Dokument angehängt werden link. Innerhalb der CSS-Datei werden Selektoren verwendet, die auf die Elemente verweisen, auf die die Stile angewendet werden sollen. Stile werden mithilfe von Eigenschaften und Werten festgelegt, die das Erscheinungsbild der Elemente bestimmen.
Eine einzelne CSS-Datei kann mehrere Selektoren enthalten und verschiedene Stile für verschiedene Elemente kombinieren. Dadurch können Sie ein einheitliches und konsistentes Erscheinungsbild für die gesamte Website erstellen.
Das Anwenden von Stilen aus einer CSS-Datei kann lokal auf einer Seite erfolgen oder mit einer externen CSS-Datei verbunden werden. Die letzte Option ermöglicht die Verwendung einer einzelnen CSS-Datei für mehrere Seiten, was die Effizienz erhöht und den Prozess der Designaktualisierung vereinfacht.
Insgesamt ist die CSS-Datei ein wesentlicher Bestandteil der Webentwicklung, um ein ansprechendes und strukturiertes Erscheinungsbild für Webseiten zu schaffen.
Wie erstelle ich eine CSS-Datei
- Erstellen Sie ein neues Textdokument.
- Öffnen Sie das erstellte Dokument mit einem Texteditor wie Notepad oder Sublime Text.
- Fügen Sie oben im Dokument eine Zeile hinzu .
- Speichern Sie die Datei mit der Erweiterung .css, zum Beispiel, styles.css.
- Verbinden Sie die erstellte CSS-Datei mithilfe eines Tags mit dem HTML-Dokument .
- Speichern Sie das HTML-Dokument, und öffnen Sie es in einem Webbrowser, um die angewendeten Stile anzuzeigen.
Jetzt wissen Sie, wie Sie eine CSS-Datei erstellen. Mit dieser Datei können Sie Stile für Ihre Webseiten festlegen und sie attraktiver und funktionaler gestalten.
Verbinden von CSS mit einer HTML-Seite
Um Stile auf eine HTML-Seite anzuwenden, müssen Sie ein Stylesheet (CSS) anhängen. Diese Tabelle enthält eine Reihe von Anweisungen, wie Elemente auf einer Webseite aussehen sollten.
Es gibt mehrere Möglichkeiten, CSS mit einer HTML-Seite zu verbinden. Betrachten Sie die häufigsten von ihnen:
- Methode # 1: Integrierte Stile
- Methode # 2: Innere Stile
- Methode # 3: Externe Stile
Methode # 1: Inline-Stile
Eingebettete Stile werden auf einzelne Elemente oder eine Gruppe von Elementen auf einer Webseite angewendet. Sie werden durch das style-Attribut des Tags definiert, auf das sie sich beziehen.
Dies ist ein Absatz mit eingebautem Stil:
Der Text dieses Absatzes ist blau.
Methode # 2: Innere Stile
Interne Stile werden mithilfe eines Tags auf Elemente auf einer Webseite angewendet
Dieser Absatz wird ebenfalls blau sein.
Methode # 3: Externe Stile
Externe Stile werden mithilfe einer separaten Formatvorlagen-Datei auf eine HTML-Seite angewendet, die über ein Tag mit der HTML-Datei verbunden wird
Dies ist ein Absatz mit Stilen aus einer externen Datei:
Текст этого абзаца будет отображен в соответствии с указанными стилями.
Wenn Sie also CSS mit einer HTML-Seite verbinden, können Sie Stile auf Elemente auf einer Webseite anwenden. Mit integrierten, internen und externen Stilen können Sie für jede Webseite ein einzigartiges Design erstellen.
Grundlegende CSS-Eigenschaften
| Eigenschaft | Die Beschreibung |
|---|---|
| color | Legt die Textfarbe fest |
| background-color | Legt die Hintergrundfarbe des Elements fest |
| font-size | Legt die Schriftgröße fest |
| font-family | Legt die Schriftfamilie fest |
| font-weight | Legt die Schriftsättigung fest |
| text-align | Richtet den Text horizontal aus |
| text-decoration | Legt Textdekorationen wie Unterstreichungen fest |
| margin | Legt die äußeren Einrückungen des Elements fest |
| padding | Legt die inneren Einrückungen des Elements fest |
| border | Legt den Stil, die Dicke und die Farbe des Elementrahmens fest |
Dies ist nur eine kleine Liste der grundlegenden Eigenschaften, die in CSS verwendet werden. Jede Eigenschaft hat ihre eigenen Werte, die Sie festlegen können, um das Erscheinungsbild von Elementen auf einer Webseite zu ändern. Durch die Kombination verschiedener Eigenschaften und Werte können Sie den gewünschten Stil und das gewünschte Erscheinungsbild für Ihre Website erreichen.
Wie verwende ich Klassen und IDs
Ein Punkt wird verwendet, um eine Klasse in CSS zu erstellen. "class"gefolgt vom Klassennamen, z. B.:.class
Um eine Klasse auf ein HTML-Element anzuwenden, fügen Sie dem öffnenden Tag des Elements das Attribut "class" hinzu und geben den Klassennamen an, z. B.:
Этот текст будет стилизованDie Bezeichner in CSS werden mit dem Gitterzeichen "#" angegeben, gefolgt von dem Namen des Bezeichners, z. B.:
#identifier
Um eine ID auf ein HTML-Element anzuwenden, fügen Sie dem öffnenden Tag des Elements das Attribut "id" hinzu und geben den Namen der ID an, z. B.:
Этот текст будет стилизован
Mithilfe von Klassen und IDs können Sie Stile auf bestimmte Elemente auf einer Seite anwenden, sodass Sie deren Aussehen und Layout steuern können.
Vererbung und Prioritäten
Durch die Vererbung in CSS können Sie Eigenschaften von einem Element zum anderen erben. Wenn Sie beispielsweise einen Stil auf ein Tag anwenden. Alle untergeordneten Elemente haben diesen Stil ebenfalls, es sei denn, sie haben einen separaten Stil für sie festgelegt. Es gibt Prioritäten in CSS, die bestimmen, welcher Stil im Falle eines Konflikts angewendet wird. Hier sind die Grundprinzipien der Priorisierung in CSS:
| Priorität | Ein Beispiel |
|---|---|
| Integrierte Stile | |
| ID-Selektoren | #myDiv |
| Klassen, Pseudoklassen und Attribute | .myClass , :hover , [type="text"] |
| Tags und Pseudoelemente | p , ::before |
| Universal-Wahlschalter | * |
Sie können das Schlüsselwort verwenden, um die höchste Priorität festzulegen!important nach dem Wert der Eigenschaft. Zum Beispiel:
Daher hat die color-Eigenschaft die höchste Priorität und wird auf alle Tags angewendet, auch wenn sie andere Stile mit geringerer Priorität haben. Mithilfe von Vererbung und Prioritäten können Sie Stile in Webseiten effizient organisieren und verwalten, um das gewünschte Erscheinungsbild und Verhalten der Elemente zu erreichen.
