Úvod do formátování textu CSS
V předchozích dnech jste byli nuceni reprezentovat text pomocí staré verze CSS. Měli jste značku změnit stínování a písmo obsahu, ale měření bylo znemožněno využitím předem charakterizovaných rozměrů textu. Různé dopady, jako je intenzita a průnik, byly myslitelné jen v základních strukturách pomocí značek HTML. V současné době může uživatel pomocí různých vlastností formátování textu CSS uspořádat text na webových stránkách svým způsobem.
V této kapitole uvidíte řadu vlastností formátování textu CSS. Vlastnosti formátování textu CSS se používají k navrhování textu, stylování textu, popisu několika stylů formátování atd. Vlastnosti poskytují vizuální reprezentaci znaků, mezer, slov, odstavců a mnoha dalších.
Seznam vlastností formátování textu CSS:
Podrobnosti o způsobech formátování textu v CSS: -
1) Barva textu
Tuto vlastnost lze použít ke změně barvy textu. Lze jej definovat pomocí vlastnosti color.
Příklad : ilustrace barvy textu
CSS Text Color Property
Ahoj světe….
Vítejte v EDUCBA…
Zobrazí se následující výstup:
2) Zarovnání textu
Tuto vlastnost lze použít ke změně vodorovné polohy textu. Lze jej definovat pomocí zarovnání vlastností vlevo, vpravo, uprostřed.
Příklad : Ilustrace zarovnání textu
Text Alignment Property
Ahoj světe…
Vítejte v EDUCBA …
Vzdělávací poradce …
Zobrazí se následující výstup:
3) Textové dekorace
Tuto vlastnost lze použít k ozdobení textu. Lze jej definovat pomocí vlastností podtržení, překrytí a průniku.
Příklad : ilustrace textové dekorace
Text DecorationProperty
Ahoj světe…
Vítejte v EDUCBA …
Vzdělávací poradce …
Zobrazí se následující výstup:
4) Transformace textu
Tuto vlastnost lze použít ke změně případů textu. Lze jej definovat pomocí velkých písmen, velkých a malých písmen.
Příklad : Ilustrace transformace textu
Text Transformation Property
Ahoj světe…
Vítejte v educba …
Vzdělávací poradce …
Zobrazí se následující výstup:
5) odsazení textu
Tuto vlastnost lze použít k odsazení prvního řádku textu. Lze jej definovat pomocí vlastností px, cm, pt.
Příklad : Ilustrace odsazení textu
Text Indentation Property
Ahoj světe…
Vítejte ve společnosti Educba …
Vzdělávací poradce …
Zobrazí se následující výstup:
6) Rozestup slov
Tuto vlastnost lze použít k vytvoření mezery mezi slovy. Lze jej definovat pomocí vlastnosti mezer mezi slovy.
Příklad : ilustrace mezer mezi slovy
Word Spacing Property
Ahoj světe…
Vítejte ve společnosti Educba …
Vzdělávací poradce …
Zobrazí se následující výstup:
7) Rozteč písmen
Tuto vlastnost lze použít k poskytnutí mezery mezi znaky. Lze jej definovat pomocí vlastnosti mezery mezi písmeny.
Příklad : ilustrace mezer mezi písmeny
Letter Spacing Property
Ahoj světe…
Vítejte ve společnosti Educba …
Vzdělávací poradce …
Zobrazí se následující výstup:
8) Výška řádku
Tuto vlastnost lze použít k vytvoření mezery mezi řádky. Lze jej definovat pomocí vlastnosti výška řádku.
Příklad : Ilustrace výšky řádku
Line Height Property
h3
(
line-height:2.5;
)
h4
(
line-height:150%;
)
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) je a
přední světový poskytovatel vzdělávání založeného na dovednostech
Ve společnosti eduCBA je na nás hrdost, abychom se zaměřili na práci
ruce na kurzech dostupných pro kohokoli, kdykoli a kdekoli.
Zobrazí se následující výstup:
9) Směr textu
Tuto vlastnost lze použít ke změně směru textu. Lze jej definovat pomocí vlastnosti rtl. Nastavuje směr zprava doleva.
Příklad : Ukázka směru textu
Text Direction Property
Ahoj svět … Vítejte na Educba …
Zobrazí se následující výstup:
10) Stín textu
Tuto vlastnost lze použít pro stínování textu. Lze ji definovat pomocí vlastnosti text-shadow. Používá komponenty, jako je levá poloha, horní poloha, velikost rozostření, název barvy.
Příklad : ilustrace stínů textu
Text Shadow Property
h3
(
text-shadow:3px 3px 2px lightblue;
)
h4
(
text-shadow:3px 3px 2px plum;
)
Ahoj svět … Vítejte v EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) je vzdělávání založené na dovednostech
Zobrazí se následující výstup:
11) Ems
Toto je škálovatelná jednotka pro dimenzování. Tuto vlastnost em lze použít k definování velikosti textu podle okolního textu. Výchozí velikost textu je 1em, což se rovná 12pt. 2em se rovná 24pt a tak dále.
Příklad : Ilustrace ems vlastnosti
Ems Property
h3
(
font-size: 0.8em;
)
h4
(
font-size: 1.2em;
)
Ahoj svět … Vítejte v EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) je vzdělávání založené na dovednostech
Zobrazí se následující výstup:
12) Rodina písem
Tato vlastnost se používá k poskytování různých typů názvů rodin písem pro vybraný text. Například Helvetica, Calibri, Arial, Sans-serif, Times, Courier New atd.
Příklad : Ilustrace vlastnosti rodiny fontů
Font Family Property
Ahoj světe…
Vítejte ve společnosti Educba …
Vzdělávací poradce …
Zobrazí se následující výstup:
Závěr
Zatím jsme studovali způsoby formátování textu v CSS. Viděli jste, že je text prezentován s různými typy vlastností formátování textu. Tyto vlastnosti jsou velmi důležitými aspekty CSS pro zobrazení textu na webové stránce, aby uživatelé nebo čtenáři mohli získat přitažlivost tím, že uvidí váš text na webu. Využijte tyto vlastnosti textu velmi snadno a efektivně na webových stránkách.
Doporučené články
Toto byl průvodce formátováním textu CSS. Zde diskutujeme podrobně úvod a seznam vlastností formátování textu CSS s příklady ukázkového kódu a správným výstupem. Další informace naleznete také v dalších navrhovaných článcích -
- Co je CSS?
- SASS vs CSS
- Příkazy CSS
- CSS3 Interview Otázky