Průvodce formátováním textu v CSS

Při navrhování webových stránek je formátování textu důležitým aspektem vytváření přitažlivého a čitelného rozhraní.

CSS poskytuje několik vlastností, které vám umožňují přizpůsobit různé prvky textu, včetně barvy písma, velikosti, rodiny, zarovnání, mezer a dalších.

Níže je podrobný průvodce každou vlastností formátování textu spolu s příklady každé vlastnosti.

Barva fontu

Parametr: Hodnota barvy, kterou může být název barvy(např. red), hexadecimální kód(např. "#FF0000"), hodnota RGB(např. "rgb(255, 0, 0)") nebo hodnota RGBA(např., "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

Velikost písma

Parametr: Hodnota velikosti, která může být v pixelech(např. „16px“), jednotkách em(např. „1em“), jednotkách rem(např. „1,2rem“), jednotkách šířky zobrazované oblasti(např. „10vw“), jednotky výšky výřezu(např. "5vh") nebo jiné jednotky.

h1 {  
  font-size: 24px;  
}  

Rodina písem

Parametr: Seznam rodiny písem zadaný v preferovaném pořadí. Můžete zadat název písma(např. Arial) nebo názvy písem obsahující speciální znaky uzavřít do uvozovek(např. " Times New Roman).

body {  
  font-family: Arial, sans-serif;  
}  

Tloušťka a styl písma

Parametr font-weight: normal(default), bold, bolder, lighter nebo číselné hodnoty od 100 do 900.

Parametr font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

Textová dekorace

Parametr: "none"(default), "underline", "overline", "line-through"  nebo kombinace hodnot oddělených mezerami.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

Zarovnání textu

Parametr: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

Výška a okraje řádku

Parametr line-height: Číselná hodnota nebo procento aktuální velikosti písma.

Okraj parametru: Hodnota měření, jako jsou pixely(px), jednotky em(em), jednotky rem(rem) atd.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

Vícesloupcové rozložení textu

Parametr: Kladné celé číslo nebo "auto"(default).

.container {  
  column-count: 2;  
}  

Změna barvy textu při najetí myší

Žádný konkrétní parametr, použijte pouze pseudotřídu :hover.

a:hover {  
  color: red;  
}  

Změna barvy textu ve stavu(aktivní, navštíveno)

Žádný konkrétní parametr, použijte pouze pseudotřídy :active  a :visited.

a:visited {  
  color: purple;  
}  

Doufáme, že výše uvedená vysvětlení a příklady vám pomohly pochopit, jak používat a přizpůsobovat vlastnosti formátování textu v CSS, abyste na svém webu vytvořili vizuálně přitažlivé a poutavé textové rozhraní.