Autor publikacji: Virtual Patriot - Administrator

Przeznaczenie jednostki "em"

Data publikacji: Wrzesień 01 2013
Ostatnio edytowano: Wrzesień 07 2020

W poprzedniej części kursu CSS utworzyliśmy układ elementów HTML składający się z nagłówka, trzech kolumn oraz stopki.

Wspomniany układ elementów HTML został zaprezentowany poniżej.

nagłówek strony

to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn

to jest środkowa kolumna układu elementów HTML

prawa kolumna układu elementów HTML

stopka strony

Układ elementów HTML, który został umieszczony powyżej, różni się w minimalnym stopniu wyglądem, od jednego z układów elementów HTML, który został zaprezentowany w poprzedniej części kursu CSS. Wspomniane różnice, to głównie dodane obramowanie (border), dodane marginesy zewnętrzne (margin), zmienione wartości właściwości min-width oraz max-width, usunięta minimalne wartości wysokości (min-height).

Wspomniane różnice zostały uwzględnione w kodzie HTML, który znajduje się pod spodem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      #caly_blok {
        font-size:24px;
        min-width:480px;
        max-width:1600px;
        border-left:1px solid gold;
        border-right:1px solid gold;
      }

      #naglowek {
        background-color:gold;
        text-align:center;
      }

      #lewy {
        float:left;
        width:25%;
      }

      #lewy p {
        border:1px solid gold;
        border-left:none;
        margin:15px 0;
        padding:15px;
      }

      #srodek {
        float:left;
        width:50%;
      }

      #srodek p {
        margin:15px 0;
        padding:15px;
      }

      #prawy {
        float:left;
        width:25%;
      }

      #prawy p {
        border:1px solid gold;
        border-right:none;
        margin:15px 0;
        padding:15px;
      }

      #stopka {
        clear:both;
        background-color:gold;
        text-align:center;
      }
    </style>

  </head>

  <body>

    <div id="caly_blok">
      <div id="naglowek">nagłówek strony</div>

      <div id="lewy">
        <p>to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn</p>
      </div>

      <div id="srodek">
        <p>to jest środkowa kolumna układu elementów HTML</p>
      </div>

      <div id="prawy">
        <p>prawa kolumna układu elementów HTML</p>
      </div>

      <div id="stopka">stopka strony</div>
    </div>

  </body>
</html>

Jak dotąd nasz układ elementów HTML dopasowuje się automatycznie do szerokości okna naszej przeglądarki internetowej, bez względu na szerokość wspomnianego okna. Inaczej mówiąc, nasz układ elementów HTML dopasowuje się do każdej rozdzielczości. Lewa i prawa kolumna zawsze wynosi 25% wartości szerokości swojego elementu rodzica. Natomiast środkowa kolumna wynosi 50% wspomnianej wartości.

W tej części kursu CSS dowiemy się w jaki sposób jeszcze bardziej zautomatyzować nasz układ elementów HTML. Pomoże nam w tym jednostka wartości em.

Wyobraźmy sobie, że chcemy określić różną wartość wielkości czcionki tekstu dla poszczególnych części naszego układu kolumnowego. Wspomnianą czynność moglibyśmy wykonać w następujący sposób:

#naglowek {
  background-color:gold;
  text-align:center;
  font-size:24px;
}

#lewy {
  float:left;
  width:25%;
  font-size:15px;
}

#srodek {
  float:left;
  width:50%;
  font-size:18px;
}

#prawy {
  float:left;
  width:25%;
  font-size:15px;
}

#stopka {
  clear:both;
  background-color:gold;
  text-align:center;
  font-size:21px;
}

Rezultat:

nagłówek strony

to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn

to jest środkowa kolumna układu elementów HTML

prawa kolumna układu elementów HTML

stopka strony

Nasz cel został osiągnięty. Każda część naszego układu elementów HTML ma swój własny rozmiar czcionki tekstu, ponieważ do reguł CSS, które określają wygląd różnych części naszego układu kolumnowego, została dodana właściwość font-size wraz z wartością wyrażoną w pikselach (font-size:24px; font-size:15px; itd.).

Wszystko niby jest w porządku, lecz co w wypadku, gdy będziemy chcieli ponownie zmienić rozmiar czcionki tekstu dla wszystkich części naszego układu elementów HTML?

Gdy jest to tylko pięć reguł CSS, w których trzeba zmienić wartość właściwości font-size, to nie ma z tym większego problem, lecz co w wypadku, gdy takich reguł będziemy mieć tysiąc?

W tym momencie zaczęłyby się dla nas schody... Jednak istnieje łatwy sposób na rozwiązanie omawianego problemu. Tym sposobem jest wykorzystanie w odpowiedni sposób jednostki em.

Pierwszym naszym krokiem będzie ustalenie jednakowej wielkości czcionki tekstu dla wszystkich elementów HTML, które znajda się w naszym układzie. Osiągniemy to w dość prostu sposób. Wystarczy dodać właściwość font-size do elementu #caly_blok, dzięki czemu wszystkie elementy HTML, kolejno w nim umieszczone, odziedziczą wartość właściwości font-size, od wspomnianego elementu #caly_blok.

