CSS-Stile (Cascade Style Sheets) sind ein grundlegendes Webentwicklungstool, mit dem Sie das Aussehen von HTML-Elementen auf einer Webseite festlegen können. Sie ermöglichen es Ihnen, das Design vom Inhalt zu trennen und die Verwaltung von Stilen für viele Elemente zu vereinfachen.
Die Hauptmethode zum Erstellen von CSS-Stilen besteht darin, eine Inline-Methode zu verwenden. Dies bedeutet, dass die Stile direkt in HTML-Tags mit dem style-Attribut verschrieben werden. Zum Beispiel, um die Textfarbe eines Elements festzulegen
sie können den folgenden Code verwenden:
Die Verwendung der integrierten Methode ist jedoch ineffizient, wenn Stile auf viele Elemente angewendet werden müssen, da Sie die Stile für jedes Element erneut angeben müssen. Um diese Notwendigkeit zu vermeiden, gibt es andere Möglichkeiten, Stile zu erstellen.
Die interne Methode zum Erstellen von CSS-Stilen besteht darin, Stile innerhalb eines Tags innerhalb eines Elements anzugeben . Mit dieser Methode können Sie Stile auf verschiedene Elemente auf derselben Webseite anwenden und vermeiden, dass Stile für jedes Element erneut angegeben werden. Beispiel für die Verwendung des internen Verfahrens:
Schließlich beinhaltet die Verwendung einer externen Methode zum Erstellen von CSS-Stilen das Angeben von Stilen in einer separaten Datei mit einem Erweiterungszeichen .css. Diese Datei wird dann mithilfe eines Elements mit dem Attribut rel="stylesheet" mit der Webseite verbunden. Beispiel für die Verwendung einer externen Methode:
Daher sind die wichtigsten Möglichkeiten, CSS-Stile zu erstellen, Inline, intern und extern. Jeder hat seine eigenen Vorteile und eignet sich für bestimmte Entwicklungsszenarien. Die Auswahl der Methode hängt von der Komplexität des Projekts und den eigenen Vorlieben des Entwicklers ab.
Gruppieren von Elementen und externen Stylesheets
Wenn wir beispielsweise dieselben Stile auf mehrere Überschriften verschiedener Ebenen anwenden möchten, können wir die Gruppierung wie folgt verwenden:
h1, h2, h3, h4, h5, h6 color: blue;
font-weight: bold;
>
Auf diese Weise haben alle Überschriften eine blaue Textfarbe und eine Fettschrift.
Eine andere Möglichkeit, Stile zu organisieren, besteht darin, ein externes Stylesheet zu verwenden. Ein externes Stylesheet ist eine separate Datei mit einer Erweiterung .css, das alle Stile für eine Webseite enthält. Verwenden Sie ein Tag innerhalb eines Abschnitts, um ein externes Stylesheet zu verbinden.
Zum Beispiel, um ein externes Stylesheet mit dem Namen styles zu verbinden.css, müssen Sie die folgende Zeile zum Abschnitt hinzufügen :
Jetzt sind alle Stile aus der styles-Datei.das CSS wird auf die gesamte Seite angewendet.
Durch die Gruppierung von Elementen und die Verwendung externer Stylesheets können Stile in CSS bequem und effizient organisiert werden.
Einbetten von Stilen in das Seitenlayout
Das style-Attribut wird zum Einbetten von Stilen in HTML-Code verwendet. Es gibt die CSS-Eigenschaften und ihre Werte an. Zum Beispiel:
-
So legen Sie die Textfarbe fest:
Этот текст будет синим цветом
Этот текст будет шрифтом размером 20 пикселей
Sie können mehrere Eigenschaften auf ein einzelnes Element anwenden:
Этот текст будет синим цветом, размером 20 пикселей и выравнен по центру
Es ist wichtig sich daran zu erinnern, dass das Einbetten von Stilen in Markup Einschränkungen hat. Es gilt nur für einzelne Elemente, und Stile können nicht für andere Elemente neu verwendet werden. Wenn Sie also dieselben Stile auf mehrere Elemente anwenden möchten, wird empfohlen, externe Stile oder interne Stile zu verwenden.
Verwenden externer Stylesheets
Mit externen Stylesheets (CSS) können Sie das Erscheinungsbild eines Dokuments vom Inhalt des Dokuments trennen. Das bedeutet, dass wir ein einzelnes Stylesheet erstellen und es auf alle Seiten unserer Website anwenden können, was den Design- und Supportprozess erheblich vereinfacht.
Um ein externes Stylesheet zu verwenden, müssen wir eine separate Datei erstellen, in der wir alle gewünschten Stile beschreiben. Dann müssen wir diese Datei auf jeder Seite anhängen, auf die wir diese Stile anwenden möchten.
Um ein externes Stylesheet mit HTML zu verbinden, wird ein Tag verwendet, das in einen Abschnitt unserer Seite eingefügt wird. Als Tag-Attribute werden der relative Pfad zur Stylesheet-Datei, der Dokumenttyp und das Verhältnis dieses Dokuments zu unserer Seite angegeben.
In diesem Beispiel haben wir angegeben, dass Sie ein Stylesheet in der Datei styles einbinden möchten.css", zur aktuellen Seite (href-Attribut).
Nachdem wir ein externes Stylesheet mit unserer Seite verbunden haben, wendet der Browser automatisch alle Stile aus dieser Tabelle auf die entsprechenden Elemente auf der Seite an.
Verwalten von Stilen mithilfe von Elementattributen
Neben dem externen Stylesheet und den integrierten Stylesheets können Sie Stile direkt in den Attributen von HTML-Elementen verwalten.
Eine der gängigsten Methoden zum Verwalten von Stilen mit Attributen ist die Verwendung des style-Attributs. Innerhalb dieses Attributs können Sie einen Stil für ein bestimmtes Element festlegen, indem Sie die CSS-Eigenschaft verwenden. Um beispielsweise die Textfarbe eines Elements zu ändern, können Sie das Attribut style="color: red;" hinzufügen. Sie können auch mehrere Stile angeben, indem Sie sie durch Semikolons trennen.
Elementattribute können auch verwendet werden, um andere Stile wie Hintergrundfarbe, Schriftgröße, Einzug und vieles mehr festzulegen. Sie können beispielsweise das Attribut style="background-color: yellow; font-size: 18px;" hinzufügen, um einen gelben Hintergrund und eine Schriftgröße von 18 Pixeln für ein Element festzulegen.
Die Verwendung von Elementattributen zum Verwalten von Stilen hat jedoch Einschränkungen. Erstens kann dies zu doppelten Stilen führen, wenn Stile sowohl in Attributen als auch in einem externen Stylesheet oder Inline-Stilen angegeben sind. Zweitens erschwert dies die Unterstützung und Aktualisierung von Stilen, da Sie den Code jedes attributgesteuerten Elements ändern müssen, wenn Sie Stile ändern.
| Vorteile der Verwaltung von Stilen mithilfe von Elementattributen | Nachteile der Verwaltung von Stilen mit Elementattributen |
|---|---|
| Einfachheit und Unmittelbarkeit | Möglichkeit zum Duplizieren von Stilen |
| Direkte Möglichkeit, Stile für ein bestimmtes Element festzulegen | Begrenzte Unterstützung und Aktualisierung von Stilen |
| Flexibilität und die Möglichkeit, Stile jederzeit zu ändern |
Im Allgemeinen wird die Verwendung von Elementattributen zum Verwalten von Stilen in der Regel nur in bestimmten Fällen empfohlen, oder in temporären Situationen, in denen Sie schnell einen Stil für ein bestimmtes Element festlegen möchten, ohne den Code zu ändern.
Anwenden von Inline-Stilen im style-Attribut
In HTML können Sie Stile direkt im style-Attribut hinzufügen. Dadurch können Sie eindeutige Stile für einzelne Elemente festlegen, ohne externes CSS anzuwenden.
Das style-Attribut enthält eine durch Semikolons getrennte Liste von Eigenschaften und deren Werten. Zum Beispiel:
In den folgenden Beispielen gibt die erste color-Eigenschaft die Textfarbe an und die zweite font-size die Schriftgröße an. Also für das Element
der Text ist blau und hat eine Größe von 16 Pixeln, und das Element wird mit einem hellgrauen Hintergrund und einem Einzug von 10 Pixeln versehen.
Das style-Attribut kann alle CSS-Eigenschaften wie Farbe, Schriftart, Größe, Einzug, Position usw. enthalten.
Verwenden von Inline-Stilen
Um Inline-Stile zu verwenden, müssen Sie ein Attribut hinzufügen style zum Element-Tag. Der Wert dieses Attributs ist CSS mit Eigenschaften und deren Werten.
Der Vorteil der Verwendung von Inline-Stilen besteht darin, dass sie die höchste Priorität gegenüber anderen Arten haben, Stile festzulegen. Sie können jedoch auch schwierig zu pflegen sein, besonders wenn Sie mit vielen Elementen arbeiten.
Wenn Sie beispielsweise die Farbe des Textes innerhalb eines Absatzes ändern möchten, können Sie einen Inline-Stil verwenden:
Dieser Inline-Stil setzt den Text innerhalb eines Absatzes auf Rot. Als Ergebnis wird der Text rot angezeigt.
Inline-Stile können alle in CSS verfügbaren Eigenschaften und Werte enthalten. Zum Beispiel:
Dieser Inline-Stil legt die Schriftgröße auf 18 Pixel fest und richtet den Text innerhalb eines Absatzes zentriert aus.
