Erfahren Sie in einer Minute die Grundlagen von CSS

CSS steht für Cascading Style Sheet. CSS gibt an, wie HTML -Elemente auf dem Bildschirm angezeigt werden sollen. Mit anderen Worten, CSS beschreibt die Präsentation von Webseiten. Es bietet unterschiedliche Styling-Eigenschaften in den HTML-Elementen wie Hintergrundfarbe, Schriftstil, Farbe und vieles mehr. Außerdem können Sie angeben, wie die Webseite in verschiedenen Bildschirmgrößen aussieht.

In diesem Blog dreht sich alles um:

• So definieren Sie CSS -Eigenschaften?
• Was sind die Arten von CSS -Selektoren??
• Verschiedene Möglichkeiten, CSS -Eigenschaften zu definieren
• So verwenden Sie Inline -CSS?
• So verwenden Sie ein eingebettetes Stilblatt?
• So verwenden Sie ein externes Stilblatt?

So definieren Sie CSS -Eigenschaften?

Um die CSS -Eigenschaften für die HTML -Elemente zu definieren, kann die folgende Syntax verwendet werden:

Selektor
Eigentumswert;
Eigentumswert;

Hier:

• Die erste Komponente einer CSS -Regel ist ein CSS “Wähler”. Der Selektor gibt an, welche HTML -Elemente für die Anwendung von CSS -Eigenschaften ausgewählt werden sollen.
• Innerhalb seines Körpers werden Eigenschaften mit ihren jeweiligen Werten definiert.

Was sind die Arten von CSS -Selektoren??

Die Selektoren sind drei Typen, die unten definiert sind:

Elementauswahl
Element CSS -Selektor wird zur Anwendung der CSS -Eigenschaften auf die Elemente mit spezifischen Tag -Namen verwendet:

H1
Farbe blau;

Im obigen Beispiel das “H1Ist das Überschriftenelement.

Klassenauswahl
Der Klassenwähler wählt alle Elemente aus, die zur genannten Klasse gehören, und wendet dann die hinzugefügten CSS -Eigenschaften auf sie an:

.Hauptinhalt
Breite: 300px

Gemäß dem angegebenen Code wird die Eigenschaft der Breite auf das Element mit dem Klassennamen angewendet.Hauptinhalt”.

ID -Selektor
ID -Selektoren wählen ein bestimmtes Element basierend auf seiner ID aus:

#para
Text-Align: Mitte;

Notiz: In den obigen Beispielen das “Farbe","Breite", Und "Textausrichtung”Sind die Eigenschaften.

So verwenden Sie Inline -CSS?

Inline CSS bezieht sich auf das CSS, wenn sie direkt auf unsere HTML -Elemente angewendet werden. Verwenden Sie dazu die “Stil”Attribut innerhalb des Element -Öffnungs -Tags und dann Eigenschaften einschließen.

Schauen Sie sich das angegebene Beispiel an:

HALLO WELT!

Ausgang

So verwenden Sie ein eingebettetes Stilblatt?

Verwenden Sie die “, um ein CSS -Stilblatt in die HTML -Datei einzubettenElement im Kopfabschnitt, um die Eigenschaften wie folgt anzugeben:

Ausgang

So verwenden Sie ein externes Stilblatt?

Wenn das Projekt mehrere Dateien enthält, ist es besser, mit der Erweiterung ein externes CSS -Blatt zu erstellen.CSS”. Verwenden Sie es dann im Projekt, indem Sie einen Link zum externen CSS -Blatt in den HTML -Dateien hinzufügen.

Zum Beispiel wird das Element im Kopfabschnitt der HTML -Datei wie folgt bereitgestellt:

Fügen Sie innerhalb des externen Stilblatts den Code hinzu:

P
Schriftgröße: 30px;
Farbe lila;
Schriftdicke: fett;
Text-Align: Mitte;

Der obige Code wird wie unten angegeben angezeigt:

Das war alles um die Grundlagen von CSS.

Abschluss

Drei Möglichkeiten, um die Stylingeigenschaften an den HTML -Elementen zu definieren, sind Inline -CSS, interne CSS und externe CSS. Um Stylingeigenschaften auf die Elemente anzuwenden, können Sie Selektoren wie Elementauswahl, Klassenauswahl und ID -Selektoren verwenden. Geben Sie dann die Eigenschaften mit ihren Werten in den lockigen Klammern der Selektoren an. Dieser Blog hat die Grundlagen von CSS mit Beispielen besprochen.