Cascading Style Sheets (CSS) werden verwendet, um Webseiten zu dekorieren und ihnen ein ästhetisches Aussehen zu verleihen. Bevor Sie jedoch mit dem Erstellen eines atemberaubenden Aussehens Ihrer Website mit CSS beginnen, müssen Sie lernen, wie Sie CSS mit einer HTML-Datei verknüpfen können.
Das Verknüpfen von CSS mit einer HTML-Datei ist ein Prozess, der es einem Webbrowser ermöglicht, ein Stylesheet zu lesen und es auf die Seite anzuwenden, damit es so aussieht, wie es beabsichtigt ist. Glücklicherweise ist das Verknüpfen von CSS mit einer HTML-Datei nicht schwierig, und in diesem Artikel werden wir uns eine vollständige Anleitung zu diesem Prozess ansehen.
Es gibt mehrere Möglichkeiten, CSS mit einer HTML-Datei zu verknüpfen. Eine der einfachsten Methoden ist die Verwendung einer externen CSS-Datei. In diesem Fall erstellen Sie eine separate Datei mit der Erweiterung .css, in dem Sie alle Stilregeln angeben und sie dann mit einer HTML-Datei verknüpfen, indem Sie auf diese Datei verweisen. Dies macht es einfach, die Stile auf Ihrer Website zu ändern, da Änderungen nur an einer Stelle vorgenommen werden müssen - in der CSS–Datei.
CSS-Grundlagen
Die Grundidee von CSS besteht darin, dass Stile basierend auf ihren Selektoren auf Elemente angewendet werden. Mit Selektoren können Sie angeben, auf welche Elemente oder Elementgruppen ein bestimmter Stil angewendet werden soll.
CSS-Stile können sowohl innerhalb eines HTML-Dokuments mithilfe eines Tags als auch über eine externe Stylesheet-Datei angewendet werden, die über ein Element eingebunden werden kann .
Stile in CSS werden als Regeln beschrieben, die aus einem Selektor und einer Deklaration bestehen. Eine Deklaration besteht aus einer oder mehreren Eigenschaften, die den gewünschten Stil eines Elements definieren. Zum Beispiel:
h1Im obigen Beispiel wird ein h1-Selektor verwendet, der angibt, dass der Stil auf Überschriften der ersten Ebene angewendet wird. Die color-Eigenschaft gibt die Farbe des Textes an, und die font-size-Eigenschaft legt die Schriftgröße fest.
Stile in CSS können von übergeordneten Elementen geerbt werden, die Vererbung von Stilen erleichtert das Styling und die Wartung einer Webseite.
Es gibt auch die Möglichkeit, Klassen und IDs in CSS zu erstellen, die es demselben Element ermöglichen, verschiedene Stile anzuwenden.
Durch die Verwendung von CSS können Sie den Inhalt und die Anzeige einer Webseite aufteilen, was die Wartung und Entwicklung der Webseite erleichtert. CSS bietet auch Flexibilität und die Möglichkeit, das Erscheinungsbild einer Seite zu ändern, ohne die Struktur und den Inhalt einer Seite zu ändern.
Externe CSS-Datei
Um eine externe CSS-Datei mit einer HTML-Seite zu verknüpfen, müssen Sie ein Tag verwenden . Die externe CSS-Datei muss an einer bestimmten URL verfügbar sein, die im Attribut angegeben ist href Kennung .
Hier ist ein Beispielcode zum Verknüpfen einer externen CSS-Datei:
Im Beispiel wird eine Datei mit dem Namen "styles.css" muss sich im selben Verzeichnis wie die HTML-Datei befinden. Wenn sich die Datei in einem Unterverzeichnis befindet, müssen Sie einen Pfad relativ zur aktuellen Seite angeben.
Nachdem Sie die externe CSS-Datei verknüpft haben, werden alle in dieser Datei definierten Stile auf die HTML-Seite angewendet. Dies macht es einfach, das Aussehen einer gesamten Webseite zu ändern, indem nur eine einzige CSS-Datei geändert wird.
Das Erstellen einer externen CSS-Datei und das Verknüpfen mit einer HTML-Seite ist eine gute Übung für die Entwicklung von Websites. Dies vereinfacht die Verwaltung von Stilen und die Wiederverwendung von Code und ermöglicht eine konsistente Darstellung aller Projektseiten.
Inneres CSS
Um das interne CSS zu definieren, müssen Sie ein Tag verwenden . Dieses Tag muss in das Tag der Webseite eingefügt werden. Im Tag werden dann alle erforderlichen CSS-Regeln mit Hilfe von Selektoren und Stileigenschaften definiert.
Beispiel für internes CSS:
Внутренний CSS p .important Пример внутреннего CSS
Это обычный абзац с примененными стилями.
А это абзац с классом .important, к которому применен другой стиль.
Im obigen Beispiel haben alle Absätze eine blaue Textfarbe und eine Schriftgröße von 18 Pixeln. Ein Absatz mit der Klasse "important" wird ebenfalls fett geschrieben.
Internes CSS ist praktisch zu verwenden, wenn Stile nur auf eine bestimmte Webseite angewendet werden müssen, und es ist nicht erforderlich, eine separate externe CSS-Datei zu erstellen.
Inline-Stile
Im Folgenden finden Sie ein Beispiel für die Verwendung von Inline-Stilen:
- Elemente sie können einen Inline-Stil mithilfe eines Attributs hinzufügen style. Zum Beispiel: Dieser Text wird rot angezeigt .
- Attribut style kann mehrere CSS-Eigenschaften enthalten, die durch Semikolons getrennt sind. Zum Beispiel: Dieser Text wird rot und hat eine Schriftgröße von 18 Pixeln .
- Inline-Stile haben eine höhere Priorität als externe CSS-Datei oder Inline-Stile und überschreiben sie. Wenn also der äußere Stil die Textfarbe auf Blau und der Inline-Stil auf Rot anzeigt, wird der Text rot angezeigt.
Die Verwendung von Inline-Stilen hat einige Einschränkungen. Sie gelten beispielsweise nur für einzelne Elemente und können nicht auf anderen Seiten erneut verwendet werden. Auch die Verwendung von Inline-Stilen in großen Mengen an Code kann es weniger lesbar und überschaubar machen.
Inline-Stile sind jedoch in einigen Fällen nützlich, wenn Sie Stile schnell auf bestimmte Elemente anwenden möchten, ohne dass Sie eine separate CSS-Datei erstellen oder Über -Tag-Stile einbetten müssen.
Verbinden von CSS über HTML-Tags
Eine der gebräuchlichsten Methoden ist die Verwendung eines Tags . Mit diesem Tag können Sie den Pfad zur CSS-Datei angeben und diese mit der aktuellen Webseite verknüpfen. Ein Beispiel für seine Verwendung:
| Kennung | Requisit | Bedeutung |
|---|---|---|
| rel | stylesheet | |
| type | text/css | |
| href | styles.css |
Bedeutet eine CSS-Datei namens styles.das CSS muss mit der aktuellen Webseite verknüpft sein.
Eine andere Möglichkeit, CSS mit HTML zu verknüpfen, besteht darin, Inline-Stile mit einem Tag zu verwenden . Mit diesem Tag können Sie Stile direkt in HTML-Code einbetten. Anwendungsbeispiel:
p color: red;
>
In diesem Beispiel wird die Textfarbe für alle Tags auf Rot gesetzt
auf der Seite.
Sie können auch das style-Attribut verwenden, um Stile direkt in HTML-Elementen festzulegen. Zum Beispiel:
style="color:blue;">Этот текст будет синим
In diesem Fall wird die blaue Textfarbe für dieses bestimmte Tag festgelegt
.
Wenn Sie diese Methoden befolgen, können Sie das Erscheinungsbild Ihrer Webseite vollständig anpassen, indem Sie CSS-Stile mit HTML-Tags verknüpfen.
Kaskadierung und Vererbung von Stilen
CSS-Kaskadierung bedeutet, dass Stile in mehreren Ebenen und Prioritäten auf Elemente einer Webseite angewendet werden können. Wenn der Browser eine CSS-Datei verarbeitet, wendet er die Stile basierend auf ihrer Reihenfolge in der Datei und ihrer Spezifität an. Stile, die später oder mit höherer Spezifität definiert wurden, ersetzen Stile, die früher oder mit niedrigerer Spezifität definiert wurden.
Durch die Vererbung von Stilen können Elemente einer Webseite automatisch bestimmte Stileigenschaften und -werte von ihren übergeordneten Elementen erben. Wenn Sie beispielsweise einen Stil für ein Tag festlegen
. Alle Absätze auf der Seite erben diesen Stil, es sei denn, Sie legen andere Stile fest, die die geerbten Werte explizit überschreiben.
Die Verwendung von Stilkaskadenz und -vererbung in CSS ermöglicht es Entwicklern, das Erscheinungsbild und das Layout einer Website flexibler zu steuern. Dies ermöglicht auch die Wiederverwendung von Stilen, was die Unterstützung und Aktualisierung des Codes erleichtert.
CSS-Selektoren
Mit CSS-Selektoren können Sie die Elemente einer Webseite auswählen, auf die die Stile angewendet werden sollen. Durch die Verwendung von Selektoren können Sie flexible und leistungsstarke Stile erstellen, die nur auf die gewünschten Elemente angewendet werden.
Typ des Selektors - die häufigste Art von Selektor. Es wählt alle Elemente eines bestimmten Typs aus. Zum Beispiel ein Selektor p wählt alle Elemente aus paragraph auf der Seite.
Selektor nach ID - ermöglicht die Auswahl eines Elements anhand seiner eindeutigen ID. Selektor #myElement wählt ein Element mit einem Attribut aus id gleich "myElement".
Klassenselektor - wählt alle Elemente mit einer bestimmten Klasse aus. Selektor .myClass wählt alle Elemente mit einem Attribut aus class gleich "MyClass".
Gruppieren von Selektoren - hier können Sie mehrere Elemente gleichzeitig auswählen. Sie können Selektoren gruppieren, indem Sie sie durch Kommas getrennt aufzählen. Zum Beispiel ein Selektor h1, h2, h3 wählt alle Titel der ersten, zweiten und dritten Ebene aus.
Untergeordnete Selektoren - wählen Sie alle Elemente aus, die Nachkommen eines anderen Elements sind. Selektor div span wählt alle Elemente aus span die Nachkommen von Elementen sind div.
Pseudoklassen - ermöglicht die Auswahl von Elementen in einem bestimmten Zustand oder Ereignis. Zum Beispiel ein Selektor a:hover wählt alle Hyperlinks aus, auf die der Mauszeiger zeigt.
Pseudo-Elemente - ermöglicht es Ihnen, bestimmte Teile eines Elements zu stilisieren. Selektor p::first-line wählt die erste Zeile jedes Absatzes aus.
Dies sind nur einige der Möglichkeiten von CSS-Selektoren. Die Verwendung der richtigen Selektoren hilft Ihnen, die Stile Ihrer Webseite zu vereinfachen und zu strukturieren, wodurch sie leichter zu lesen und zu pflegen sind.
Anwenden von CSS-Stilen
Mithilfe der CSS-Stile einer Webseite können Sie mit HTML-Elementen interagieren und deren Aussehen und Layout bestimmen. Sie können CSS-Stile auf verschiedene Arten implementieren:
1. Externe CSS-Datei: In diesem Fall werden die Stildeklarationen in einer separaten Datei mit der Erweiterung gespeichert .css. Verwenden Sie ein Tag, um Stile mit einer HTML-Seite zu verbinden
2. Interne CSS-Stile: In diesem Fall werden die Style-Deklarationen in Tag 3 eingefügt. Inline-CSS-Stile: in diesem Fall werden Stildeklarationen direkt mit dem style-Attribut in den HTML-Code eingefügt. Diese Methode ist nützlich, um die Stile bestimmter Elemente schnell zu ändern. Zum Beispiel:
4. Webschriftarten: Mit CSS können Sie verschiedene Schriftarten verwenden, um Text anzuzeigen. Dazu wird das @font-face-Attribut zusammen mit den Regeln font-family und src verwendet. Zum Beispiel:
@font-face p 5. CSS-Klassen: Mit CSS-Klassen können Sie Stile auf bestimmte Elemente anwenden. Dazu wird das class-Attribut verwendet, das dem gewünschten HTML-Element zugewiesen wird. Zum Beispiel:
Текст с выделением
Обычный текст
Die Verwendung von CSS-Stilen ermöglicht es Ihnen, ein strukturiertes und ästhetisch ansprechendes Design einer Webseite zu erstellen, sie zu ändern und anzupassen, abhängig von den Bedürfnissen des Entwicklers und den Anforderungen des Projekts.
