Wyzwanie powtórkowe #2
Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 24 z 76.
Wyzwanie
ŁatwyW tym drugim wyzwaniu powtórkowym wykorzystasz swoją wiedzę na temat właściwości stylizowania tekstu w CSS, aby odtworzyć konkretny projekt. To wyzwanie sprawdzi Twoją umiejętność łączenia różnych właściwości tekstu, takich jak color, font-family, font-size, font-weight, text-align i text-decoration, aby dopasować elementy do podanego projektu.
Otrzymujesz dokument HTML z nagłówkiem (<h1>), akapitem (<p>), linkiem (<a>) i listą nieuporządkowaną (<ul>) zawierającą elementy listy (<li>). Twoim zadaniem jest użycie poznanych właściwości stylizowania tekstu, aby nadać tym elementom styl zgodny z projektem przedstawionym na poniższym obrazie:

Wykonaj poniższe kroki:
- Napisz regułę CSS, która wybiera element
<h1>. Ustawcolornablack,font-familyna"Times New Roman", Times, serif,font-sizena48px,font-weightnabold, atext-alignnacenter. - Napisz regułę CSS, która wybiera element
<p>. Ustawcolornagray,font-familynaArial, Helvetica, sans-serif,font-sizena18px, atext-alignnacenter. - Napisz regułę CSS, która wybiera element
<a>. Ustawcolornared, atext-decorationnanone. - Napisz regułę CSS, która wybiera wszystkie elementy
<li>. Ustawcolornagreen,font-familyna"Courier New", Courier, monospace,font-sizena25px, afont-weightna600.
Spróbuj swoich sił
<html>
<head>
<title>Recap Challenge #2</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph with a <a href="#">link</a>.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>Wszystkie lekcje w sekcji Stylizacja za pomocą CSS
4Podstawy tekstu
Kolor tekstuRodzina czcionekRozmiar czcionkiGrubość czcionkiWyrównanie tekstuDekoracja tekstuWyzwanie powtórkowe #1Wyzwanie powtórkowe #27Model pudełkowy, część 1
Czym jest model pudełkowy?Odstęp wewnętrznyMarginesyObramowaniaSzerokość i wysokośćZadanie podsumowujące13Strona internetowa Tonga
Menu nawigacyjneNagłówek powitalny8Model pudełkowy, część 2
Rozmiar pudełkaZaokrąglenie rogówPrzepełnienieCień pudełkaWyzwanie podsumowujące3Podstawowe selektory
Wprowadzenie do selektorówSelektor typuSelektor klasySelektor identyfikatoraGrupowanie selektorówSelektor uniwersalnyWyzwanie: selektory9Flexbox
Czym jest Flexbox?Kierunek flexJustify ContentAlign ItemsIdealne wyśrodkowanieWyzwanie Flexbox12Podstawy responsywnego projektowania
Czym jest responsywne projektowanie?Znacznik meta viewportElastyczne układyJednostki viewportuPodstawy Media QueriesElastyczne obrazyPoćwicz samodzielnie: Edytor online Web