CSS steht für “Cascading Style Sheet”. Es ist eine Sprache, die verwendet wird, um die Präsentation von Webseiten zu definieren. Es wird hauptsächlich verwendet, um die HTML -Seiten zu strukturieren und zu stylen. Insbesondere ist CSS ein wesentlicher Bestandteil der Webentwicklung, die Webseiten attraktiv und benutzerfreundlich macht.

In diesem Beitrag werden die Grundlagen von CSS und seiner Verwendung erörtert.

Wofür wird CSS verwendet??

CSS wird verwendet, um das Layout und den Stil von Webseiten anzugeben. Es steuert das Styling einer Webseite mit Hilfe vieler CSS -Eigenschaften.

Arten von CSS

Die folgenden drei Arten von CSS sind:

• Inline CSS
• Externes CSS
• Eingebettete CSS

Was ist Inline -CSS?

In HTML ist ein Inline -CSS direkt in das Element mit Hilfe der “eingebettetStil”Attribut. Es wird verwendet, um ein einzigartiges Styling an ein bestimmtes Element anzupassen.

Beispiel
Das folgende Beispiel zeigt eine HTML -Seite, die ein Inline -CSS auf die “anwendet

" Element:

LinuxHint

Hier ist die Erklärung der oben genannten CSS-Eigenschaften innerhalb der “Stil”Attribut:

• “Farbe”Definiert die Schriftfarbe.
• “Schriftfamilie”Wendet den Schriftartenstil an.
• “Textausrichtung”Legt die Textausrichtung in der Mitte, der linken oder rechten Seite fest.
• “Schriftgröße”Bestimmt die Größe der Schriftart des Elements.

Ausgang

Was ist eingebettete CSS?

Wenn die CSS -Eigenschaften in die deklariert werden “”Element des HTML -Dokuments, diese Art von CSS wird als eingebettetes CSS bezeichnet.

Beispiel
In dem vorgesehenen Beispiel haben wir CSS in HTML eingebettet:

LinuxHint

Es kann beobachtet werden, dass wir auf die HTML zugegriffen haben “

Element mit dem Tag-Namen und anwenden Sie die CSS-Eigenschaften der Farbe, Schriftfamilie, Textausrichtung und Schriftgröße, wie zuvor erläutert.

Ausgang

Was ist externe CSS?

Das externe Stilblatt bezieht sich auf das externe CSS, das in einer separaten Datei geschrieben ist. Diese CSS -Datei wird dann mit der “mit der HTML -Datei verknüpftElement im Kopfabschnitt.

Beispiel
Erstellen Sie zunächst eine HTML -Datei und geben Sie die “anElement zusammen mit den Attributen "rel" und "href". Der "rel”Attribut Geben Sie die Beziehung zwischen HTML und dem verknüpften Dokument und dem“ anhrefDas Attribut wird verwendet, um die Dateiquelle zu definieren:

LinuxHint

CSS
Fügen Sie den folgenden Code -Snippet im „Stil hinzu.CSS ”Datei:

H1
Farbe: dunkel;
Schriftfamilie: Fantasie;
Text-Align: Mitte;
Schriftgröße: 60px;

Ausgang

Was sind CSS -Selektoren??

Die HTML -Elemente, die Sie stylen möchten, können mit einem CSS -Selektor ausgewählt werden. Einige der meist verwendeten mehrere Selektoren in CSS sind unten aufgeführt:

• Einfache Selektoren
• Pseudo-Klasse-Selektoren
• Attribut -Selektoren
• Kombinatorauswahl
• Pseudo-Elemente-Selektoren

Nehmen wir ein Beispiel für einige Selektoren für ein besseres Verständnis.

Beispiel: So verwenden Sie einfache CSS -Selektoren?
Die einfachen Selektoren wählen die Elemente basierend auf der ID, dem Namen oder der Klasse aus. Die folgenden Codeblöcke zeigen das Beispiel der einfachen Selektoren:

• Füge hinzu ein ""Element mit der Klasse"Kasten”.
• Dann füge hinzu "

  "Element im" ":":

LinuxHint

CSS -ID -Selektor
Der ID -Selektor bezieht sich auf die “Ausweis”Attribut eines Elements. In CSS, die “#Das Symbol wird geschrieben, um das Element per ID auszuwählen.

Stil „Überschrift“ ID

#Überschrift
Farbe: dunkel;
Schriftfamilie: Fantasie;
Schriftgröße: 60px;

CSS -Klassenauswahl
Der CSS -Klassenwählte wählt die Elemente mit besonderem “aus“Klasse”Attribute. In CSS wird auf die Klasse von dem zugegriffen.Symbol vor dem Klassennamen.

Stil „Box“ -Klasse

.Kasten
Breite: 300px;
Grenze: 5PX Solid RGB (214, 214, 214);
Rand: Auto;
Text-Align: Mitte;
Hintergrundfarbe: RGB (255, 227, 218);

Der ".Kasten”Wird verwendet, um auf die zuzugreifen"KastenKlasse und weisen Sie die folgenden Eigenschaften zu:

• “Breite”Passt die Breite des Elements an.
• “GrenzeImmobilien werden verwendet, um das Element um einen Rand hinzuzufügen.
• “Rand”Erzeugt Platz um das Element.
• “Textausrichtung”Legt die Ausrichtung des Textes fest.
• “Hintergrundfarbe”Legt die Hintergrundfarbe fest.

Ausgang

Das waren alle Grundlagen von CSS.

Abschluss

Das CSS- oder Cascading Style Sheet beschreibt das Erscheinungsbild eines HTML -Dokuments. Es liefert Hunderte von Styling -Eigenschaften für HTML. In CSS wird das HTML -Element von verschiedenen CSS -Selektoren wie dem ID -Selektor, Klassenauswahl usw. ausgewählt. Dieser Beitrag hat gezeigt, wofür CSS verwendet wird.