Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Jednostki miary

Email Drukuj PDF

Do dyspozycji mamy dwa rodzaje jednostek miary - absolutne i relatywne. Przykładem miary absolutnej jest centymetr, relatywnej - piksel. Jednostkę miary podajemy zawsze bezpośrednio po liczbie, np. 1cm, 0.1in itd.

Miary absolutne

  • in - cale, 1in = 2.54cm
  • cm - centymetry, 1cm
  • mm - milimetry, 1mm
  • pt - punkty, 1pt = 1/72in
  • pc - pika, 1pc = 12pt

Miary relatywne

  • em - wysokość czcionki elementu
  • ex - x-height - wysokość litery x
  • px - piksele, w odniesieniu do rozdzielczości tła

Oddzielnie wyróżnia się wielkości procentowe oraz absolutne (np. x-large) i relatywne (np. smaller) miary czcionek.

Przykłady wielkości absolutnych

<h1 style="font-size: 1.5cm">Tytuł stopnia 1</h1>

Tytuł stopnia 1

<p style="font-size: 2pc">Akapit 2 pika</p>

Akapit 2 pika

<ul style="margin-left: 30mm">
<li>punkt 1</li>
<li>punkt 2</li>
<li>punkt 3</li>
</ul>

  • punkt 1
  • punkt 2
  • punkt 3

Przykłady wielkości relatywnych

<p style="text-indent: 3em; font-size: 12pt">Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości czcionki.</p>

Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości czcionki.

<p style="text-indent: 3em; font-size: 15pt">Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości czcionki.</p>

Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości czcionki.

<p style="text-indent: 3ex; font-size: 12pt">Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości litery.</p>

Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości litery.

<p style="text-indent: 3ex; font-size: 15pt">Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości litery.</p>

Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości litery.

<p style="text-indent: 100px; font-size: 12pt">Akapit z czcionką 12-punktową, o wcięciu 100 pikseli.</p>

Akapit z czcionką 12-punktową, o wcięciu 100 pikseli.

Stosowanie miar relatywnych ma sens przede wszystkim w sytuacjach, w których chcemy zachować proporcje wyświetlania różnych elementów. Na przykład na monitorze piksel ma inną wartość w centymetrach w rozdzielczości 1024x768 niż 1600x1200.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V