CSS Font īpašums tiek izmantots, lai kontrolētu tekstu izskatu. Izmantojot CSS fonta īpašumu, varat mainīt teksta lielumu, krāsu, stilu un daudz ko citu. Jūs jau esat izpētījis, kā tekstu padarīt treknrakstu vai pasvītrotu. Šeit jūs arī zināt, kā mainīt fonta lielumu, izmantojot procentus.
Šie ir daži svarīgi fontu atribūti:
1) CSS fonta krāsa
CSS fonta krāsa ir atsevišķs CSS atribūts, lai gan šķiet, ka tā ir daļa no CSS fontiem. To izmanto, lai mainītu teksta krāsu.
Krāsu noteikšanai ir trīs dažādi formāti:
- Pēc krāsas nosaukuma
- Pēc heksadecimālās vērtības
- Pēc RGB
Iepriekš minētajā piemērā mēs esam definējuši visus šos formātus.
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> Izmēģiniet to tūlīt Izvade:
<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 fonta lielums
CSS fonta lieluma rekvizīts tiek izmantots, lai mainītu fonta lielumu.
Šīs ir iespējamās vērtības, ko var izmantot, lai iestatītu fonta lielumu:
| Fonta lieluma vērtība | Apraksts |
|---|---|
| xx-mazs | izmanto, lai parādītu ārkārtīgi mazu teksta izmēru. |
| x-mazs | izmanto, lai parādītu īpaši mazu teksta izmēru. |
| mazs | izmanto, lai parādītu mazu teksta izmēru. |
| vidējs | izmanto vidēja lieluma teksta attēlošanai. |
| liels | izmanto, lai parādītu liela izmēra tekstu. |
| x-liels | izmanto, lai parādītu īpaši lielu teksta izmēru. |
| xx liels | izmanto, lai parādītu ļoti lielu teksta izmēru. |
| mazāks | izmanto, lai parādītu salīdzinoši mazāku teksta izmēru. |
| lielāks | izmanto, lai parādītu salīdzinoši lielāku teksta izmēru. |
| izmērs pikseļos vai % | izmanto, lai iestatītu vērtību procentos vai pikseļos. |
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>Izmēģiniet to tūlīt
Izvade:
Šis fonta lielums ir ārkārtīgi mazs.
Šis fonta lielums ir īpaši mazs
Šis fonta lielums ir mazs
Šis fonta lielums ir vidējs.
Šis fonta lielums ir liels.
Šis fonta lielums ir īpaši liels.
Šis fonta lielums ir ārkārtīgi liels.
Šis fonta lielums ir mazāks.
Šis fonta lielums ir lielāks.
Šis fonta lielums ir iestatīts uz 200%.
Šis fonta lielums ir 20 pikseļi.
4) CSS fonta stils
CSS fonta stila rekvizīts nosaka, kāda veida fontu vēlaties parādīt. Tas var būt slīpraksts, slīps vai normāls.
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> Izmēģiniet to tūlīt Izvade:
<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 fonta variants
CSS fonta varianta rekvizīts norāda, kā iestatīt elementa fonta variantu. Tas var būt parasts un ar maziem burtiem.
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> Izmēģiniet to tūlīt Izvade:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) CSS fonta svars
CSS fonta svara rekvizīts nosaka fonta svaru un norāda, cik trekns ir fonts. Iespējamās fonta svara vērtības var būt normālas, treknraksta, treknāka, gaišāka vai skaitlis (100, 200... līdz 900).
Šis fonts ir treknrakstā.
Šis fonts ir drosmīgāks.
Šis fonts ir gaišāks.
Šī fonta svars ir 100.
Šī fonta svars ir 200.
Šī fonta svars ir 300.
lejupielādēt youtube video ar vlc
Šī fonta svars ir 400.
Šī fonta svars ir 500.
Šī fonta svars ir 600.
Šī fonta svars ir 700.
Šī fonta svars ir 800.
Šī fonta svars ir 900.
Izmēģiniet to tūlītIzvade:
Šis fonts ir treknrakstā.
Šis fonts ir drosmīgāks.
Šis fonts ir gaišāks.
Šī fonta svars ir 100.
Šī fonta svars ir 200.
Šī fonta svars ir 300.
Šī fonta svars ir 400.
Šī fonta svars ir 500.
Šī fonta svars ir 600.
Šī fonta svars ir 700.
Šī fonta svars ir 800.
Šī fonta svars ir 900.