3

kurs

css

Lekcja 4: Czcionki

css

W tej lekcji na warsztat weźmiemy czcionki. Poznasz takie właściwości jak:

Wielkość

Wielkość czcionki ustalamy za pomocą font-size.

selektor { font-size: wartość; }

Wielkość czcionki możemy definiować w jednostkach względnych - em lub bezwzględnych - px. Wyższość czcionek w jednostkach względnych polega na tym, że są one skalowalne natomiast bezwzględne mają stałą wielkość.

Jednostki względne są obliczane na podstawie wielkości czcionki rodzica.

p { font-size: 1.4em; }

Wielkość bezwzględną czcionki możemy określić także za pomocą:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

Z kolei do określenia wielkości względnej czcionki możemy posłużyć się poleceniami:

  • smaller
  • larger

Rodzaj

Rodzaj czcionki ustalamy za pomocą font-family.

selektor { font-family: wartość; }

Możemy zastosować czcionki:

  • szeryfowe (serif) - posiadają ozdobniki np. 'Times New Roman', Georgia
  • bezszeryfowe (sans-serif) - bez ozdobników np. Arial, Tahoma, Verdana

Deklarując styl fontu dobrze jest podać rodzinę czcionek na wypadek, jeśli użytkownik nie będzie dysponował którąś z wymienionych.

p { font-family: Arial, Tahoma, Verdana, sans-serif; }
Przykład

To jest tekst pisany czcionką szeryfową.

Kolor czcionki

Kolor czcionki uzyskamy poprzez nadanie akapitowi stylu color:

<p style="color: green;">Tekst czcionką koloru zielonego</p>
Przykład

Tekst czcionką koloru zielonego

Wykaz podstawowych kolorów.

  • black (czarny)
  • white (biały)
  • red (czerwony)
  • blue (niebieski)
  • green (zielony)
  • silver (srebrny)
  • gray (szary)
  • yellow (żółty)
  • purple (purpurowy)
  • maroon (kasztanowy)
  • olive (oliwkowy)
  • lime (limonkowy)
  • aqua (morski)
  • teal (teal)
  • navy (granatowy)

Waga

Grubość czcionki ustalamy za pomocą font-weight.

selektor { font-weight: wartość; }

Podstawowe wagi czcionki:

  • normal - standardowa (domyślna)
  • bold - pogrubiona
p { font-weight: bold; }
Przykład

Tekst pogrubiony.

Styl

Styl czcionki ustalamy za pomocą font-style.

selektor { font-style: wartość; }

Dostępne wartości stylu czcionki:

  • normal - standardowa (domyślna)
  • italic - pochylona (kursywa) - odrębna wersja czcionki
  • oblique - pochylona (kursywa) - pochylenie czcionki bez względu czy faktycznie taki krój istnieje
p { font-style: italic; }
Przykład

Tekst pisany kursywą.

Wariant

Wariant czcionki ustalamy za pomocą font-variant.

selektor { font-variant: wartość; }

Dostępne wartości wariantu czcionki

  • normal - standardowa (domyślna)
  • small-caps - kapitaliki
p { font-variant: small-caps; }
Przykład

Tekst pisany kapitalikami.

Połączenie właściwości

Kilka właściwości w jednej deklaracji.

p { font: italic bold 1.8em serif; }
Przykład

Teks z połączonymi właściowaściami.

comments powered by Disqus

Do góry