Wyjaśnione formatowanie tekstu w CSS
Formatowanie tekstu obejmuje właściwości, takie jak kolor, wyrównanie, dekoracja, wgłębienie, odstępy i wiele innych. Celem tego przewodnika jest oświecenie znaczenia formatowania tekstu w CSS i badanie właściwości, które można użyć do formatowania tekstu.
Jaki rodzaj formatowania tekstu w CSS jest obsługiwany?
Formatowanie tekstu jest wspomagane przez kilka opisanych tutaj właściwości, a składnia tych właściwości jest również zdefiniowane.
Wyrównanie: Wyrównuje tekst za pomocą składni napisanej poniżej.
selektor text-align: value;Wartość tekstu tekstowego może być:
- po prawej: tekst byłby po prawej stronie elementu
- po lewej: lewy brzeg linii jest prosty
- Środek: Tekst byłby w środku i lewej/prawej marginesie będą równe
- uzasadnij: tekst jest ułożony w sposób, który lewy i prawy margines jest utrzymywany prosto i równy
Przykład:
Tekst jest wyrównany
Tekst jest wyśrodkowany
Tekst jest ustawiony w prawo
Tekst jest uzasadniony
Utworzone są cztery klasy CSS, klasa „lewy” reprezentuje lewe wyrównanie tekstu. Podobnie „prawo”, „cent” i „po prostu” są używane do wyrównania tekstu do prawej, wyśrodkowanej i uzasadnionej.
Wyjście
Odstępy między literami: Służy do definiowania przestrzeni między literami słowa w PX, EM, MM lub CM.
selektor list-sacing: value;Przykład: Aby sprawdzić funkcjonalność właściwości odstępstwa litery, użyliśmy następującego kodu.
Odstępy od liter to 5px
Odstępy od liter to 0.5em
Odstępy literowe to 1 mm
W powyższym kodzie klasy CSS są tworzone w celu ustawienia obrotu liter w PX, EM i MM.
Wyjście
Strmacie słów: Ta właściwość służy do dodawania przestrzeni między słowami linii.
selektor Word-Sacing: wartość;Przykład: Właściwość odstępów słów jest dostarczana przy użyciu następujących wierszy kodu.
Każde słowo zostanie oddzielone przez 10px
Klasa CSS jest tworzona w celu stworzenia przestrzeni 10px między słowami.
Wyjście
Kolor: To określa kolor tekstu używanego za pomocą następującej składni.
selektor color: value;Wartość właściwości kolorów może być,
- Nazwa koloru i.mi., czerwony pomarańczowy
- Wartość szesnastkowa koloru (#00000)
Przykład: Podane poniżej jest wykonywane, aby ustawić kolor
tekst do czerwonego.
Witamy w Linuxhint
Wyjście
Dekoracja: Dekoracja jest przeprowadzana w celu wykonywania działań na temat tekstu, takich jak podkreśla.
selektor text-dekoracja: wartość;Wartość może być jednym z poniższych
- Przez linię: linia pozioma jest umieszczana na tekście
- Overline: linia jest rysowana powyżej tekstu
- Podkreśl: linia pozioma jest umieszczona poniżej linii
- Brak: żadna linia nie zostanie umieszczona
Przykład:
podkreślony tekst
linia przez tekst
Nowal tekst
Powyższy kod obejmuje trzy klasy CSS i trzy akapity. Klasy CSS „UN”, „LT” i „OV” reprezentują styl dekoracji i są używane w trzech różnych akapitach.
Wyjście
Wcięcie: Wgłębienie CSS jest wykonywane do wcięcia (trzymania tekstu w określonej przestrzeni od marginesu) pierwszego wiersza akapitu.
selektor text-indent: wartość;Wartość może być w MM, CM, EM, PX.
Przykład: Tutaj zastosowaliśmy właściwość wcięcia (w PX, EM i CM) na różne akapity w kodzie.
Wcięcie jest ustawione na 25px
wcięcie jest ustawione na 1EM
Wcięcie jest ustawione na 1 cm
Powyższy kod zawiera trzy klasy CSS, a każda klasa wkłada tekst w innej jednostce pomiarowej.
Wyjście
Transformacja: Przypadek tekstu jest zarządzany za pomocą właściwości transformacji, a następnie podana tutaj składnia.
selektor text-transform: wartość;Wartość może być jednym z poniższych
- wielki poziom: Aby zmienić litery na wielką część
- Małe litery: zmienia litery na małe litery
- Kapitalizuj: służy do kapitalizacji pierwszej litery każdego słowa
Przykład: Możesz sprawdzić funkcjonalność transformacji tekstowej z kodu poniżej wygłoszenia.
Przekształcanie się na niższą liczbę
Przekształcanie się na górną liczbę
Pierwsze słowo będzie kapitałowe
Wyżej wymieniony kod zawiera trzy klasy CSS, które mają przekształcić tekst akapitu w formę niższą, górną i kapitalizującą formę.
Wyjście
Wysokość linii: Wysokość linii tekstowych można zdefiniować za pomocą właściwości linii w PX, CM, EM i MM.
selektor linia-height: wartość;Przykład: Poniższe wiersze kodu pokazują użycie właściwości wysokości linii do dostosowania wysokości linii tekstowych.
Wysokość linii wynosi 25px
Wysokość linii to 2em
Wysokość linii wynosi 1 cm
Powyższy kod używa wysokości linii w PX, EM i CM. Ponadto w stylu granicznym akapitów jest solidne (aby lepiej zrozumieć koncepcję wysokości linii).
Wyjście
Kierunek tekstu: Kierunek pisania tekstu w CSS można zarządzać za pomocą właściwości kierunku.
selektor Direction: value;Wartość może być RTL (od prawej do lewej), LTR (od lewej do prawej), początkowa () i dziedziczona (pobierana z elementu nadrzędnego).
Przykład:
Kierunek tekstu jest od prawej do lewej
Utworzona jest klasa CSS, która umożliwia ustawienie kierunku od prawej do lewej.
Wyjście
Cień tekstu: Cień tekstu jest praktykowany, dodając cień o różnych właściwościach.
selektor text-shadow: wartość1 wartość23;Wartości są opisane w następujący sposób
- wartość1 reprezentuje poziomą wielkość cieni
- wartość2 definiuje pionową wielkość cienia
- wartość3 jest używana do kolorów cienia i może być dokładną nazwą koloru, kombinację koloru RGB/RGBA, heksową wartość koloru.
Przykład: Poniższy kod ustawia kolorowy pionowy i poziomy cień.
Podano czerwony cień 1px
Utworzono klasę CSS o nazwie „SH”, która tworzy grubość czerwona o grubości 1px na dostarczonym tekście.
Wyjście
Po przejściu przez tę sekcję uzyskałeś zrozumienie różnych właściwości formatowania tekstu dostarczonych przez CSS.
Wniosek
Formatowanie tekstu w CSS pozwala upiększyć tekst za pomocą właściwości. Ten artykuł zawiera działanie i wykorzystanie wszystkich właściwości formatowania tekstu obsługiwane przez CSS. Każda właściwość jest prowadzona przez następującą składnię, a przykład jest również podany, aby zrozumieć jej użycie. Ten kompleksowy przewodnik umożliwiłby zastosowanie wszelkiego rodzaju możliwych formatów tekstu w CSS.
Pozostań w kontakcie z Linuxhint, aby uzyskać bardziej pouczające przewodniki na CSS i HTML.