Lastnost CSS Font se uporablja za nadzor videza besedil. Z uporabo lastnosti pisave CSS lahko spremenite velikost besedila, barvo, slog in drugo. Naučili ste se že, kako narediti besedilo krepko ali podčrtano. Tukaj boste tudi vedeli, kako spremeniti velikost pisave z uporabo odstotkov.
To je nekaj pomembnih lastnosti pisave:
1) Barva pisave CSS
Barva pisave CSS je samostojen atribut v CSS, čeprav se zdi, da je del pisav CSS. Uporablja se za spreminjanje barve besedila.
Obstajajo trije različni formati za določanje barve:
- Po imenu barve
- Po šestnajstiški vrednosti
- Po RGB
V zgornjem primeru smo definirali vse te formate.
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> Preizkusite zdaj Izhod:
<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 pisave CSS
Lastnost velikosti pisave CSS se uporablja za spreminjanje velikosti pisave.
To so možne vrednosti, ki jih lahko uporabite za nastavitev velikosti pisave:
| Vrednost velikosti pisave | Opis |
|---|---|
| xx-majhen | uporablja se za prikaz izjemno majhne velikosti besedila. |
| x-majhen | uporablja se za prikaz zelo majhne velikosti besedila. |
| majhna | uporablja se za prikaz majhne velikosti besedila. |
| srednje | uporablja se za prikaz srednje velikosti besedila. |
| velik | uporablja se za prikaz velike velikosti besedila. |
| x-velika | uporablja se za prikaz zelo velike velikosti besedila. |
| xx-velik | uporablja se za prikaz izjemno velike velikosti besedila. |
| manjši | uporablja se za prikaz sorazmerno manjše velikosti besedila. |
| večji | uporablja se za prikaz razmeroma večje velikosti besedila. |
| velikost v slikovnih pikah ali % | uporablja se za nastavitev vrednosti v odstotkih ali v slikovnih pikah. |
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>Preizkusite zdaj
Izhod:
Ta velikost pisave je izjemno majhna.
Ta velikost pisave je zelo majhna
Ta velikost pisave je majhna
Ta velikost pisave je srednja.
Ta velikost pisave je velika.
Ta velikost pisave je zelo velika.
Ta velikost pisave je izjemno velika.
Ta velikost pisave je manjša.
Ta velikost pisave je večja.
Ta velikost pisave je nastavljena na 200 %.
Ta velikost pisave je 20 slikovnih pik.
4) Slog pisave CSS
Lastnost sloga pisave CSS določa vrsto pisave, ki jo želite prikazati. Lahko je poševno, poševno ali normalno.
gimp zamenja barvo
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> Preizkusite zdaj Izhod:
<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) Različica pisave CSS
Lastnost različice pisave CSS določa, kako nastaviti različico pisave elementa. Lahko je običajna in z majhnimi črkami.
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> Preizkusite zdaj Izhod:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) Teža pisave CSS
Lastnost teže pisave CSS določa težo pisave in določa, kako krepka je pisava. Možne vrednosti teže pisave so lahko normalna, krepka, krepka, svetlejša ali številka (100, 200..... do 900).
Ta pisava je krepka.
Ta pisava je krepkejša.
Ta pisava je svetlejša.
Ta pisava ima težo 100.
Ta pisava je teža 200.
Ta pisava je teža 300.
Ta pisava ima težo 400.
Ta pisava je teža 500.
Ta pisava je teža 600.
Ta pisava je teža 700.
Ta pisava je teža 800.
Teža pisave je 900.
Preizkusite zdajIzhod:
Ta pisava je krepka.
Ta pisava je krepkejša.
Ta pisava je svetlejša.
Ta pisava ima težo 100.
Ta pisava je teža 200.
Ta pisava je teža 300.
Ta pisava ima težo 400.
Ta pisava je teža 500.
Ta pisava je teža 600.
Ta pisava je teža 700.
Ta pisava je teža 800.
Teža pisave je 900.