Wiederholungsaufgabe Nr. 1
Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 23 von 76.
Aufgabe
EinfachIn dieser ersten Wiederholungsaufgabe wendest du dein Wissen über Textgestaltungseigenschaften in CSS an, um ein bestimmtes Design nachzubilden. Diese Aufgabe prüft deine Fähigkeit, verschiedene Texteigenschaften wie color, font-family, font-size, font-weight, text-align und text-decoration zu kombinieren.
Dir wird ein HTML-Dokument mit verschiedenen Elementen gegeben. Deine Aufgabe besteht darin, die verschiedenen Eigenschaften, die du in diesem Abschnitt kennengelernt hast, anzuwenden, um diese Elemente zu gestalten. Befolge die folgenden Schritte:
- Schreibe eine CSS-Regel, die alle
<h1>-Elemente auswählt.- Setze die Farbe auf Dunkelblau.
- Setze die Schriftgröße auf 32px.
- Setze die Schriftstärke auf fett.
- Richte den Text zentriert aus.
- Schreibe eine CSS-Regel, die alle Elemente mit der Klasse
intro-textauswählt.- Setze die Farbe auf Grau.
- Setze die font-family auf
Arial, Helvetica, sans-serif; - Setze die Schriftgröße auf 18px.
- Schreibe eine CSS-Regel, die alle
<li>-Elemente auswählt.- Setze die font-weight auf 600.
- Schreibe eine CSS-Regel, die alle
<a>-Elemente auswählt.- Setze die text-decoration auf none.
- Setze die Schrift auf deine bevorzugte font-family auf
"Times New Roman", Times, serif.
Probier es selbst
<html>
<head>
<title>Recap Challenge #1</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>Discovering the Ocean</h1>
<p class="intro-text">The ocean covers 70% of the Earth's surface and is full of life. It also helps regulate the planet's climate.</p>
<h2>Marine Life</h2>
<ul>
<li>Whales</li>
<li>Octopuses</li>
<li>Coral Reefs</li>
</ul>
<p>Learn more at <a href="https://www.oceans.org" target="_blank">The Ocean Conservation Society</a>.</p>
</body>
</html>
Alle Lektionen in Styling mit CSS
4Textgrundlagen
TextfarbeSchriftfamilieSchriftgrößeSchriftstärkeTextausrichtungTextdekorationWiederholungsaufgabe Nr. 1Wiederholungsaufgabe Nr. 25Farben 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