Félkövér szövegformázás HTML-ben és CSS-ben

Ebben a leckében bemutatjuk, hogy milyen lehetőségek vannak egy szöveg félkövérré tételére HTML-ben és CSS-ben.

Félkövér szöveg HTML-ben

Először kezdjük a HTML nyelvvel, nézzük meg, hogy milyen HTML-elemek vannak, amelyek félkövér szöveget eredményeznek.

Az angolban a félkövér kiemelést „bold”-nak hívjuk, ebből kifolyólag a HTML-ben a félkövérré formázó elemet <b>-vel jelöljük. Ez egy olyan elem, amelynek kötelező megadni a kezdő és a záróelemét is. A kezdő és a záróelem között elhelyezkedő szöveg lesz félkövér.

Ha szeretnénk a szerkesztőben beírt plusz szóközöket megtartani, akkor használjuk a <pre> elemet.

Példa

<b>Félkövér szöveg</b>
Code language: HTML, XML (xml)

>> Ide kattintva magad is kipróbálhatod ezt a HTML kódot <<

Erős kiemelés HTML-ben

Ezentúl a HTML-ben van még egy megoldás, amely nem konkrétan félkövér eredményt ad, de ahhoz nagyon hasonlót, ez egy erős kiemelést végez a közbefogott szöveggel.

Csakúgy, mint a félkövérnek, ennek is van nyitó- és zárótagje.

Példa

<strong>Erős kiemelés</strong>
Code language: HTML, XML (xml)

>> Ide kattintva magad is kipróbálhatod ezt a HTML kódot <<

Félkövér szöveg CSS-ben

CSS-ben már egy kicsit több lehetőségünk van, így sokkal jobban személyre tudjuk szabni, hogy mennyire legyen vastag a formázandó szöveg.

CSS-ben a „font-weight” tulajdonságot kell használnunk, amely felvehet „bold” értéket, ez a szabványos félkövérnek felel meg.

Példa #1

Az alábbi példában inline CSS értékekkel dolgozunk, hogy könnyebben átlátható maradjon a kód.

<p style="font-weight:normal;">Normál</p>
<p style="font-weight:bold;">Félkövér</p>
Code language: HTML, XML (xml)

>> Ide kattintva magad is kipróbálhatod ezt a HTML kódot <<

Ha a „font-weight” attribútum nem csak „bold” értéket, hanem „normal„-t is felvehet.

A „font-weight” értékeit nem csak angol szavakkal adhatjuk meg, hanem számokkal is. 100-tól 900-ig adhatunk meg értéket, 100-as lépcsőfokokkal.

Az alábbi példában inline CSS értékekkel dolgozunk, hogy könnyebben átlátható maradjon a kód.

Példa #2

<p style="font-weight:100;">100</p>
<p style="font-weight:200;">200</p>
<p style="font-weight:300;">300</p>
<p style="font-weight:400;">400</p>
<p style="font-weight:500;">500</p>
<p style="font-weight:600;">600</p>
<p style="font-weight:700;">700</p>
<p style="font-weight:800;">800</p>
<p style="font-weight:900;">900</p>
Code language: HTML, XML (xml)

>> Ide kattintva magad is kipróbálhatod ezt a HTML kódot <<

Ebben a példában tökéletesen látszik, hogy hogyan változik a szöveg vastagsága a felvett érték függvényében.

Számozott formában a 400-as érték felel meg a „normal” szövegértéknek, míg a 700 a „bold” szöveges értéknek.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!