Text je důležitý i pro ty nejúžasnější, vizuálně nejnáročnější webové návrhy. Věnujte svému textu pozornost, kterou si zaslouží, pomocí těchto vlastností CSS.
Kaskádové styly (CSS) popisují, jak HTML zobrazuje prvky na obrazovce. CSS může ovládat rozvržení více webových stránek pomocí několika řádků kódu.
CSS má vlastnosti formátování, které ovlivňují mezery, vzhled a zarovnání textu. Zde jsou některé vlastnosti, které můžete použít ke stylování textu na stránkách aplikace.
1. Barva textu
The barva vlastnost určuje hlavní barvu popředí vašeho textu. Můžete použít předdefinovaný název barvy jako Červené, bílýnebo zelená. Můžete také použít hexadecimální hodnotu nebo jiné jednotky jako RGB, HSL a RGBA.
CSS frameworky jako Tailwind CSS mají vestavěnou funkci barev, která zobrazuje různé odstíny. To vám usnadní výběr odstínu, který preferujete. Změňme barvu následujících nadpisů pomocí některých z těchto vlastností:
<tělo>
<h1>Změnit mou barvuh1><h2>Změnit mou barvuh2>
<h3>Změnit mou barvuh3>
<h4>Změnit mou barvuh4>
tělo>
CSS bude vypadat takto:
h1 {
barva: oranžový;
}h2 {
barva: #ff6600;
}h3 {
barva: rgb(255, 102, 0);
}
h4 {
barva: hsl(24, 100%, 50%);
}
A stylizovaný text bude vypadat takto:
2. Barva pozadí
Můžete použít barva pozadí vlastnost vytvořit atraktivní pozadí. Použijte jej k nastavení různých pozadí pro následující nadpisy:
<tělo>
<h1>Změnit barvu pozadíh1><h2>Změnit barvu pozadíh2>
<h3>Změnit barvu pozadíh3>
<h4>Změnit barvu pozadíh4>
tělo>
S následujícím CSS:
h1 {
barva pozadí: oranžový;
}h2 {
barva pozadí: #009900;
}h3 {
barva pozadí: rgb(204, 0, 0);
}
h4 {
barva pozadí: hsl(60, 100%, 50%);
}
Když váš prohlížeč vykreslí tuto stránku, bude vypadat nějak takto:
3. Zarovnání textu
The zarovnání textu vlastnost nastavuje vodorovné zarovnání textu. Tato hodnota může být vlevo, odjet, že jo, centrumnebo ospravedlnit.
Hodnota zarovnání roztáhne každý řádek textu, takže všechny zaberou stejnou šířku na pravém a levém okraji. Pomocí následujícího ukázkového kódu prozkoumejte tyto čtyři hodnoty:
<tělo>
<h1>Zarovnejte mě dolevah1><h2> Zarovnejte mě dopravah2>
<h3>Zarovnejte mě na středh3>
<ptřída="ex4"><silný>Zarovnejte mě oprávněněsilný>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sempre diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.p>
<p><silný>Žádné zarovnání silný>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sempre diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.p>
tělo>
Chcete-li použít různá zarovnání, použijte následující CSS:
h1 {
zarovnání textu: vlevo, odjet;
}h2 {
zarovnání textu: že jo;
}h3 {
zarovnání textu: centrum;
}
.ex4{
zarovnání textu: ospravedlnit;
}
V prohlížeči to bude vypadat takto:
4. Směr textu
The směr textu vlastnost definuje směr textu. Definujte směr pomocí vlastností rtl (zprava doleva) popř ltr (zleva do prava). Tyto dva určují, kterým směrem chcete, aby text plynul.
Například použijte rtl při práci s jazyky psanými zprava doleva, jako je hebrejština nebo arabština. Používáš ltr pro jazyky psané zleva doprava, jako je angličtina.
Pojďme si to ilustrovat pomocí kódu níže:
<tělo>
<div>
<ptřída='ex1'>Tento odstavec jde zprava doleva. Kurzor
se pohybuje zprava doleva, když napíšete další informace
strana.p>
<pid="ex2">Tento odstavec jde zleva doprava. Kurzor se pohybuje
zleva pište, když na stránce zadáte další informace!p>
div>
tělo>
S tímto doprovodným CSS:
.ex1 {
směr: rtl;
}
#ex2 {
směr: ltr;
}
Konečný výsledek bude vypadat nějak takto:
5. Textová dekorace
The text-dekorace vlastnost nastavuje vzhled ozdobných čar na textu. Je to zkratka pro text-decoration-line,text-dekorace-barva,text-decoration-style, a text-dekorace-tloušťka vlastnictví. Pokud si nepřejete mít vlastnost u prvků, které mají odkazy, použijte text-dekorace: žádná;
Měli byste se vyhnout podtržení normálního textu, protože tento styl obvykle označuje odkaz. Následující obrázek ukazuje některé příklady v kódu:
<tělo>
<h1>Dekorace překrývajícího se textuh1><h2>Dekorace procházející textemh2>
<h3>Podtrhněte výzdobu textuh3>
<ptřída="ex">Dekorace textu podtržení a podtržení.p>
<p><Ahref="default.asp">Toto je odkazA>p>
tělo>
Pomocí tohoto CSS můžete použít různé dekorační efekty:
h1 {
text-dekorace: overline;
}h2 {
text-dekorace: line-through;
}h3 {
text-dekorace: zdůraznit;
}p.ex {
text-dekorace: overlinezdůraznit;
}
A {
text-dekorace: žádný;
}
A zobrazí něco takového:
6. Transformace textu
The textová transformace vlastnost určuje typ velkých písmen, ve kterých se písmena objevují. Může to být velká nebo malá písmena. Můžete jej také použít pro velké první písmeno každého slova:
Následující příklad ukazuje, jak to udělat v kódu:
<tělo>
<h1>Příklady vlastnosti text-transformh1><ptřída="velká písmena">Tato věta je velká.p>
<ptřída="malá písmena">Tato věta je malá.p>
<ptřída="kapitalizovat">Tento text pište velkými písmeny.p>
tělo>
Soubor CSS:
p.velká písmena {
textová transformace: velká písmena;
}p.malá písmena {
textová transformace: malá písmena;
}
p.kapitalizovat {
textová transformace: kapitalizovat;
}
S následujícím výsledkem:
7. Mezery mezi písmeny
The mezery mezi písmeny vlastnost určuje mezeru mezi písmeny v textu. Následující příklad ukazuje, jak určit různé styly mezer.
<tělo>
<h1>Příklady mezer mezi písmenyh1><h2>Toto je nadpis 1h2>
<h3>Toto je nadpis 2h3>
tělo>
Použijte pixely nebo jiné měrné jednotky v souboru CSS:
h2 {
mezery mezi písmeny: 7px;
}
h3 {
mezery mezi písmeny: -2px;
}
A výsledný text bude roztažen nebo zmáčknut:
8. Mezery mezi slovy
The mezery mezi slovy vlastnost určuje mezeru mezi slovy v textu. Prohlížeče mají standardní délku mezery mezi slovy, ale můžete si nastavit vlastní. Následující příklad ukazuje, jak zvětšit nebo zmenšit mezeru mezi slovy:
<tělo>
<h1>Příklady vlastnosti Word-spacingh1><p>Normální mezery mezi slovy.p>
<ptřída="ex1">Velké mezery mezi slovy.p>
<ptřída="ex2">Malé mezery mezi slovy.p>
tělo>
Pomocí tohoto CSS:
p.ex1 {
mezery mezi slovy: 1rem;
}
p.ex2 {
mezery mezi slovy: -0.3rem;
}
Můžete jasně vidět účinek mezer mezi slovy:
9. Výška řádku
The výška čáry vlastnost určuje mezery mezi řádky v odstavci. Standardní a výchozí výška řádku ve většině prohlížečů je asi 110 % až 120 %. Následující kód ukazuje, jak jej změnit:
<tělo>
<h1>Použití výšky řádkuh1><p>
Standardní výška čáry.Standardní výška čáry.
p>
<ptřída="malý">
Malý malý řádek-výška.Malá výška čáry
p>
<ptřída="velký">
Větší výška řádku.Větší výška řádku.
p>
tělo>
Pomocí následujícího CSS:
p.malý {
výška čáry: 0.7;
}
p.velký {
výška čáry: 1.8;
}
Výsledky můžete vidět mezi jednotlivými řádky v každém odstavci:
10. Textový stín
The stín textu vlastnost aplikuje stíny na text. Musíte určit horizontální stín a vertikální stín. Text-stín může zahrnovat barvu a poloměr rozostření. Pojďme si to ilustrovat pomocí následujícího kódu:
<tělo>
<h1>PříkladyzText-stínúčinek.h1><h1třída="ex1">Text-stínsbarvah1>
<h1třída="ex2">Text-stínsrozmazatúčinek.h1>
tělo>
S tímto CSS:
h1 {
text-shadow: 2px 2px;
}.ex1 {
text-shadow: 2px 2px oranžová;
}
.ex2 {
text-shadow: 2px 2px 10px červená;
}
Vytvoří některé neobvyklé a zajímavé efekty:
Proč se učit vlastnosti stylingu textu CSS?
CSS je páteří moderního webdesignu. Ať už ve své vanilkové podobě nebo ve frameworkech, základní funkce vlastností CSS je stejná. Zvládnutí vlastností formátování textu vám umožní vytvářet atraktivní a čitelná uživatelská rozhraní.
Nejnovější verze CSS, CSS3, zavádí nové koncepty od animací po rozvržení s více sloupci. Tyto koncepty usnadňují vytváření profesionálních aplikací a dokumentů.