CSS - Syntax

Ein CSS besteht aus Stilregeln, die vom Browser interpretiert und dann auf die entsprechenden Elemente in Ihrem Dokument angewendet werden. Eine Stilregel besteht aus drei Teilen -

Selector- Ein Selektor ist ein HTML-Tag, auf das ein Stil angewendet wird. Dies kann ein beliebiges Tag wie <h1> oder <table> usw. sein.
Property- Eine Eigenschaft ist eine Art Attribut eines HTML-Tags. Einfach ausgedrückt werden alle HTML-Attribute in CSS-Eigenschaften konvertiert. Sie können Farbe , Rand usw. sein.
Value- Eigenschaften werden Eigenschaften zugewiesen. Zum Beispiel Farbe kann Eigenschaftswert haben entweder rot oder # F1F1F1 usw.

Sie können die CSS-Stilregelsyntax wie folgt einfügen:

selector { property: value }

Example - Sie können einen Tabellenrand wie folgt definieren: -

table{ border :1px solid #C00; }

Hier ist die Tabelle ein Selektor und der Rand eine Eigenschaft, und der angegebene Wert 1px solid # C00 ist der Wert dieser Eigenschaft.

Sie können Selektoren auf verschiedene einfache Arten definieren, je nach Ihrem Komfort. Lassen Sie mich diese Selektoren einzeln setzen.

Die Typauswahl

Dies ist derselbe Selektor, den wir oben gesehen haben. Noch ein Beispiel, um allen Überschriften der Ebene 1 eine Farbe zu geben -

h1 {
   color: #36CFFF; 
}

Die universellen Selektoren

Anstatt Elemente eines bestimmten Typs auszuwählen, entspricht der universelle Selektor ganz einfach dem Namen eines beliebigen Elementtyps -

* { 
   color: #000000; 
}

Diese Regel macht den Inhalt jedes Elements in unserem Dokument schwarz.

Die Nachkommen Selektoren

Angenommen, Sie möchten eine Stilregel nur dann auf ein bestimmtes Element anwenden, wenn sie sich in einem bestimmten Element befindet. Wie im folgenden Beispiel angegeben, gilt die Stilregel nur dann für das <em> -Element, wenn sie sich innerhalb des <ul> -Tags befindet.

ul em {
   color: #000000; 
}

Die Klassenselektoren

Sie können Stilregeln basierend auf dem Klassenattribut der Elemente definieren. Alle Elemente mit dieser Klasse werden gemäß der definierten Regel formatiert.

.black {
   color: #000000; 
}

Diese Regel rendert den Inhalt für jedes Element in Schwarz, wobei das Klassenattribut in unserem Dokument auf Schwarz gesetzt ist . Sie können es etwas genauer machen. Zum Beispiel -

h1.black {
   color: #000000; 
}

Diese Regel rendert den Inhalt nur für <h1> -Elemente in Schwarz, wobei das Klassenattribut auf Schwarz gesetzt ist .

Sie können mehr als eine Klassenselektion auf ein bestimmtes Element anwenden. Betrachten Sie das folgende Beispiel -

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

Die ID-Selektoren

Sie können Stilregeln basierend auf dem ID- Attribut der Elemente definieren. Alle Elemente mit dieser ID werden gemäß der definierten Regel formatiert.

#black {
   color: #000000; 
}

Diese Regel rendert den Inhalt für jedes Element in Schwarz, wobei das ID- Attribut in unserem Dokument auf Schwarz gesetzt ist . Sie können es etwas genauer machen. Zum Beispiel -

h1#black {
   color: #000000; 
}

Diese Regel rendert den Inhalt nur für <h1> -Elemente in Schwarz, wobei das ID- Attribut auf Schwarz gesetzt ist .

Die wahre Stärke von ID- Selektoren liegt darin, dass sie als Grundlage für Nachkommen-Selektoren verwendet werden. Beispiel:

#black h2 {
   color: #000000; 
}

In diesem Beispiel werden alle Überschriften der Ebene 2 in schwarzer Farbe angezeigt, wenn diese Überschriften in Tags liegen, deren ID- Attribut auf Schwarz gesetzt ist .

Die untergeordneten Selektoren

Sie haben die Nachkommen-Selektoren gesehen. Es gibt noch einen Selektortyp, der Nachkommen sehr ähnlich ist, aber unterschiedliche Funktionen hat. Betrachten Sie das folgende Beispiel -

body > p {
   color: #000000; 
}

Diese Regel rendert alle Absätze in Schwarz, wenn sie direkt dem <body> -Element untergeordnet sind. Andere Absätze, die in andere Elemente wie <div> oder <td> eingefügt werden, haben keine Auswirkung auf diese Regel.

Die Attributselektoren

Sie können Stile auch auf HTML-Elemente mit bestimmten Attributen anwenden. Der Stil der Regel unten passt auf alle Elemente Eingang ein type - Attribut mit einem Wert von Text -

input[type = "text"] {
   color: #000000; 
}

Der Vorteil dieser Methode besteht darin, dass das Element <input type = "submit" /> nicht betroffen ist und die Farbe nur auf die gewünschten Textfelder angewendet wird.

Für die Attributauswahl gelten folgende Regeln.

p[lang]- Wählt alle Absatzelemente mit einem lang- Attribut aus.
p[lang="fr"]- Wählt alle Absatzelemente aus, deren lang- Attribut den Wert genau "fr" hat.
p[lang~="fr"]- Wählt alle Absatzelemente aus, deren lang- Attribut das Wort "fr" enthält.
p[lang|="en"]- Wählt alle Absatzelemente aus, deren lang- Attribut Werte enthält, die genau "en" sind oder mit "en-" beginnen.

Mehrere Stilregeln

Möglicherweise müssen Sie mehrere Stilregeln für ein einzelnes Element definieren. Sie können diese Regeln definieren, um mehrere Eigenschaften und entsprechende Werte in einem einzigen Block zu kombinieren, wie im folgenden Beispiel definiert:

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Hier werden alle Eigenschafts- und Wertepaare durch a getrennt semicolon (;). Sie können sie in einer oder mehreren Zeilen halten. Zur besseren Lesbarkeit halten wir sie in getrennten Zeilen.

Machen Sie sich eine Weile keine Gedanken über die im obigen Block genannten Eigenschaften. Diese Eigenschaften werden in den kommenden Kapiteln erläutert. Ausführliche Informationen zu den Eigenschaften finden Sie in den CSS-Referenzen

Gruppieren von Selektoren

Sie können einen Stil auf viele Selektoren anwenden, wenn Sie möchten. Trennen Sie die Selektoren einfach durch ein Komma, wie im folgenden Beispiel angegeben -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Diese Regel zum Definieren des Stils gilt auch für die Elemente h1, h2 und h3. Die Reihenfolge der Liste ist irrelevant. Auf alle Elemente im Selektor werden die entsprechenden Deklarationen angewendet.

Sie können die verschiedenen ID- Selektoren wie unten gezeigt miteinander kombinieren.

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}