Legen Sie Stile in CSS fest

CSS (Cascading Style Sheets) ist eine Technologie zur Beschreibung des Erscheinungsbilds von Webdokumenten. CSS kann Stile auf verschiedene Elemente eines HTML-Dokuments anwenden, z. B. Schriftarten, Farben, Abstände, Hintergründe und mehr. Es ermöglicht Entwicklern, das Erscheinungsbild und Layout der Seite zu ändern, ohne die HTML-Struktur zu ändern. In diesem Artikel erfahren Sie, wie Sie in CSS Stile erstellen.

1. Selektoren

In CSS werden Selektoren verwendet, um Elemente auszuwählen, auf die Stile angewendet werden sollen. Es gibt verschiedene Selektortypen, wie zum Beispiel:

• Tag-Selektoren (z. B. p, h1, div, span)
• Klassen-Selektoren (z. B. .red, .blue)
• ID-Selektoren (z. B. #header, #footer)
• Attributselektoren (z. B. [type="text"])
• Pseudoklassenselektoren (z. B.:hover, :focus)

Um Stile festzulegen, müssen wir ein oder mehrere Elemente auswählen. Dies kann mit einem oder mehreren Selektoren erfolgen. Um beispielsweise ein Element mit der Klasse „rot“ auszuwählen, können Sie den folgenden CSS-Code verwenden:

.red {
    color: red;
}

Dadurch wird die Textfarbe aller Elemente mit der Klasse „rot“ auf Rot gesetzt.

2. Stileigenschaften

Jeder Selektor ist mit einer oder mehreren Stileigenschaften versehen. Hier sind einige allgemeine Stilattribute:

• Farbe: Legen Sie die Textfarbe fest.
• font-size: Legen Sie die Schriftgröße fest.
• font-family: Legen Sie den Schriftarttyp fest.
• background-color: Legen Sie die Hintergrundfarbe fest.
• margin: Legen Sie die Ränder des Elements fest.
• padding: Legen Sie den inneren Rand des Elements fest.
• border: Legen Sie den Rand des Elements fest.
• width: Legen Sie die Breite des Elements fest.
• height: Legen Sie die Höhe des Elements fest.
• text-align : Legen Sie die Textausrichtung fest.

Stil Doppelpunkte werden im Allgemeinen verwendet, um Attribute und Attributwerte zu trennen, und Semikolons werden verwendet, um Attribute von Attributen zu trennen. Beispiel:

p {
    font-size: 16px;
    color: #333;
    font-family: sans-serif;
}

Dadurch wird die Schriftgröße aller Absätze auf 16 px, die Farbe auf Dunkelgrau (#333) und die Schriftart auf serifenlos eingestellt.

3. Kaskadierung

Kaskadierung bezieht sich in CSS auf die hierarchische Wirkung von Stilen. Wenn mehrere Stilregeln auf dasselbe Element angewendet werden, verwendet der Browser bestimmte Regeln, um zu bestimmen, welcher Stil angewendet wird.

Stile können auf die Tag-, Klassen- und ID-Attribute von Elementen angewendet werden. Wenn auf ein Element mehrere Stilregeln angewendet werden, verwendet CSS eine bestimmte Hierarchie, um zu entscheiden, welche Regel die höchste Priorität hat, wie folgt:

• Stil angegeben durch ID-Stil (#id)
• Klassenstil angegebener Stil (.class )
• Durch Element/Tag angegebener Stil (div, p, h1 usw.)
• Universeller Stil (*)
• Browser-Standardstil

Dies ist die sogenannte „Stilkaskadierungsreihenfolge“, zuerst nach ID , um den Stil anzuwenden, und wenden Sie dann die Klassen- und Elementstile in der Reihenfolge an, in der sie im Stylesheet erscheinen. Universelle Stile geben Stile an, die für alle Elemente gelten, und Browser-Standardstile beziehen sich auf die Stile, die der Browser standardmäßig auf ein Element anwendet.

4. Box-Modell

Das Box-Modell in CSS beschreibt das Layout eines HTML-Elements. Das Boxmodell eines Elements besteht aus vier Teilen: Inhaltsbereich, Polsterung, Rahmen und Ränder.

• Inhaltsbereich: Text und Bilder innerhalb des Elements.
• Padding: Der Abstand zwischen dem Inhaltsbereich und dem Rand eines Elements.
• Rand: Die Linie, die ein Element umgibt.
• Margin: Der Abstand zwischen dem Rand des Elements und anderen Elementen.

Der Rahmenstil (z. B. durchgezogene Linie, gestrichelte Linie und gepunktete Linie) und die Rahmenfarbe in CSS können geändert werden.

Abstände und Ränder in CSS können mit Pixeln (px), Prozentsätzen (%) und anderen Einheiten angegeben werden.

5. Fazit

Dieser Artikel lieferte die Grundlagen des Stils in CSS. Legen Sie Stile fest, indem Sie Elemente in einem Selektor auswählen, Stileigenschaften verwenden und nach Bedarf Kaskadierung verwenden, um die Reihenfolge der Stile zu bestimmen. Wir haben auch etwas über das CSS-Boxmodell gelernt, das die Grundlage für das Layout und Erscheinungsbild von Elementen in CSS bildet. Wenn Sie diese Grundlagen beherrschen, können Sie mit CSS schöne Webseitenlayouts erstellen.

Das obige ist der detaillierte Inhalt vonLegen Sie Stile in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!