CSS-Syntax
Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 2 von 76.
In CSS bezieht sich die Syntax auf die Regeln, die festlegen, wie CSS-Code geschrieben werden sollte. Das Verständnis der CSS-Syntax ist entscheidend für die Erstellung gut strukturierter und funktionaler Stylesheets. Eine grundlegende CSS-Regel besteht aus einem Selektor und einem Deklarationsblock.
Hier ist eine einfache Aufschlüsselung:
- Selektor: Gibt das HTML-Element an, das Sie formatieren möchten (z. B. p, div, img).
- Deklarationsblock: Enthält eine oder mehrere Deklarationen, die in geschweifte Klammern
{}eingeschlossen sind.
- Deklaration: Besteht aus einer Eigenschaft und einem Wert, getrennt durch einen Doppelpunkt
:(z. B. color:green;). Jede Deklaration sollte mit einem Semikolon (;) abgeschlossen werden.
- Eigenschaft: Das Style-Attribut, das Sie ändern möchten (z. B. color, font-size).
- Wert: Der Wert, den Sie für die Eigenschaft festlegen möchten (z. B. blue, 16px).
Zum Beispiel:
p {
color: blue;
font-size: 16px;
}In diesem Beispiel ist p der Selektor, der auf alle Absatzelemente abzielt. Der Deklarationsblock enthält zwei Deklarationen: eine, die die Textfarbe auf Blau setzt, und die andere, die die Schriftgröße auf 16 Pixel festlegt.
Aufgabe
EinfachDir wird ein HTML-Code mit einem Absatzelement und einer CSS-Regel für diesen Absatz gegeben. Ändere die CSS-Regel, um die Textfarbe in red zu ändern.
Spickzettel
Die CSS-Syntax besteht aus einem Selektor und einem Deklarationsblock:
- Selektor: Gibt das HTML-Element an, das gestaltet werden soll (z. B. p, div, img)
- Deklarationsblock: Enthält Deklarationen, die in geschweifte Klammern
{}eingeschlossen sind - Deklaration: Eigenschaft und Wert, getrennt durch einen Doppelpunkt
:, abgeschlossen mit einem Semikolon; - Eigenschaft: Das zu ändernde Stilattribut (z. B. color, font-size)
- Wert: Der Wert für die Eigenschaft (z. B. blue, 16px)
p {
color: blue;
font-size: 16px;
}Probier es selbst
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Styling with CSS
4Text-Grundlagen
TextfarbeSchriftfamilieSchriftgrößeSchriftstärkeTextausrichtungTextdekorationWiederholungs-Challenge #1Wiederholungs-Challenge #25Farben und Hintergründe
HintergrundfarbeHEX-FarbenRGB-FarbenTransparenz mit RGBAWiederholungs-Challenge #111Layout-Techniken
Block- vs. Inline-ElementeGrundlagen der PositionierungRelative PositionierungAbsolute PositionierungFixierte PositionierungZ-Index GrundlagenWiederholungs-Challenge14Abschluss-Herausforderungen
Elemente anordnenFilmlisteHochzeitseinladungSchwebende Benachrichtigung3Grundlegende Selektoren
Einführung in SelektorenTyp-SelektorKlassen-SelektorID-SelektorGruppen-SelektorenUniversal-SelektorSelektions-Herausforderung9Flexbox
Was ist Flexbox?Flex DirectionJustify ContentAlign ItemsDie perfekte ZentrierungFlexbox-Herausforderung12Grundlagen des Responsive Designs
Was ist Responsive Design?Viewport Meta TagFluid LayoutsViewport-EinheitenMedia Queries GrundlagenFlexible Bilder