Autor publikacji
Virtual Patriot - Administrator

Wartości wyrażone w procentach

Data publikacji
Ostatnio edytowano

W poprzedniej części kursu CSS poznaliśmy kilka jednostek relatywnych i dowiedzieliśmy się w jaki sposób przeglądarka internetowa reaguje na tego typu jednostki.

W tej części kursu CSS poznamy kolejną jednostkę relatywną, która pozwala na to, aby wartości niektórych właściwości CSS zmieniały się w nieco bardziej dynamiczny sposób. Poznamy jednostkę %, czyli procenty.

Gdy przeglądarka internetowa "zauważy", że jakaś wartość właściwości CSS elementu HTML ma być wyrażona w procentach, to przeglądarka internetowa będzie starała się obliczyć wartość, danej właściwości CSS, na podstawie wartości tej samej właściwości CSS elementu rodzica (chociaż mogą zdarzyć się wyjątki).

W poprzedniej części kursu CSS został zaprezentowany przykład, w którym do określenia właściwości width została użyta jednostka em, jednak raczej rzadko stosuje się tę jednostkę wraz z właściwością width, ponieważ lepszym rozwiązaniem są jednostki px oraz %.

Przyjrzyjmy się następującemu dokumentowi HTML: 

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

    <style>
      #rodzic {
        width:400px;
        background-color:#000;
      }

      p {
        margin:0;
        padding:5px 0;
      }

      #dziecko1 {
        width:80%;
        background-color:gold;
      }

      #dziecko2 {
        width:60%;
        background-color:lightblue;
      }

      #dziecko3 {
        width:40%;
        background-color:lightgreen;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      <p id="dziecko1">pierwsze dziecko</p>
      <p id="dziecko2">drugie dziecko</p>
      <p id="dziecko3">trzecie dziecko</p>
    </div>

  </body>
</html>

Zwróć uwagę na wartości właściwości width, która odpowiada za szerokość elementu HTML.

Po wyświetleniu danego dokumentu HTML, w oknie przeglądarki internetowej, ujrzymy następujący rezultat:

pierwsze dziecko
drugie dziecko
trzecie dziecko

Jak możemy zauważyć, w kodzie dokumentu HTML, który został zaprezentowany nieco wyżej, wszystkie wartości właściwości width elementów p, które są dziećmi tego samego rodzica, czyli elementu div, zostały zapisane za pomocą wartości wyrażonych w procentach. Natomiast wartość właściwości width, wspomnianego elementu div, została zapisana za pomocą wartości wyrażonej w pikselach i wynosi ona 400px.

Przeglądarka internetowa sama dokona obliczenia poszczególnych wartości właściwości width dla naszych przykładowych dzieci elementu div, czyli elementów p. Wspomniane obliczenie będzie dokonywało się na podstawie wartości właściwości width elementu rodzica (wartość 400px).

  • właściwość width elementu #dziecko1 będzie równa 320px, bo 80% z 400, to 320
  • właściwość width elementu #dziecko2 będzie równa 240px, bo 60% z 400, to 240
  • właściwość width elementu #dziecko3 będzie równa 160px, bo 40% z 400, to 160

Gdy w odpowiedni sposób wykorzystamy wartości procentowe oraz różne inne właściwości CSS, to będziemy mogli uzyskać następujący efekt:

nagłówek strony

lewa kolumna

prawa kolumna

stopka strony

Zaprezentowanym układem elementów zajmiemy się dopiero w dziale czwartym, ponieważ nie znamy jeszcze wszystkich zagadnień języka CSS, które będą nam potrzebne do utworzenia tego układu elementów HTML.

W poprzedniej części kursu CSS określaliśmy wartości właściwości font-size, między innymi za pomocą wartości wyrażonych w jednostce em, jednak równie dobrze moglibyśmy wykorzystać do tego celu wartości wyrażone w procentach. 

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

    <style>
      body {
        font-size:100%;
      }

      h1 {
        font-size:160%;
      }

      p {
        font-size:120%;
      }

      ul {
        font-size:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <h1>To Jest Przykładowy Element H1</h1>

      <p>
        to jest przykładowy tekst umieszczony w elemencie - p
      </p>

      <ul>
        <li>to jest przykładowy element listy HTML</li>
        <li>to jest przykładowy element listy HTML</li>
        <li>to jest przykładowy element listy HTML</li>
      <ul>
    </div>

  </body>
</html>

W efekcie uzyskamy taki sam rezultat, jak podczas gdy nasze reguły CSS były zapisane za pomocą wartości wyrażonych w jednostce em.

To Jest Przykładowy Element H1

to jest przykładowy tekst umieszczony w elemencie - p

  • to jest przykładowy element listy HTML
  • to jest przykładowy element listy HTML
  • to jest przykładowy element listy HTML

Warto pamiętać, że gdy dla elementu body lub html określimy wartość właściwości font-size w jednostce relatywnej (np. 1em, 100%), to będzie ona liczona na podstawie domyślnej wartości wielkości czcionki tekstu, jaka została ustawiona w ustawieniach danej przeglądarki internetowej (użytkownik może zmienić tą wartość).

W następnej części kursu CSS poznamy różnice pomiędzy elementami wyświetlanymi w bloku, a elementami wyświetlanymi w linii.