Wprowadzenie do formatowania tekstu CSS
W poprzednich dniach byłeś zmuszony do reprezentowania tekstu przy użyciu starej wersji CSS. Miałeś znacznik, aby zmienić cieniowanie i krój pisma, jednak pomiary były utrudnione przez użycie wstępnie scharakteryzowanych wymiarów tekstu. Różne oddziaływania, takie jak intensywność i przekreślanie, były możliwe do wyobrażenia w podstawowych strukturach za pomocą etykiet HTML. Obecnie użytkownik może korzystać z różnych właściwości formatowania tekstu CSS, aby układać tekst na stronach internetowych na swoje sposoby.
W tym rozdziale zobaczysz wiele właściwości formatowania tekstu CSS. Właściwości formatowania tekstu CSS są wykorzystywane do projektowania tekstu, stylizowania tekstu, opisywania kilku stylów formatowania itp. Właściwości zapewniają wizualną reprezentację znaków, spacji, słów, akapitów i wielu innych.
Lista właściwości formatowania tekstu CSS:
Szczegóły sposobów formatowania tekstu w CSS: -
1) Kolor tekstu
Tej właściwości można użyć do zmiany koloru tekstu. Można to zdefiniować za pomocą właściwości color.
Przykład : ilustracja koloru tekstu
CSS Text Color Property
Witaj świecie….
Witamy w EDUCBA…
Wyświetli następujące dane wyjściowe:
2) Wyrównanie tekstu
Ta właściwość może być używana do zmiany poziomu tekstu. Można go zdefiniować za pomocą właściwości lewo, prawo, środek, justowanie.
Przykład : Ilustracja wyrównania tekstu
Text Alignment Property
Witaj świecie…
Witamy w EDUCBA …
Doradca edukacyjny…
Wyświetli następujące dane wyjściowe:
3) Dekoracja tekstu
Ta właściwość może służyć do ozdabiania tekstu. Można go zdefiniować za pomocą właściwości podkreślenia, podkreślenia i przejścia.
Przykład : ilustracja dekoracji tekstowej
Text DecorationProperty
Witaj świecie…
Witamy w EDUCBA …
Doradca edukacyjny…
Wyświetli następujące dane wyjściowe:
4) Transformacja tekstu
Ta właściwość może być używana do zmiany wielkości liter w tekście. Można go zdefiniować za pomocą właściwości wielkich, małych i wielkich liter.
Przykład : Ilustracja transformacji tekstu
Text Transformation Property
Witaj świecie…
Witamy w Educba …
Doradca edukacyjny…
Wyświetli następujące dane wyjściowe:
5) Wcięcie tekstu
Tej właściwości można użyć do wcięcia pierwszego wiersza tekstu. Można go zdefiniować za pomocą właściwości px, cm, pt.
Przykład : Ilustracja wcięcia tekstu
Text Indentation Property
Witaj świecie…
Witamy w Educba …
Doradca edukacyjny…
Wyświetli następujące dane wyjściowe:
6) Odstępy między wyrazami
Ta właściwość może być używana do spacji między słowami. Można go zdefiniować za pomocą właściwości odstępu między wyrazami.
Przykład : Ilustracja odstępów między wyrazami
Word Spacing Property
Witaj świecie…
Witamy w Educba …
Doradca edukacyjny…
Wyświetli następujące dane wyjściowe:
7) Odstępy między literami
Tej właściwości można użyć do uzyskania odstępu między znakami. Można go zdefiniować za pomocą właściwości odstępu między literami.
Przykład : Ilustracja odstępów między literami
Letter Spacing Property
Witaj świecie…
Witamy w Educba …
Doradca edukacyjny…
Wyświetli następujące dane wyjściowe:
8) Wysokość linii
Tej właściwości można użyć do uzyskania odstępu między wierszami. Można go zdefiniować za pomocą właściwości wysokości linii.
Przykład : ilustracja wysokości linii
Line Height Property
h3
(
line-height:2.5;
)
h4
(
line-height:150%;
)
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) jest
wiodący globalny dostawca edukacji opartej na umiejętnościach
W eduCBA dumą jest dla nas nastawienie na pracę
praktyczne kursy dostępne dla każdego, zawsze i wszędzie.
Wyświetli następujące dane wyjściowe:
9) Kierunek tekstu
Tej właściwości można użyć do zmiany kierunku tekstu. Można go zdefiniować za pomocą właściwości rtl. Ustawia kierunek od prawej do lewej.
Przykład : ilustracja kierunku tekstu
Text Direction Property
Hello World … Witamy w Educba …
Wyświetli następujące dane wyjściowe:
10) Cień tekstu
Tej właściwości można użyć do nadania cienia tekstowi. Można go zdefiniować za pomocą właściwości text-shadow. Wykorzystuje takie elementy, jak lewa pozycja, najwyższa pozycja, rozmiar rozmycia, nazwa koloru.
Przykład : Ilustracja cienia tekstu
Text Shadow Property
h3
(
text-shadow:3px 3px 2px lightblue;
)
h4
(
text-shadow:3px 3px 2px plum;
)
Witaj świecie … Witaj w EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) to edukacja oparta na umiejętnościach
Wyświetli następujące dane wyjściowe:
11) Ems
To skalowalne urządzenie do określania rozmiaru. Tej właściwości em można użyć do zdefiniowania rozmiaru tekstu zgodnie z otaczającym tekstem. Domyślny rozmiar tekstu to 1em, co odpowiada 12 pkt. 2em jest równy 24pt i tak dalej.
Przykład : Ilustracja właściwości ems
Ems Property
h3
(
font-size: 0.8em;
)
h4
(
font-size: 1.2em;
)
Witaj świecie … Witaj w EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) to edukacja oparta na umiejętnościach
Wyświetli następujące dane wyjściowe:
12) Rodzina czcionek
Ta właściwość służy do zapewnienia różnego rodzaju nazw rodzin czcionek dla zaznaczonego tekstu. Na przykład Helvetica, Calibri, Arial, Sans-serif, Times, Courier New itp.
Przykład : Ilustracja właściwości font-family
Font Family Property
Witaj świecie…
Witamy w Educba …
Doradca edukacyjny…
Wyświetli następujące dane wyjściowe:
Wniosek
Do tej pory badaliśmy sposoby formatowania tekstu w CSS. Możesz zobaczyć, że tekst jest prezentowany z różnymi typami właściwości formatowania tekstu. Te właściwości są bardzo ważnymi aspektami CSS do wyświetlania tekstu na stronie internetowej, aby użytkownicy lub czytelnicy mogli przyciągnąć uwagę, widząc twój tekst na stronie internetowej. Korzystaj z tych właściwości tekstu bardzo łatwo i skutecznie na stronach internetowych.
Polecane artykuły
To był przewodnik po formatowaniu tekstu CSS. Tutaj omówiliśmy szczegółowo wprowadzenie i listę właściwości formatowania tekstu CSS z przykładowymi przykładowymi kodami i prawidłowymi danymi wyjściowymi. Możesz także przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -
- Co to jest CSS?
- SASS vs CSS
- Polecenia CSS
- Pytania do wywiadu CSS3