Sfida di ripasso #1
Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 23 di 76.
Sfida
FacileIn questa prima sfida di ripasso, applicherai le tue conoscenze sulle proprietà di stile del testo in CSS per ricreare un design specifico. Questa sfida metterà alla prova la tua capacità di combinare diverse proprietà del testo, come color, font-family, font-size, font-weight, text-align e text-decoration.
Ti viene fornito un documento HTML con vari elementi. Il tuo compito è applicare proprietà diverse che hai imparato in questa sezione per definire lo stile di questi elementi. Segui i passaggi qui sotto:
- Scrivi una regola CSS che selezioni tutti gli elementi
<h1>.- Imposta il colore su blu scuro.
- Imposta la dimensione del carattere su 32px.
- Imposta lo spessore del carattere su grassetto.
- Imposta l'allineamento del testo al centro.
- Scrivi una regola CSS che selezioni tutti gli elementi con la classe
intro-text.- Imposta il colore su grigio.
- Imposta la famiglia di caratteri su
Arial, Helvetica, sans-serif; - Imposta la dimensione del carattere su 18px.
- Scrivi una regola CSS che selezioni tutti gli elementi
<li>.- Imposta lo spessore del carattere su 600.
- Scrivi una regola CSS che selezioni tutti gli elementi
<a>.- Imposta la decorazione del testo su none.
- Imposta il carattere sulla famiglia di caratteri che preferisci:
"Times New Roman", Times, serif.
Provalo tu
<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>
Tutte le lezioni di Stilizzare con CSS
4Fondamenti del testo
Colore del testoFamiglia di caratteriDimensione del carattereSpessore del carattereAllineamento del testoDecorazione del testoSfida di ripasso #1Sfida di ripasso #27Modello a scatola - Parte 1
Cos'è il modello a scatola?Spaziatura internaMarginiBordiLarghezza e altezzaSfida di riepilogo8Modello a scatola Parte 2
Dimensionamento del boxRaggio del bordoOverflowOmbra del boxSfida di ripassoEsercitati da solo: Playground Web