Die Abkürzung CSS steht für „Cascading Stylesheets“. CSS wird verwendet, um Websites und Anwendungen zu gestalten, die auf allen Geräten verwendet werden. Das Stylesheet wird häufig zusammen mit HTML und einer Frontend-Programmiersprache wie JavaScript verwendet.

CSS kann auf drei Arten implementiert werden – inline, intern oder extern. Obwohl externes CSS der empfohlene Ansatz ist, gibt es Fälle, in denen die beiden verbleibenden Implementierungsmethoden praktischer sind.

In diesem Tutorial-Artikel lernen Sie alle Grundlagen von CSS, um noch heute mit dem Erstellen von Anwendungen zu beginnen.

Wann sollten die verschiedenen CSS-Implementierungsmethoden verwendet werden

Inline-CSS ist die ideale Implementierungsmethode, wenn es darum geht, neben einigen anderen Nischenfällen nur ein oder zwei Stilvorgaben auf einer Webseite einzufügen. Die Inline-CSS-Methode verwendet die Stil Schlüsselwort zusammen mit einer CSS-Eigenschaft, um ein bestimmtes Ergebnis zu erzielen.

Wenn Sie die Farbe einer einzelnen Überschrift in Rot ändern möchten, kann Inline-CSS eine gute Option sein. Ein Nischenfall wäre, wie oben erwähnt, die Erstellung von HTML-Layouts, die hauptsächlich aus Tabellen bestehen (eine veraltete Praxis).

Inline-CSS-Beispiel verwenden

Hauptüberschrift

Die obige Codezeile zeigt den Text „Hauptüberschrift“ in roter Farbe an. Dies ist möglicherweise einer der wenigen praktischen Gründe für die Verwendung von Inline-CSS, da es normalerweise nur einen gibt h1 -Element auf einer bestimmten Webseite.

Wenn Sie beabsichtigen, alles zu beschichten h2 Elemente auf einer Webseite mit der Farbe Gelb. Sie müssen das CSS verwenden Stil Stichwort, zusammen mit dem Farbe -Eigenschaft und ihren Wert (gelb) für jedes Element. Ein effizienterer Weg, diese Aufgabe zu erfüllen, ist jedoch die Verwendung von internem CSS.

Verwendung eines internen CSS-Beispiels

Platzieren Sie den obigen Code in der -Tag Ihrer HTML-Datei stellt sicher, dass alle h2 Elemente in dieser Datei sind gelb beschichtet. Internes CSS ist vom HTML-Code getrennt, was die Methode effizienter macht, da es das Targeting verschiedener Elementgruppen erleichtert.

Warum ist die externe CSS-Implementierungsmethode immer noch der am meisten empfohlene Ansatz? Trennung von Bedenken. Mit externem CSS ist Ihr CSS-Code vollständig von Ihrem HTML-Code getrennt, was die Skalierbarkeit für große Projekte gewährleistet und den Testprozess effizienter macht.

Verwenden eines externen CSS-Beispiels

Einfügen der obigen Codezeile in die -Tag Ihrer HTML-Datei erleichtert das Styling Ihrer Webseite mit der externen CSS-Methode. Der einzige Aspekt des obigen Codes, der sich ändert, ist der dem zugewiesene Wert href -Eigenschaft, die immer der Name der CSS-Datei sein sollte (einschließlich der Erweiterung .css).

Verwandt: Was sind Cascading Style Sheets und wofür wird CSS verwendet? Nachdem Ihre CSS-Datei mit Ihrem HTML-Dokument verknüpft ist, können Sie jetzt damit beginnen, CSS-Code in Ihre CSS-Datei zu schreiben. An dieser Stelle besteht der einzige Unterschied zwischen dem obigen internen CSS-Beispiel und dem externen CSS darin, dass Stil Schild. Daher führt das Einfügen des folgenden Codes in eine CSS-Datei zum gleichen Ergebnis wie das obige interne CSS-Beispiel.

h2{
Farbe Gelb;
}

Erkunden der CSS-Grundstruktur

Die grundlegende CSS-Deklaration enthält sieben wesentliche Elemente, wie Sie im folgenden Beispiel sehen können. Sie alle arbeiten zusammen, um eine bestimmte Reihe von Stilpräferenzen zu erreichen.

Der Selektor

In einer CSS-Deklaration kann ein Selektor entweder ein Ich würde, ein Klasse, ein Element oder in einigen besonderen Fällen ein Pseudo-Selektor. In der CSS-Struktur über dem ein -Element wird als Selektor verwendet, was bedeutet, dass alle Links auf einer Webseite rot umrandet werden. Im Wesentlichen besteht der Zweck des Selektors darin, die Elemente zu identifizieren, die formatiert werden sollen.

