Inline-CSS
Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 6 von 76.
Inline-CSS ist eine Methode, CSS-Stile direkt auf ein HTML-Element anzuwenden, indem das Attribut style verwendet wird. Dieser Ansatz ermöglicht es dir, einzelnen Elementen einzigartige Stile zuzuweisen, ohne externe oder interne Stylesheets zu benötigen. Inline-Stile sind nützlich, um schnelle, gezielte Stiländerungen an einem einzelnen Element vorzunehmen.
Hier ist die grundlegende Syntax für die Verwendung von Inline-CSS:
<element style="property: value;"></element><element>: Das HTML-Element, das Sie stylen möchten.style: Ein Attribut, das die CSS-Deklarationen enthält.
property: Die CSS-Eigenschaft, die du festlegen möchtest (z. B. color, font-size).value: Der Wert, den du für die Eigenschaft festlegen möchtest (z. B. blue, 16px).
Zum Beispiel:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>In diesem Beispiel legt das Absatzelement durch Inline-Stile die Textfarbe auf Blau und die Schriftgröße auf 16 Pixel fest. Diese Stile gelten nur für dieses bestimmte Absatzelement.
Aufgabe
EinfachIhnen wird ein HTML-Dokument mit einem Absatzelement gegeben. Verwenden Sie Inline-CSS, um den Absatz mit den folgenden Eigenschaften zu gestalten:
- Setzen Sie die Textfarbe auf red.
- Setzen Sie die Schriftgröße auf 18 pixels.
Schauen Sie sich das Beispiel in der Lektion an, um eine Orientierung zu erhalten!
Probier es selbst
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Styling mit CSS
4Textgrundlagen
TextfarbeSchriftfamilieSchriftgrößeSchriftstärkeTextausrichtungTextdekorationWiederholungsaufgabe Nr. 1Wiederholungsaufgabe Nr. 2
5Farben und Hintergründe
HintergrundfarbeHEX-FarbenRGB-FarbenTransparenz mit RGBAWiederholungs-Challenge #111Layout-Techniken
Block- vs. Inline-ElementeGrundlagen der PositionierungRelative PositionierungAbsolute PositionierungFixierte PositionierungGrundlagen von z-indexWiederholungs-Challenge14Letzte Herausforderungen
Elemente anordnenFilmlisteHochzeitseinladungskarteSchwebende Benachrichtigung3Grundlegende Selektoren
Einführung in SelektorenTypselektorKlassenselektorID-SelektorGruppenselektorenUniversalselektorAuswahl-Challenge9Flexbox
Was ist eine Flexbox?Flex-RichtungInhalte ausrichtenElemente ausrichtenDie perfekte ZentrierungFlexbox-Herausforderung12Grundlagen des Responsive Designs
Was ist Responsive Design?Viewport-Meta-TagFließende LayoutsViewport-EinheitenGrundlagen der Media QueriesFlexible BilderÜbe selbstständig: Web-Playground