CSS vlastnost Font se používá k ovládání vzhledu textů. Pomocí vlastnosti CSS font můžete změnit velikost textu, barvu, styl a další. Už jste studovali, jak udělat text tučným nebo podtrženým. Zde také budete vědět, jak změnit velikost písma pomocí procent.
Toto jsou některé důležité atributy písma:
1) Barva písma CSS
Barva písma CSS je samostatný atribut v CSS, i když se zdá, že je součástí písem CSS. Slouží ke změně barvy textu.
k-nn algoritmus
Existují tři různé formáty pro definování barvy:
- Podle názvu barvy
- Podle hexadecimální hodnoty
- Podle RGB
Ve výše uvedeném příkladu jsme definovali všechny tyto formáty.
body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> Otestujte to hned Výstup:
<h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p>
3) Velikost písma CSS
CSS vlastnost velikost písma se používá ke změně velikosti písma.
Toto jsou možné hodnoty, které lze použít k nastavení velikosti písma:
| Hodnota velikosti písma | Popis |
|---|---|
| xx-malý | slouží k zobrazení extrémně malé velikosti textu. |
| x-malé | slouží k zobrazení extra malé velikosti textu. |
| malý | slouží k zobrazení malé velikosti textu. |
| střední | slouží k zobrazení střední velikosti textu. |
| velký | slouží k zobrazení velkého textu. |
| x-velký | slouží k zobrazení extra velké velikosti textu. |
| xx-velký | slouží k zobrazení extrémně velké velikosti textu. |
| menší | slouží k zobrazení srovnatelně menší velikosti textu. |
| větší | slouží k zobrazení srovnatelně větší velikosti textu. |
| velikost v pixelech nebo % | slouží k nastavení hodnoty v procentech nebo v pixelech. |
Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p>Otestujte to hned
Výstup:
Tato velikost písma je extrémně malá.
Tato velikost písma je extra malá
Tato velikost písma je malá
Tato velikost písma je střední.
Tato velikost písma je velká.
Tato velikost písma je extra velká.
Tato velikost písma je extrémně velká.
Tato velikost písma je menší.
Tato velikost písma je větší.
Tato velikost písma je nastavena na 200 %.
co je export v linuxu
Velikost tohoto písma je 20 pixelů.
4) Styl písma CSS
CSS Vlastnost Styl písma definuje, jaký typ písma chcete zobrazit. Může být kurzíva, šikmá nebo normální.
body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> Otestujte to hned Výstup:
<h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4>
5) Varianta písma CSS
Vlastnost varianty písma CSS určuje, jak nastavit variantu písma prvku. Může to být normální a s malými písmeny.
p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> Otestujte to hned Výstup:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) Tloušťka písma CSS
Vlastnost CSS font weight definuje váhu písma a určuje, jak moc je písmo tučné. Možné hodnoty tloušťky písma mohou být normální, tučné, tučné, světlejší nebo číselné (100, 200..... až 900).
Toto písmo je tučné.
Toto písmo je tučnější.
Toto písmo je světlejší.
Toto písmo má váhu 100.
Toto písmo má váhu 200.
Toto písmo má váhu 300.
java porovnat řetězce
Toto písmo má váhu 400.
Toto písmo má váhu 500.
Toto písmo má váhu 600.
Toto písmo má váhu 700.
Toto písmo má váhu 800.
Toto písmo má váhu 900.
Otestujte to hnedVýstup:
Toto písmo je tučné.
Toto písmo je tučnější.
Toto písmo je světlejší.
Toto písmo má váhu 100.
Toto písmo má váhu 200.
Toto písmo má váhu 300.
Toto písmo má váhu 400.
Toto písmo má váhu 500.
rozdíl mezi polem a seznamem polí
Toto písmo má váhu 600.
Toto písmo má váhu 700.
Toto písmo má váhu 800.
Toto písmo má váhu 900.