Wyrównanie tekstu
Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 21 z 76.
W CSS właściwość text-align służy do kontrolowania poziomego wyrównania tekstu w elemencie HTML.
Typowe wartości właściwości text-align to:
left: Wyrównuje tekst do lewej. Jest to domyślne wyrównanie większości tekstu.
right: Wyrównuje tekst do prawej.center: Wyśrodkowuje tekst poziomo w elemencie.
Na przykład:
p {
text-align: left;
}
h1 {
text-align: center;
}
.right-align {
text-align: right;
}
Wyzwanie
ŁatwyOtrzymujesz dokument HTML z nagłówkiem (<h1>), akapitem (<p>) i elementem div (<div>). Twoim zadaniem jest użycie właściwości text-align do stylizacji tych elementów. Wykonaj poniższe kroki:
- Napisz regułę CSS, która wybiera element
<h1>. Ustawtext-alignnacenter. - Napisz regułę CSS, która wybiera element
<p>. Ustawtext-alignnaright. - Napisz regułę CSS, która wybiera element
<div>. Ustawtext-alignnaleft.
Spróbuj swoich sił
<html>
<head>
<title>Text Alignment</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a heading. </h1>
<p>This is a paragraph.</p>
<div>This is a division. </div>
</body>
</html>
Sprawdź sięTa lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
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