• Artykuł

          

Encyklopedia: Jak określić wielkość w CSS - Kurs HTML i CSS   Udostępnij na: Facebook

Autor: Jakub Mytko

Opublikowano: 2011-09-14

Kaskadowe Arkusze Stylów pozwalają na określenie wielkości na kilka sposobów. Podstawowymi atrybutami, umożliwiającymi dopasowanie wymiarów są width – określający szerokość, oraz height – określający wysokość. Atrybuty te mogą być zastosowane w takich znacznikach jak img, div, table oraz object. W definicji stylów, po atrybucie należy podać wartość liczbową, a następnie jedną z możliwych jednostek, opisanych poniżej.

Oprócz obrazków, tabel i obiektów najczęściej stosowanymi elementami, w których wielkość ma bardzo duże znaczenie, są marginesy oraz krój pisma. Strona bez poprawnie dobranych jednostek, pomimo, że na jednym ekranie monitora wygląda dobrze, na innym może wyglądać zupełnie niepoprawnie. Właśnie dlatego, jednostki są kluczowym elementem przy określaniu wielkości.

Wyróżniamy jednostki względne i bezwzględne. Względne zależą od innych elementów na stronie, a elementy, których wielkość została ustawiona z ich wykorzystaniem, mogą być łatwiej skalowalne – w przeciwieństwie do elementów określonych za pomocą jednostek bezwzględnych.

Jednostki względne:

  • px – piksel. Jest jednostką zależną od rozdzielczości urządzenia, na którym wyświetlana jest strona. W odróżnieniu od innych jednostek względnych, nie zależy ona jednak od rozmiaru innych elementów na stronie,
  • em – miara proporcjonalna do wielkości kroju pisma ustawionej dla elementu nadrzędnego. Jeżeli byłaby ona ustawiona na 16px, to byłaby to wielkość równa 1em,
  • ex – miara proporcjonalna do wysokości litery x dla aktualnie ustawionego kroju pisma,
  • % – procent. Jest jednostką, służącą do określania wielkości w zależności od domyślnej wielkości danego elementu.

Jednostki bezwzględne:

  • cm – centymetr,
  • mm – milimetr,
  • in – cal. 1 cal jest równy ok. 2,54 cm,
  • pt – punkt. 1pt jest równy 1/72 cala. Punkty najczęściej służą do określania wielkości elementów, przeznaczonych do wydruku,
  • pc – pika. 1pc jest równa 12pt.

W przypadku fontów możliwe jest również określenie wielkości za pomocą jednej z następujących wartości (w kolejności od najmniejszej do największej): xx-small, x-small, small, medium (domyślna), large, x-large, xx-large.

To, która jednostka powinna być używana do określania wielkości kroju pisma, jest kwestią sporów. Argumentem, który przemawiał za em był fakt, że przeglądarki, w tym przypadku zdecydowanie łatwiej radziły sobie ze skalowaniem tekstu, co było przydatne w szczególności dla osób korzystających z takiej opcji. Nowe wersje przeglądarek radzą już sobie z problemem skalowania tekstu, którego wielkość określona jest w pikselach.

Przykład

Przykład ustawiania wielkości tekstu za pomocą różnych jednostek:

<html>
    <head>
    <title>Jak określić wielkość w CSS</title>
    <style type="text/css">
        body { font-size: 16px;}
        #em { font-size: 1.5em;}
        #procent { font-size: 150%;}
        #cm { font-size: 0.6cm;}
        #large { font-size: large;}
    </style>
    </head>
    <body>
        <p>Akapit o domyślnie ustawionej wielkości 16px.</p>
        <p id="em">Akapit o wielkości 1.5em</p>
        <p id="procent">Akapit o wielkości 150%</p>
        <p id="cm">Akapit o wielkości 0.6cm</p>
        <p id="large">Akapit o wielkości large</p>
    </body>
</html>

Efekt działania przykładowego kodu został przedstawiony na Rys. 1.

 

Rys. 1. Wielkość tekstu z użyciem różnych jednostek.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać wielkości oraz fonty w samouczku: