formatowanie tekstu
Ten tekst jest stylizowany z niektórymi właściwościami formatowania tekstu. Nagłówek używa text-align, text-transform i color właściwości. Akapit jest wcięty, wyrównane, i jest określony w przestrzeni pomiędzy znakami. Podkreślenia jest usuwany z tym kolorze "Try it Yourself" łącza.
Kolor tekstu
color właściwość jest używana, aby ustawić kolor tekstu.
Z CSS, kolor jest najczęściej określa:
- nazwa koloru - podobnie jak "red"
- wartość HEX - podobnie jak "#ff0000"
- wartość RGB - podobnie jak "rgb(255,0,0)"
Spójrz na CSS wartości kolorów , aby uzyskać pełną listę możliwych wartości kolorów.
Domyślny kolor tekstu na stronie jest zdefiniowana w selektorze ciała.
 | Uwaga: Dla W3C CSS zgodny: Jeśli zdefiniowania color właściwość, należy również określić background-color właściwość. |
|---|
Wyrównanie tekstu
text-align właściwość jest używana, aby ustawić poziome wyrównanie tekstu.
Tekst może być wyrównany w lewo lub prawo, skupione lub uzasadnione.
Poniższy przykład pokazuje, centrum wyrównane, a lewy i prawy wyrównane tekstu (wyrównanie do lewej jest domyślna, jeśli kierunek tekstu jest od lewej do prawej, a tuż ustawienie jest domyślne, jeśli kierunek tekstu to od prawej do lewej):
Gdy text-align właściwość jest ustawiona na "justify" , każda linia jest rozciągnięta tak, że każda linia ma jednakową szerokość, a marginesy lewy i prawy są proste (jak w magazynach i gazetach):
Dekoracja tekstu
text-decoration właściwość jest używana, aby ustawić lub zdjąć ozdoby z tekstu.
Wartość text-decoration: none; często jest stosowany do usuwania podkreślenia z linkami:
Pozostałe text-decoration wartości są wykorzystywane do dekoracji tekst:
Przykład
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
} Spróbuj sam " | Uwaga: Nie zaleca się, aby podkreślić, że tekst nie jest związek, jak często myli czytelnika. |
|---|
Transformacja tekstu
text-transform właściwość jest używana do określania wielkich i małych liter w tekście.
Może być używany do włączania wszystko pod wielkimi lub małymi literami lub pierwszą literę każdego słowa:
Przykład
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
} Spróbuj sam " Wcięcie tekstu
text-indent właściwość jest używana do określania wcięcia pierwszego wiersza tekstu:
Odstępy między literami
letter-spacing właściwość jest używana do określenia przestrzeni pomiędzy znakami w tekście.
Poniższy przykład pokazuje, jak zwiększyć lub zmniejszyć odstępy między znakami:
Wysokość linii
line-height właściwość jest używana, aby określić odstęp między wierszami:
Kierunek tekstu
direction właściwość jest używana, aby zmienić kierunek tekstu elementu:
słowo Rozstaw
word-spacing właściwość służy do określania odstępu między wyrazami w tekście.
Poniższy przykład pokazuje, w jaki sposób zwiększyć lub zmniejszyć przestrzeń między słowami:
Więcej przykładów
Wyłącz zawijanie tekstu wewnątrz elementu
Ten przykład pokazuje, jak wyłączyć zawijanie tekstu wewnątrz elementu.
Pionowe wyrównanie obrazu
Ten przykład pokazuje jak ustawić pionowe wyrównanie obrazu w tekście.
Dodaj cień do tekstu
Ten przykład pokazuje, jak dodać cień do tekstu.
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »
Wszystkie właściwości CSS Text
| Nieruchomość | Opis |
|---|---|
| color | Ustawia kolor tekstu |
| direction | Określa kierunek / kierunek pisania tekstu |
| letter-spacing | Zwiększa lub zmniejsza odstępy między znakami w tekście |
| line-height | Ustawia wysokość wiersza |
| text-align | Określa poziome wyrównanie tekstu |
| text-decoration | Określa dekoracji dodany do tekstu |
| text-indent | Określa wcięcie pierwszego wiersza tekstu w bloku |
| text-shadow | Określa efekt cienia dodane do tekstu |
| text-transform | Kontroluje wielkość liter tekstu |
| unicode-bidi | Używany razem z kierunku nieruchomości, aby ustawić lub powrotu, czy tekst powinien być przesłonięta do obsługi wielu języków w tym samym dokumencie |
| vertical-align | Określa pionowe wyrównanie elementu |
| white-space | Określa sposób white-space wewnątrz elementu jest obsługiwany |
| word-spacing | Zwiększa lub zmniejsza przestrzeń między wyrazami w tekście |