Jedną z najczęściej spotykanych metod wyróżnienia tekstu na stronie internetowej jest jego pogrubienie. Zdecydowanie rzadziej z kolei spotykane jest by tekst był podkreślony lub ukośny.
Co znajdziesz w tym wpisie
Pogrubienie tekstu w HTML
Do pogrubienia, boldowania tekstu w języku HTML służy znacznik <b> lub zamiennie <strong>. Nie oznacza to jednak, że oba te znaczniki muszą działać identycznie, ich funkcje można zmodyfikować za pomocą CSS. Domyślnie jednak jest to forma pogrubienia stosowana zamiennie. Dlatego w zależności od systemu CMS (i wykorzystywanego edytora) możemy spotkać się z jednym lub drugim.
przykład zastosowania <b>:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
W HTML wygląda ten fragment tekstu tak:
Lorem ipsum <b>dolor sit amet, consectetur</b> adipiscing elit.
przykład <strong>:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Jedyną różnica jest więc rodzaj zastosowanego znacznika.
Lorem ipsum <strong>dolor sit amet, consectetur</strong> adipiscing elit.
Pogrubienie tekstu w CSS
Z pomocą CSS pogrubienie można uzyskać dzięki właściwości font-weight. Właściwość ta odpowiadającej za grubość czcionki co oznacza, że z jej pomocą możemy uzyskać nie tylko pogrubienie, ale także zrobić font cieńszym. Za zwyczaj właściwości tej nie używa się samodzielnie (nadaje się ją na blok lub znacznik np. <b>, <span>).
To właśnie z jej pomocą można manipulować grubością nadawaną z pomocą HTML. Na przykład poprzez dodanie:
font-weight: bold;
font-weight przyjmuje kilka wartości takich jak 100, 200, 300, 400, 500, 600, 700, 800, 900, normal, bold, bolder. Oczywiście w praktyce nie będziemy na stronie wykorzystywać wszystkich tych wartości. Zazwyczaj używa się tylko 400/300 lub 600/700.
Cienki font – im mniejsza wartość tym węższe litery:
- 100,
- 200,
- 300,
Normalny font:
- 400,
- 500,
- normal
Pogrubiony font – im większa wartość liczbowa tym grubsze litery:
- 600,
- 700,
- 800,
- 900,
- bold
Z pomocą tej właściwości bardzo łatwo możemy zmodyfikować działanie dowolnego znacznika HTML. np:
See the Pen font-weight by Aura (@Julka85) on CodePen.dark
UWAGA: nie każdy font posiada takie szerokości jak powyżej. Szerokość należy dobierać indywidualne.
Pochylenie tekstu (kursywa) w HTML
Przeznaczenie tego efektu tekstu jest różnorodne. Począwszy od podkreślenia, że dany fragment np. jest cytatem po chęć wyróżnienia nagłówka bez korzystania ze specjalnych znaczników. Efekt kursywy uzyskujemy dzięki znacznikowi <i> lub <em>.
przykład <i>:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum <i>dolor sit amet, consectetur</i> adipiscing elit.
przykład <em>:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum <em>dolor sit amet, consectetur</em> adipiscing elit.
Pochylony, ukośny tekst w CSS
W CSS pochylony tekst możemy uzyskać dzięki właściwości font-style ustawionej na jedną z dwóch wartości:
- font-style: italic;
- font-style: oblique;
Właściwość ta jest wykorzystywana raczej jako dekoracja niż fragmentu tekstu. Praktycznie nigdy się nie spotkałam by została użyta do pochylenia jednego słowa. Jest to bowiem mało praktyczne. Dlatego w przypadku pochylonego tekstu wykorzystuje się głównie HTML.
Podkreślenie tekstu w HTML
Podkreślony wykorzystuje się głównie do przy pracy z hiperłączami. Bardzo często jest to ich charakterystyczna cecha – co czasem może prowadzić do małego zmieszania. W celu nadania jej innemu tekstowi wystarczy użyć znacznika <u>.
przykład <u>:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum <u>dolor sit amet, consectetur</u> adipiscing elit.
Podkreślenie z pomocą CSS
CSS z kolei oferuje nam szeroki pakiet zróżnicowanych podkreśleń. I nie mam tu na myśli skomplikowanych efektów na linkach (gdyż bardzo często to efekt odpowiednio ustawionego tła). Tylko o bardzo proste rozwiązanie z: text-decoration
Przykłady:
Podkreślony tekst z CSS
<p style="text-decoration: overline;"> Podkreślony tekst z CSS </p>
Tekst z przekreśleniem w CSS
<p style="text-decoration: line-through;"> Tekst z przekreśleniem w CSS </p>
Pojedynczo podkreślony tekst z CSS
<p style="text-decoration: underline;"> Pojedynczo podkreślony tekst z CSS </p>
Falowanie podkreślony tekst z CSS
<p style="text-decoration: red wavy underline;">
Falowanie podkreślony tekst z CSS
</p>Podkreślony tekst z CSS
<p style="text-decoration: underline overline blue;">Podkreślony tekst z CSS</p>
Podkreślony tekst z CSS
<p style="text-decoration: underline dotted blue;"> Podkreślony tekst z CSS </p>
Jak widzicie z pomocą CSS można uzyskać bardzo ciekawe efekty – podkreślenie nie musi być ciągłą linią a np. falowaną.
Możemy również nadawać linii różne kolory. Ja w przykładzie dodałam kolor red (czerwony) i blue (niebieski).
