De eigenschap CSS Font wordt gebruikt om het uiterlijk van teksten te bepalen. Door het gebruik van de CSS-lettertype-eigenschap kunt u de tekstgrootte, kleur, stijl en meer wijzigen. Je hebt al geleerd hoe je tekst vet of onderstreept kunt maken. Hier leert u ook hoe u de grootte van uw lettertype kunt wijzigen met behulp van een percentage.
Dit zijn enkele belangrijke lettertypekenmerken:
1) CSS-lettertypekleur
CSS-lettertypekleur is een op zichzelf staand attribuut in CSS, hoewel het erop lijkt dat het een onderdeel is van CSS-lettertypen. Het wordt gebruikt om de kleur van de tekst te veranderen.
Er zijn drie verschillende formaten om een kleur te definiëren:
- Door een kleurnaam
- Op hexadecimale waarde
- Door RGB
In het bovenstaande voorbeeld hebben we al deze formaten gedefinieerd.
cijfers voor het alfabet
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> Test het nu Uitgang:
<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-lettergrootte
De eigenschap CSS-lettergrootte wordt gebruikt om de grootte van het lettertype te wijzigen.
Dit zijn de mogelijke waarden die kunnen worden gebruikt om de lettergrootte in te stellen:
| Waarde lettergrootte | Beschrijving |
|---|---|
| xx-klein | gebruikt om de extreem kleine tekstgrootte weer te geven. |
| x-klein | gebruikt om de extra kleine tekstgrootte weer te geven. |
| klein | gebruikt om kleine tekstgrootte weer te geven. |
| medium | gebruikt om middelgrote tekstgrootte weer te geven. |
| groot | gebruikt om grote tekstgrootte weer te geven. |
| x-groot | gebruikt om extra grote tekstgrootte weer te geven. |
| xx-groot | gebruikt om extreem grote tekstgrootte weer te geven. |
| kleiner | gebruikt om relatief kleinere tekstgrootte weer te geven. |
| groter | gebruikt om relatief grotere tekstgrootte weer te geven. |
| grootte in pixels of % | gebruikt om de waarde in percentage of in pixels in te stellen. |
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>Test het nu
Uitgang:
Deze lettergrootte is extreem klein.
Deze lettergrootte is extra klein
Deze lettergrootte is klein
Deze lettergrootte is medium.
Deze lettergrootte is groot.
Deze lettergrootte is extra groot.
Deze lettergrootte is extreem groot.
Deze lettergrootte is kleiner.
Deze lettergrootte is groter.
Deze lettergrootte is ingesteld op 200%.
mylivecricket voor live cricket
Deze lettergrootte is 20 pixels.
4) CSS-lettertypestijl
De eigenschap CSS-lettertypestijl definieert welk type lettertype u wilt weergeven. Het kan cursief, schuin of normaal zijn.
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> Test het nu Uitgang:
<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-lettertypevariant
De eigenschap CSS-lettertypevariant specificeert hoe de lettertypevariant van een element moet worden ingesteld. Het kunnen normale en kleine kapitalisaties zijn.
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> Test het nu Uitgang:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) Gewicht CSS-lettertype
De eigenschap CSS-lettertypegewicht definieert het gewicht van het lettertype en specificeert hoe vet een lettertype is. De mogelijke waarden voor de lettergrootte kunnen normaal, vet, vetter, lichter of getalsmatig zijn (100, 200... tot 900).
Dit lettertype is vetgedrukt.
Dit lettertype is vetter.
Dit lettertype is lichter.
Dit lettertype heeft een gewicht van 100.
Dit lettertype heeft een gewicht van 200.
Dit lettertype heeft een gewicht van 300.
CSS opvullen
Dit lettertype heeft een gewicht van 400.
Dit lettertype heeft een gewicht van 500.
Dit lettertype heeft een gewicht van 600.
Dit lettertype heeft een gewicht van 700.
Dit lettertype heeft een gewicht van 800.
Dit lettertype heeft een gewicht van 900.
Test het nuUitgang:
Dit lettertype is vetgedrukt.
Dit lettertype is vetter.
Dit lettertype is lichter.
vergelijkbare string
Dit lettertype heeft een gewicht van 100.
Dit lettertype heeft een gewicht van 200.
Dit lettertype heeft een gewicht van 300.
Dit lettertype heeft een gewicht van 400.
Dit lettertype heeft een gewicht van 500.
Dit lettertype heeft een gewicht van 600.
Dit lettertype heeft een gewicht van 700.
Dit lettertype heeft een gewicht van 800.
Dit lettertype heeft een gewicht van 900.