Wyzwanie: podstawowe stylowanie
Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 9 z 76.
Wyzwanie
ŁatwyOtrzymujesz dokument HTML z nagłówkiem (<h1>) i akapitem (<p>). Twoim zadaniem jest ostylowanie tych elementów za pomocą kombinacji CSS wstawionego, wewnętrznego i zewnętrznego. Wykonaj poniższe kroki:
- Użyj CSS wstawionego, aby zmienić kolor tekstu nagłówka
<h1>na blue. - Użyj wewnętrznego CSS, aby zmienić kolor tła elementu
bodyna lightgray, a rozmiar czcionki akapitu (<p>) na 16px. - Użyj podanego pliku zewnętrznego CSS o nazwie
styles.css, aby zmienić kolor tekstu akapitu (<p>) na red. - Połącz zewnętrzny plik CSS z dokumentem HTML za pomocą znacznika
<link>.
Spróbuj swoich sił
<html>
<head>
<title>Basic Styling Challenge</title>
<style>
body {
background-color: white;
}
p {
font-size: 12px;
}
</style>
<!-- Podłącz tutaj zewnętrzny plik CSS -->
</head>
<body>
<h1 style="color: red;">This is a heading</h1>
<p>This is a paragraph.</p>
</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 powitalny
Sekcja „O nas”Sekcja kontaktowaZnacznik viewportMedia query8Model 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