Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Jednostki

wtorek,

CSS: Jednostki

W CSS dostępne są różne jednostki, które służą do określania wielkości, odległości, rozmiarów czcionek i innych właściwości elementów. W materiale znajdziesz przegląd głównych typów jednostek stosowanych w kaskadowych arkuszach stylów.

Jednostki absolutne

  • Pixels (px): Najczęściej używana jednostka, 1 px jest zazwyczaj równy jednemu pikselowi na ekranie.
  • Points (pt): Tradycyjnie używane w druku, 1 pt wynosi 1/72 cala.
  • Picas (pc): Również używane w druku, 1 pica to około 1/6 cala.
  • Inches (in): Cal, standardowa jednostka długości.
  • Centimeters (cm): Jednostka metryczna, 1 cm to 1/100 metra.
  • Millimeters (mm): 1 mm to 1/10 cm.

Jednostki relatywne

  • Percentages (%): Wartość procentowa jest relatywna do innej wartości, na przykład szerokości kontenera rodzica.
  • Ems (em): Relatywna do wielkości czcionki elementu nadrzędnego. 1 em to równowartość bieżącej wielkości czcionki.
  • Rems (rem): Podobna do em, ale relatywna do wielkości czcionki elementu głównego (<html>).
  • Viewport Width (vw): 1 vw to 1% szerokości obszaru roboczego przeglądarki.
  • Viewport Height (vh): 1 vh to 1% wysokości obszaru roboczego przeglądarki.
  • Viewport Minimum/Maximum (vmin/vmax): vmin to mniejsza wartość z vw i vh, vmax to większa wartość.

Mniej popularne jednostki

  • Ex: Relatywna do wysokości małej litery 'x' w używanej czcionce.
  • Ch: Relatywna do szerokości znaku '0' (zero) w używanej czcionce.

Podsumowanie

Jednostki relatywne, takie jak em, rem, vw, i vh, są bardzo przydatne w projektowaniu responsywnym, ponieważ pozwalają na lepsze skalowanie elementów w zależności od rozmiaru ekranu lub rodzicielskich elementów. Jednostki absolutne, takie jak px czy cm, są z kolei użyteczne, gdy wymagane są konkretne wymiary, które nie powinny się zmieniać niezależnie od kontekstu. Wybór odpowiedniej jednostki zależy od projektu i wymagań dotyczących układu i designu.

Artykuł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Artykuł: OpenSolaris

OpenSolaris

Artykuł: Bob Frankston

Bob Frankston

Artykuł: Staże w Chorwacji

Staże w Chorwacji

Artykuł: 3Com

3Com

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły