CSS BETŰTÍPUS

A CSS Font tulajdonság a szövegek megjelenésének szabályozására szolgál. A CSS font tulajdonság használatával módosíthatja a szöveg méretét, színét, stílusát és még sok mást. Már tanulmányozta, hogyan lehet a szöveget félkövérre vagy aláhúzni. Itt azt is tudni fogja, hogyan kell átméretezni a betűtípust százalékos értékkel.

Íme néhány fontos font attribútum:

CSS betűtípus színe : Ez a tulajdonság a szöveg színének megváltoztatására szolgál. (önálló attribútum) CSS betűtípus család : Ez a tulajdonság a betűtípus arculatának megváltoztatására szolgál. CSS betűméret : Ez a tulajdonság a betűtípus méretének növelésére vagy csökkentésére szolgál. CSS betűtípus : Ezzel a tulajdonsággal a betűtípust félkövérre, dőltre vagy ferdére lehet szedni. CSS betűtípus változat : Ez a tulajdonság kisbetűs hatást hoz létre. CSS betűtípus súlya : Ez a tulajdonság a betűtípus vastagságának és világosságának növelésére vagy csökkentésére szolgál.

1) CSS betűtípus színe

A CSS betűtípus színe egy önálló attribútum a CSS-ben, bár úgy tűnik, hogy a CSS betűtípusok része. A szöveg színének megváltoztatására szolgál.

Három különböző formátum létezik a szín meghatározására:

Színnév szerint
Hexadecimális érték szerint
RGB által

A fenti példában ezeket a formátumokat definiáltuk.

 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>

Tesztelje most

Kimenet:

 <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 betűméret

A CSS betűméret tulajdonsága a betűméret módosítására szolgál.

Ezek a lehetséges értékek, amelyek segítségével beállítható a betűméret:

Betűméret érték	Leírás
xx-kicsi	a rendkívül kis szövegméret megjelenítésére szolgál.
x-kicsi	az extra kis szövegméret megjelenítésére szolgál.
kicsi	kis méretű szöveg megjelenítésére szolgál.
közepes	közepes méretű szöveg megjelenítésére szolgál.
nagy	nagyméretű szöveg megjelenítésére szolgál.
x nagy	extra nagy szövegméret megjelenítésére szolgál.
xx-nagy	rendkívül nagy szövegméret megjelenítésére szolgál.
kisebb	viszonylag kisebb méretű szöveg megjelenítésére szolgál.
nagyobb	viszonylag nagyobb szövegméret megjelenítésére szolgál.
méret pixelben vagy %-ban	százalékban vagy pixelben kifejezett érték beállítására szolgál.

 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>

Tesztelje most

Kimenet:

Ez a betűméret rendkívül kicsi.

Ez a betűméret rendkívül kicsi

Ez a betűméret kicsi

Ez a betűméret közepes.

Ez a betűméret nagy.

Ez a betűméret rendkívül nagy.

Ez a betűméret kisebb.

Ez a betűméret nagyobb.

Ez a betűméret 200%-ra van állítva.

Ez a betűméret 20 pixel.

4) CSS betűstílus

A CSS Font style tulajdonság határozza meg, hogy milyen típusú betűtípust kíván megjeleníteni. Lehet dőlt, ferde vagy normál.

 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>

Tesztelje most

Kimenet:

 <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 Font Variant

A CSS-betűtípus-változat tulajdonság megadja, hogyan kell beállítani egy elem betűtípus-változatát. Lehet normál és kisbetű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>

Tesztelje most

Kimenet:

 <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>

6) CSS betűtípus súlya

A CSS font súlya tulajdonság határozza meg a betűtípus súlyát, és adja meg, hogy milyen vastag legyen a betűtípus. A betűsúly lehetséges értékei lehetnek normál, félkövér, félkövérebb, világosabbak vagy számok (100, 200..... 900-ig).

Ez a betűtípus félkövér.

Ez a betűtípus merészebb.

Ez a betűtípus világosabb.

Ez a betűtípus 100 súlyú.

Ez a betűtípus 200 súlyú.

Ez a betűtípus 300 súlyú.

Ez a betűtípus 400 súlyú.

Ez a betűtípus 500 súlyú.

Ez a betűtípus 600 súlyú.

Ez a betűtípus 700 súlyú.

Ez a betűtípus 800 súlyú.

Ez a betűtípus 900 súlyú.