Vlastnosť písma CSS sa používa na ovládanie vzhľadu textov. Pomocou vlastnosti písma CSS môžete zmeniť veľkosť textu, farbu, štýl a ďalšie. Už ste študovali, ako urobiť text tučným alebo podčiarknutým. Tu tiež budete vedieť, ako zmeniť veľkosť písma pomocou percent.
Toto sú niektoré dôležité atribúty písma:
1) Farba písma CSS
Farba písma CSS je samostatný atribút v CSS, aj keď sa zdá, že je súčasťou písma CSS. Používa sa na zmenu farby textu.
Existujú tri rôzne formáty na definovanie farby:
- Podľa názvu farby
- Podľa hexadecimálnej hodnoty
- Podľa RGB
Vo vyššie uvedenom príklade sme definovali všetky tieto 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> Vyskúšajte to Výkon:
<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) Veľkosť písma CSS
Vlastnosť veľkosti písma CSS sa používa na zmenu veľkosti písma.
Toto sú možné hodnoty, ktoré možno použiť na nastavenie veľkosti písma:
| Hodnota veľkosti písma | Popis |
|---|---|
| xx-malý | používa sa na zobrazenie extrémne malej veľkosti textu. |
| x-malé | používa sa na zobrazenie mimoriadne malej veľkosti textu. |
| malý | slúži na zobrazenie malej veľkosti textu. |
| stredná | používa sa na zobrazenie strednej veľkosti textu. |
| veľký | slúži na zobrazenie veľkého textu. |
| x-veľký | používa sa na zobrazenie mimoriadne veľkej veľkosti textu. |
| xx-veľký | používa sa na zobrazenie extrémne veľkého textu. |
| menšie | používa sa na zobrazenie porovnateľne menšej veľkosti textu. |
| väčší | používa sa na zobrazenie porovnateľne väčšej veľkosti textu. |
| veľkosť v pixeloch alebo % | používa sa na nastavenie hodnoty v percentách alebo v pixeloch. |
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>Vyskúšajte to
Výkon:
Táto veľkosť písma je extrémne malá.
Táto veľkosť písma je extra malá
Táto veľkosť písma je malá
Táto veľkosť písma je stredná.
skener java
Táto veľkosť písma je veľká.
Táto veľkosť písma je extra veľká.
Táto veľkosť písma je extrémne veľká.
Táto veľkosť písma je menšia.
Táto veľkosť písma je väčšia.
Táto veľkosť písma je nastavená na 200 %.
inštancia v jazyku Java
Veľkosť tohto písma je 20 pixelov.
4) CSS štýl písma
Vlastnosť štýlu písma CSS definuje, aký typ písma chcete zobraziť. Môže byť kurzíva, šikmá alebo normálna.
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> Vyskúšajte to Výkon:
<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) Variant písma CSS
Vlastnosť variantu písma CSS určuje, ako nastaviť variant písma prvku. Môže to byť normálne a s malými písmenami.
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> Vyskúšajte to Výkon:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) Hmotnosť písma CSS
Vlastnosť hrúbky písma CSS definuje váhu písma a určuje, aké tučné je písmo. Možné hodnoty hmotnosti písma môžu byť normálne, tučné, tučnejšie, svetlejšie alebo číselné (100, 200..... až 900).
Toto písmo je tučné.
Toto písmo je tučnejšie.
Toto písmo je svetlejšie.
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.
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.
Vyskúšajte toVýkon:
Toto písmo je tučné.
java porovnávať reťazce
Toto písmo je tučnejšie.
Toto písmo je svetlejšie.
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.
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.