CSS šrifto ypatybė naudojama tekstų išvaizdai valdyti. Naudodami CSS šrifto ypatybę galite pakeisti teksto dydį, spalvą, stilių ir kt. Jau išstudijavote, kaip tekstą paryškinti arba pabraukti. Čia taip pat žinosite, kaip pakeisti šrifto dydį naudojant procentą.
Štai keletas svarbių šrifto atributų:
1) CSS šrifto spalva
CSS šrifto spalva yra atskiras CSS atributas, nors atrodo, kad ji yra CSS šriftų dalis. Jis naudojamas pakeisti teksto spalvą.
Yra trys skirtingi formatai spalvai apibrėžti:
- Pagal spalvos pavadinimą
- Pagal šešioliktainę reikšmę
- Pagal RGB
Aukščiau pateiktame pavyzdyje apibrėžėme visus šiuos formatus.
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> Išbandykite dabar Išvestis:
<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) CSS šrifto dydis
CSS šrifto dydžio ypatybė naudojama šrifto dydžiui pakeisti.
Šios galimos reikšmės gali būti naudojamos šrifto dydžiui nustatyti:
| Šrifto dydžio reikšmė | apibūdinimas |
|---|---|
| xx-mažas | naudojamas itin mažam teksto dydžiui rodyti. |
| x mažas | naudojamas ypač mažam teksto dydžiui rodyti. |
| mažas | naudojamas mažo dydžio tekstui rodyti. |
| vidutinis | naudojamas vidutinio dydžio tekstui rodyti. |
| didelis | naudojamas dideliam tekstui rodyti. |
| x didelis | naudojamas ypač didelio teksto dydžiui rodyti. |
| xx didelis | naudojamas itin didelio teksto dydžiui rodyti. |
| mažesnis | naudojamas palyginti mažesnio dydžio tekstui rodyti. |
| didesnis | naudojamas palyginti didesnio teksto dydžiui rodyti. |
| dydis pikseliais arba % | naudojamas vertei nustatyti procentais arba pikseliais. |
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>Išbandykite dabar
Išvestis:
f filmai
Šis šrifto dydis yra labai mažas.
Šis šrifto dydis yra ypač mažas
Šis šrifto dydis yra mažas
Šis šrifto dydis yra vidutinis.
Šis šrifto dydis yra didelis.
Šis šrifto dydis yra ypač didelis.
Šis šrifto dydis yra labai didelis.
Šis šrifto dydis yra mažesnis.
Šis šrifto dydis yra didesnis.
Šis šrifto dydis nustatytas 200%.
transformuoti eilutę į int
Šis šrifto dydis yra 20 pikselių.
4) CSS šrifto stilius
CSS šrifto stiliaus ypatybė apibrėžia, kokio tipo šriftą norite rodyti. Jis gali būti kursyvas, įstrižas arba įprastas.
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> Išbandykite dabar Išvestis:
<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) CSS šrifto variantas
CSS šrifto varianto ypatybė nurodo, kaip nustatyti elemento šrifto variantą. Tai gali būti normalus ir mažos raidės.
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> Išbandykite dabar Išvestis:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) CSS šrifto svoris
CSS šrifto svorio ypatybė apibrėžia šrifto svorį ir nurodo, kiek paryškintas šriftas. Galimos šrifto svorio reikšmės gali būti normalios, paryškintos, paryškintos, lengvesnės arba skaičius (100, 200... iki 900).
Šis šriftas yra paryškintas.
Šis šriftas yra ryškesnis.
Šis šriftas yra lengvesnis.
Šis šriftas yra 100 svorio.
Šis šriftas yra 200 svorio.
Šis šriftas yra 300 svorio.
java jungiklio pareiškimas
Šis šriftas yra 400 svorio.
Šis šriftas yra 500 svorio.
Šis šriftas yra 600 svorio.
Šis šriftas yra 700 svorio.
Šis šriftas yra 800 svorio.
Šis šriftas yra 900 svorio.
Išbandykite dabarIšvestis:
Šis šriftas yra paryškintas.
Šis šriftas yra ryškesnis.
Šis šriftas yra lengvesnis.
Šis šriftas yra 100 svorio.
Šis šriftas yra 200 svorio.
java oops sąvokos
Šis šriftas yra 300 svorio.
Šis šriftas yra 400 svorio.
Šis šriftas yra 500 svorio.
Šis šriftas yra 600 svorio.
Šis šriftas yra 700 svorio.
Šis šriftas yra 800 svorio.
Šis šriftas yra 900 svorio.