#caly_blok {
  font-size:15px;
  min-width:480px;
  max-width:1600px;
  border-left:1px solid gold;
  border-right:1px solid gold;
}

Rezultat:

nagłówek strony

to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn

to jest środkowa kolumna układu elementów HTML

prawa kolumna układu elementów HTML

stopka strony

Od tej pory wszystkie elementy HTML, które tworzą nasz układ kolumnowy, posiadają w sobie wartość właściwość font-size, która jest równa 15px, ponieważ wspomniane elementy HTML odziedziczyły właściwość font-size od elementu #caly_blok.

Czas wykorzystać "niepozorną" jednostkę wartości em. Wartość 1em jest równa wartości czcionki tekstu jaką posiada rodzic danego elementu HTML. Jeżeli rodzic elementu HTML posiada wartość właściwości font-size równą 15px, to wartość 1em, użyta w jakichkolwiek właściwościach CSS dzieci wspomnianego elementu rodzica, będzie wynosić również 15px. Wartość 1.2em będzie wynosić 18px, bo 15 × 1.2 = 18. Wartość 1.3em będzie wynosić 19.5px, bo 15 × 1.3 = 19.5 itd.

Określamy wartości właściwości font-size w jednostce em, dla poszczególnych części naszego kolumnowego układu elementów HTML:

#caly_blok {
  font-size:15px;
  min-width:480px;
  max-width:1600px;
  border-left:1px solid gold;
  border-right:1px solid gold;
}

#naglowek {
  background-color:gold;
  text-align:center;
  font-size:1.6em;
  /* 1.6em = 24px, bo 15px × 1.6 = 24px */
}

#lewy {
  float:left;
  width:25%;
  font-size:1em;
  /* 1em = 15px, bo 15px × 1 = 15px */
}

#srodek {
  float:left;
  width:50%;
  font-size:1.2em;
  /* 1.2em = 18px, bo 15px × 1.2 = 18px */
}

#prawy {
  float:left;
  width:25%;
  font-size:1em;
  /* 1em = 15px, bo 15px × 1 = 15px */
}

#stopka {
  clear:both;
  background-color:gold;
  text-align:center;
  font-size:1.4em;
  /* 1.4em = 21px, bo 15px × 1.4 = 21px */
}

Rezultat:

nagłówek strony

to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn

to jest środkowa kolumna układu elementów HTML

prawa kolumna układu elementów HTML

stopka strony

Od tej pory wartość właściwości font-size dla poszczególnych części naszego układu elementów HTML jest uzależniona od wartości właściwości font-size, która została określona dla elementu #caly_blok, który jest przodkiem wszystkich elementów HTML, które tworzą nasz układ kolumnowy.

Od teraz, wystarczy że zmienimy wartość właściwości font-size w regule CSS, która odnosi się do elementu #caly_blok, a przeglądarka internetowa sama obliczy wartości pozostałych właściwości CSS, w których została wykorzystana jednostka wartości em.

Zmieńmy wspomnianą wartość właściwości font-size na nieco większą:

#caly_blok {
  font-size:20px;
  min-width:480px;
  max-width:1600px;
  border-left:1px solid gold;
  border-right:1px solid gold;
}

Rezultat:

nagłówek strony

to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn

to jest środkowa kolumna układu elementów HTML

prawa kolumna układu elementów HTML

stopka strony

Każdy element naszego układu kolumnowego posiada swój własny rozmiar czcionki tekstu, którym możemy do woli manipulować, bez konieczności modyfikacji wielu miejsc w naszym kodzie.

Oczywiście pozostałe właściwości CSS również możemy określać za pomocą wartości wyrażonych w jednostce em, dzięki czemu zwiększymy "inteligencję" dla naszego układu elementów HTML. Możemy określić, na przykład wartość właściwości line-height, która odpowiada za wysokość wierszy tekstu, czyli odległości pomiędzy poszczególnymi wierszami tekstu danego elementu HTML.

#caly_blok {
  font-size:20px;
  min-width:480px;
  max-width:1600px;
  border-left:1px solid gold;
  border-right:1px solid gold;
}

#naglowek {
  background-color:gold;
  text-align:center;
  font-size:1.6em;
  line-height:1.5em;
}

#lewy {
  float:left;
  width:25%;
  font-size:1em;
  line-height:1.5em;
}

#srodek {
  float:left;
  width:50%;
  font-size:1.2em;
  line-height:1.5em;
}

#prawy {
  float:left;
  width:25%;
  font-size:1em;
  line-height:1.5em;
}

#stopka {
  clear:both;
  background-color:gold;
  text-align:center;
  font-size:1.4em;
  line-height:1.5em;
}

Rezultat:

nagłówek strony

to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn

to jest środkowa kolumna układu elementów HTML

prawa kolumna układu elementów HTML

stopka strony

