Úvod do formátovania textu CSS
V predchádzajúcich dňoch ste boli nútení reprezentovať text pomocou starej verzie CSS. Mali ste zmeniť značku a tieňovanie a písmo obsahu, ale meranie bolo zamedzené využitím vopred charakterizovaných rozmerov textu. Rôzne vplyvy, ako je intenzita a prienik, boli mysliteľné iba v základných štruktúrach pomocou značiek HTML. V súčasnosti môže užívateľ používať rôzne vlastnosti formátovania textu CSS na usporiadanie textu na webových stránkach svojimi spôsobmi.
V tejto kapitole uvidíte množstvo vlastností formátovania textu CSS. Vlastnosti formátovania textu CSS sa používajú na navrhovanie textu, úpravu textu, popisovanie niekoľkých štýlov formátovania atď. Vlastnosti poskytujú vizuálne znázornenie znakov, medzier, slov, odsekov a mnoho ďalších.
Zoznam vlastností formátovania textu CSS:
Podrobnosti o spôsoboch formátovania textu v CSS: -
1) Farba textu
Táto vlastnosť sa dá použiť na zmenu farby textu. Dá sa definovať pomocou vlastnosti color.
Príklad : Ilustrácia farby textu
CSS Text Color Property
Ahoj svet …
Vitajte v EDUCBA …
Zobrazí sa nasledujúci výstup:
2) Zarovnanie textu
Túto vlastnosť možno použiť na zmenu vodorovnej polohy textu. Dá sa definovať pomocou zarovnania vľavo, vpravo, v strede.
Príklad : Ilustrácia zarovnania textu
Text Alignment Property
Ahoj svet …
Vitajte v EDUCBA …
Vzdelávací konzultant …
Zobrazí sa nasledujúci výstup:
3) Textové dekorácie
Túto vlastnosť možno použiť na ozdobenie textu. Dá sa definovať pomocou vlastností podčiarknutia, podčiarknutia a vedenia.
Príklad : ilustrácia textovej dekorácie
Text DecorationProperty
Ahoj svet …
Vitajte v EDUCBA …
Vzdelávací konzultant …
Zobrazí sa nasledujúci výstup:
4) Transformácia textu
Túto vlastnosť možno použiť na zmenu prípadov textu. Dá sa definovať pomocou veľkých písmen, veľkých a malých písmen.
Príklad : Ilustrácia transformácie textu
Text Transformation Property
ahoj svet …
Vitajte vo vzdelávaní …
Vzdelávací konzultant …
Zobrazí sa nasledujúci výstup:
5) odsadenie textu
Túto vlastnosť možno použiť na odsadenie prvého riadku textu. Dá sa definovať pomocou vlastností px, cm, pt.
Príklad : Ilustrácia odsadenia textu
Text Indentation Property
Ahoj svet …
Vitajte na stránke Educba …
Vzdelávací konzultant …
Zobrazí sa nasledujúci výstup:
6) Rozstup slov
Túto vlastnosť možno použiť na vytvorenie medzery medzi slovami. Dá sa definovať pomocou vlastnosti medzier slov.
Príklad : ilustrácie medzier medzi slovami
Word Spacing Property
Ahoj svet …
Vitajte na stránke Educba …
Vzdelávací konzultant …
Zobrazí sa nasledujúci výstup:
7) Rozstup písmen
Túto vlastnosť možno použiť na poskytnutie medzery medzi znakmi. Môže sa definovať pomocou vlastnosti medzery medzi písmenami.
Príklad : zobrazenie medzier medzi písmenami
Letter Spacing Property
Ahoj svet …
Vitajte na stránke Educba …
Vzdelávací konzultant …
Zobrazí sa nasledujúci výstup:
8) Výška riadku
Túto vlastnosť možno použiť na vytvorenie medzery medzi čiarami. Dá sa definovať pomocou vlastnosti height-line.
Príklad : Ilustrácia výšky riadku
Line Height Property
h3
(
line-height:2.5;
)
h4
(
line-height:150%;
)
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) je spoločnosť
popredný svetový poskytovateľ vzdelávania založeného na rozvoji zručností
V spoločnosti eduCBA je na nás hrdosť, aby sme sa zamerali na prácu
ruky na kurzoch dostupných pre kohokoľvek, kedykoľvek a kdekoľvek.
Zobrazí sa nasledujúci výstup:
9) Text smeru
Táto vlastnosť sa dá použiť na zmenu smeru textu. Môže sa definovať pomocou vlastnosti rtl. Nastavuje smer sprava doľava.
Príklad : Obrázok smeru textu
Text Direction Property
Ahoj svet … Vitajte vo Educbe …
Zobrazí sa nasledujúci výstup:
10) Text-shadow
Túto vlastnosť možno použiť na vytvorenie tieňa pre text. Môže sa definovať pomocou vlastnosti shadow-text. Používa komponenty ako ľavá pozícia, horná pozícia, veľkosť rozostrenia, názov farby.
Príklad : ilustrácie tieňa textu
Text Shadow Property
h3
(
text-shadow:3px 3px 2px lightblue;
)
h4
(
text-shadow:3px 3px 2px plum;
)
Ahoj svet … Vitajte v EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) je vzdelávanie založené na zručnostiach
Zobrazí sa nasledujúci výstup:
11) Ems
Toto je škálovateľná jednotka na určovanie veľkosti. Túto vlastnosť em je možné použiť na definovanie veľkosti textu podľa okolitého textu. Predvolená veľkosť textu je 1em, čo sa rovná 12pt. 2em sa rovná 24pt a tak ďalej.
Príklad : Ilustrácia ems vlastníctva
Ems Property
h3
(
font-size: 0.8em;
)
h4
(
font-size: 1.2em;
)
Ahoj svet … Vitajte v EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) je vzdelávanie založené na zručnostiach
Zobrazí sa nasledujúci výstup:
12) Rodina písiem
Táto vlastnosť sa používa na zadanie rôznych typov mien rodiny rodín pre vybraný text. Napríklad Helvetica, Calibri, Arial, Sans-serif, Times, Courier New, atď.
Príklad : Ilustrácia vlastnosti rodiny fontov
Font Family Property
Ahoj svet …
Vitajte na stránke Educba …
Vzdelávací konzultant …
Zobrazí sa nasledujúci výstup:
záver
Doteraz sme študovali spôsoby formátovania textu v CSS. Mohli ste vidieť, že sa text zobrazuje s rôznymi typmi vlastností formátovania textu. Tieto vlastnosti sú veľmi dôležitými aspektmi CSS na zobrazovanie textu na webovej stránke, aby používatelia alebo čitatelia mohli získať pozornosť, keď uvidia váš text na webovej stránke. Využite tieto vlastnosti textu veľmi ľahko a efektívne na webových stránkach.
Odporúčané články
Toto bol sprievodca formátovaním textu CSS. Tu uvádzame podrobne úvod a zoznam vlastností formátovania textu CSS s ukážkami príkladov kódu a správnym výstupom. Viac informácií nájdete aj v ďalších navrhovaných článkoch -
- Čo je to CSS?
- SASS vs CSS
- Príkazy CSS
- Rozhovor s CSS3