kursy, tutoriale

Pogrubiony, pochylony lub podkreślony tekst na stronie internetowej

Czas czytania: 3 minut

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.

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).