Od tej pory wartość wysokości wierszy, w poszczególnych częściach naszego układu elementów HTML, zmieniła się. We wszystkich regułach CSS użyliśmy właściwość line-height wraz z wartością 1.5em, jednak nie oznacza to, w tym wypadku, że ostateczna wartość właściwości line-height jest równa 15 × 1.5 = 22.5, ponieważ przeglądarka internetowa określa wartość jednostki em w dwojaki sposób.

Przykładowo, gdy określimy właściwość line-height:1.5em;, to przeglądarka internetowa widząc, że jakaś właściwość CSS danego elementu HTML ma być wyrażona w jednostce em, pierw sprawdzi czy została ustawiona jakaś wartość właściwości font-size dla danego elementu HTML i to na podstawie tej wartości zostanie ustalona ostateczna wartość właściwości line-height. Gdy wartość właściwości font-size nie zostałaby ustawiona dla danego elementu HTML, to przeglądarka internetowa w drugiej kolejności sprawdzi wartość właściwości font-size rodzica danego elementu HTML i to na podstawie tej wartości zostanie obliczona ostateczna wartość właściwości CSS (w naszym przykładzie tą właściwością jest właściwość line-height), która została wyrażona w jednostce em.

Tak więc wartość właściwości line-height, dla elementów umieszczonych w elemencie #srodek, będzie wynosiła 27px, ponieważ wartość właściwości font-size, dla tego elementu HTML, wynosi 1.2em, a więc 15px × 1.2em = 18px, natomiast 18px × 1.5em = 27px. Resztę obliczeń zostanie przedstawione w ostatecznym kodzie HTML, tej części kursu CSS.

Od tej pory możemy manipulować rozmiarem czcionki tekstu oraz rozmiarem wysokości wierszy, w naszym układzie kolumnowym, zmieniając tylko jedną wartość właściwości font-size, w naszym kodzie HTML.

#caly_blok {
  font-size:16px;
  min-width:480px;
  max-width:1600px;
  border-left:1px solid gold;
  border-right:1px solid gold;
}

Rezultat:

nagłówek strony

to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn

to jest środkowa kolumna układu elementów HTML

prawa kolumna układu elementów HTML

stopka strony

Kod HTML ostatniego przykładu, został umieszczony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      #caly_blok {
        font-size:16px; /* 16px - wartość, na podstawie której będzie obliczana wartość jednostki "em" dla właściwości CSS potomków tego elementu #caly_blok */
        min-width:480px;
        max-width:1600px;
        border-left:1px solid gold;
        border-right:1px solid gold;
      }

      #naglowek {
        background-color:gold;
        text-align:center;
        font-size:1.6em; /* 25.6px, ponieważ 16px × 1.6em = 25.6px */
        line-height:1.5em; /* 38.4px, ponieważ 25.6px × 1.5em = 38.4px */
      }

      #lewy {
        float:left;
        width:25%;
        font-size:1em; /* 16px, ponieważ 16px × 1em = 16px */
        line-height:1.5em; /* 24px, ponieważ 16px × 1.5em = 24px */
      }

      #lewy p {
        border:1px solid gold;
        border-left:none;
        margin:15px 0;
        padding:15px;
      }

      #srodek {
        float:left;
        width:50%;
        font-size:1.2em; /* 19.2px, ponieważ 16px × 1.2em = 19.2px */
        line-height:1.5em; /* 28.8px, ponieważ 19.2px × 1.5em = 28.8px */
      }

      #srodek p {
        margin:15px 0;
        padding:15px;
      }

      #prawy {
        float:left;
        width:25%;
        font-size:1em; /* 16px, ponieważ 16px × 1em = 16px */
        line-height:1.5em; /* 24px, ponieważ 16px × 1.5em = 24px */
      }

      #prawy p {
        border:1px solid gold;
        border-right:none;
        margin:15px 0;
        padding:15px;
      }

      #stopka {
        clear:both;
        background-color:gold;
        text-align:center;
        font-size:1.4em; /* 22.4px, ponieważ 16px × 1.4em = 22.4px */
        line-height:1.5em; /* 33.6px, ponieważ 22.4px × 1.5em = 33.6px */
      }
    </style>
  </head>

  <body>

    <div id="caly_blok">
      <div id="naglowek">nagłówek strony</div>

      <div id="lewy">
        <p>to jest lewa kolumna układu elementów HTML, który składa się z trzech kolumn</p>
      </div>

      <div id="srodek">
        <p>to jest środkowa kolumna układu elementów HTML</p>
      </div>

      <div id="prawy">
        <p>prawa kolumna układu elementów HTML</p>
      </div>

      <div id="stopka">stopka strony</div>
    </div>

  </body>
</html>

Uzupełnienie informacji o jednostkach relatywnych, do których między innymi należy jednostka wartości em, znajdziesz w dziale pierwszym - Jednostki relatywne.

To nie koniec możliwości ulepszania naszego układu kolumnowego. Prawdziwa zabawa zaczyna się w momencie dodania reguł @media, do naszego kodu CSS, ale o tym zagadnieniu powiemy sobie w następnej części tego kursu CSS.