Beginn und Ende der Deklaration

Der Beginn und das Ende der Deklaration sind wichtig, da sie alle Stileinstellungen einschließen, die für einen bestimmten Selektor gelten. Beide Elemente werden durch ein Paar offener und geschlossener geschweifter Klammern dargestellt. Eine gute Möglichkeit, sich daran zu erinnern, einen Deklarationsbeginn oder ein Deklarationsende zu verwenden, besteht darin, sich daran zu erinnern, dass bei einer offenen geschweiften Klammer auch eine entsprechende geschlossene geschweifte Klammer vorhanden sein sollte und umgekehrt.

Die Eigenschaft

Die CSS-Eigenschaft in einer Deklarationsstruktur kann einer von über hundert verschiedenen Eigenschaftstypen sein. Der in der obigen CSS-Struktur verwendete Eigenschaftstyp ist Farbe und diese Eigenschaft zielt auf Text auf einer Webseite ab. Wenn Sie mehr erfahren möchten, besuchen Sie unsere umfassende Liste von CSS-Eigenschaften und deren Verwendung.

Das Eigenschafts-/Wert-Trennzeichen

Obwohl es klein und unbedeutend erscheinen mag, ist das Eigenschafts-/Wert-Trennzeichen genauso wichtig wie alle anderen Elemente in der CSS-Struktur. Wenn dieses Element jemals vergessen wird, wird die gesamte CSS-Deklaration nicht ausgeführt.

Der Wert

Der CSS-Eigenschaftswert stellt den genauen Stil dar, den Sie auf eine bestimmte Eigenschaft anwenden möchten. Die verfügbaren Werte hängen vom Eigenschaftstyp ab. Die in der obigen Struktur verwendete Eigenschaft ist beispielsweise Farbe, was bedeutet, dass nur ein Werttyp auf diese Eigenschaft angewendet werden kann, ein Farbname. EIN Farbe Wert kann in einer von vier Formen dargestellt werden: als Wortwert (wie im obigen Beispiel), als Hexadezimalwert, als HSL-Wert (Farbton, Sättigung, Helligkeit) oder als RGB-Wert (Rot, Grün, Blau).

Das Deklarationstrennzeichen

Das Deklarationstrennzeichen zeigt an, dass Sie sich am Ende einer bestimmten Stildeklaration befinden. In der obigen Struktur gibt es nur ein Deklarationstrennzeichen, es können jedoch mehr sein. Es hängt alles von der Anzahl der CSS-Eigenschaften ab, die Sie für ein bestimmtes verwenden möchten Klasse, Ich würde, oder Element.

Was sind IDs und Klassen?

ids und Klassen spielen eine grundlegende Rolle im CSS-Styling-Prozess. Wie HTML-Elemente, CSS ids und Klassen werden als Selektoren in einer CSS-Deklaration verwendet. Jedoch, Klassen und ids haben Vorrang vor einem HTML-Element.

Die allgemeine Regel in CSS lautet, dass die letzte Stildeklaration, die Sie einer Datei hinzufügen, die zuvor vorhandenen überschreibt. Wenn es also zwei Deklarationen mit einem gibt h2 selector in einer CSS-Datei überschreibt die zuletzt hinzugefügte Deklaration die zuvor vorhandenen.

Wenn dies jedoch h2 Element hat eine Ich würde der als Selektor in einer CSS-Deklaration verwendet wird, unabhängig von seiner Position (vor oder nach) zu einer CSS-Deklaration mit dem h2 -Element als Selektor, die Stilpräferenz im Ich würde Deklaration hat immer Vorrang vor dem Element. Kurz gesagt, ein Ich würde überschreibt andere Stilauswahlen.

Denken Sie daran, dass in einer CSS-Deklaration ids Beginnen Sie mit einem Nummernzeichen und der Unterricht beginnt mit einem Punkt. Der wichtigste Unterschied zwischen an Ich würde und ein Klasse ist das ein Ich würde ist einzigartig, während a Klasse kann dupliziert werden. Zum Beispiel eine Sammlung ähnlicher Tags können gleich vergeben werden Klasse Name; jedoch die Ich würde von jedem Tag muss eindeutig sein.

Erkunden der verschiedenen Arten von Selektoren

Es gibt drei grundlegende Arten von Selektoren: einzelne, mehrere und verschachtelte Selektoren. Bisher hat dieser Artikel einzelne Selektoren ausführlich behandelt.

Bei der Verwendung von CSS gibt es Fälle, in denen Sie verschiedene Elemente an verschiedenen Positionen auf a. möchten Webseite, um einen ähnlichen Stil zu haben, der sich vom allgemeinen Stil unterscheidet, der auf die gesamte Webseite angewendet wird. In diesen Fällen ist es hilfreich zu wissen, wie man mehrere Selektoren verwendet.

Beispiel für eine einfache HTML-Vorlage

Willkommen

Lorem ipsum dolor sit amet consectetur, adipöse elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architekt
tempora voluptates nulla officia placeat quisquam facere an! Quod dolore doloribus eos!







Über

Lorem ipsum dolor sit amet consectetur, adipöse elit. Impedit odit voluptates
dignissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Architekt
tempora voluptates nulla officia placeat quisquam facere an! Quod dolore doloribus eos!







Titel

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sitzen, laboriosam eos aperiam asperiores? Bei ad laborum illo Inventore quos est dolores
impedit fugit asperiores repelldus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur korrupti
mollitia, minima, magni bei iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
hemmen hic maxime? Eius modi optio ad, nisi tempora sapiente?







Titel

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore aspernatur vel dicta quod quibusdam!
Ea delectus sitzen, laboriosam eos aperiam asperiores? Bei ad laborum illo Inventore quos est dolores
impedit fugit asperiores repelldus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur korrupti
mollitia, minima, magni bei iusto id necessitatibus harum ratione, ipsum doloremque deleniti ex eligendi
hemmen hic maxime? Eius modi optio ad, nisi tempora sapiente?

Wenn Sie sich die obige HTML-Datei genau ansehen, sehen Sie die Dynamik zwischen ids und Klassen. In Bezug auf die obige Datei, wenn Sie denselben Stil auf die anwenden möchten Über Abschnitt und nur die Artikel auf der Webseite, der folgende CSS-Code wird dies bewerkstelligen.

Beispiel für die Verwendung mehrerer Selektoren

#Über, .Inhalt{
Farbe weiß;
Hintergrundfarbe: Dunkelcyan;
}

Wenn Sie mehrere Selektoren verwenden, sollten Sie jeden Selektor immer durch ein Komma trennen. Das obige Beispiel hat zwei Selektoren, und Ich würde und ein Klasse. Wenn das Komma nach dem ÜberIch würde fehlt, wird die CSS-Deklaration nicht ausgeführt.

Zurück zum obigen einfachen HTML-Vorlagenbeispiel, es gibt zwei -Tags vorhanden – eines im Begrüßungsbereich und das andere im Infobereich. Wenn Ihr Ziel darin besteht, nur eines davon anzusprechen -Tags sollte ein verschachtelter Selektor Ihre Methode sein.

Beispiele für verschachtelte Selektoren

#Willkommen p span{
Farbe Rot;
}

Der obige verschachtelte Selektor enthält ein Ich würde und zwei HTML-Elemente. Wie Sie im obigen Beispiel sehen können, bietet Ihnen ein verschachtelter Selektor die Möglichkeit, auf ein bestimmtes Element innerhalb einer Gruppe abzuzielen.

Daher nur die Spanne Abschnitt in der Tag der div mit dem willkommen id wird in der Farbe Rot beschichtet.

Egal, ob Sie eine Styling-Sprache wie CSS oder eine Programmiersprache verwenden, Sie sollten unbedingt wissen, wie man einen Kommentar schreibt. Kommentare sind in Projekten auf Unternehmensebene unerlässlich, in denen mehrere Entwickler zusammenarbeiten, und sie sind auch bei kleinen Entwicklungen nützlich.

Ein CSS-Kommentar enthält zwei Schrägstriche, zwei Sternchen und einen Kommentarabschnitt.

/* So schreiben Sie einen einzeiligen Kommentar in CSS */

/*
So schreibst du
ein mehrzeiliger Kommentar
im CSS
*/

Was kommt als nächstes?

Dieser Artikel bietet Ihnen die grundlegenden Komponenten von CSS. Sie können jetzt eine Kennung verwenden:

• Eine der drei CSS-Implementierungsmethoden
• Alle Elemente in einer CSS-Deklaration
• Die drei Grundtypen von Selektoren
• Ein CSS-Kommentar

Dies ist jedoch erst der Anfang. CSS hat mehrere Frameworks, die Ihnen helfen, ein besseres Verständnis der Sprache zu entwickeln. Die einzige Herausforderung besteht darin, zu entscheiden, welches für Sie das Beste ist.

Rückenwind-CSS vs. Bootstrap: Welches Framework ist besser?

Bei der Auswahl eines CSS-Frameworks ist es wichtig, dasjenige zu finden, das Ihren Anforderungen entspricht.

Weiter lesen

Über den Autor