Jednostki CSS - CSS
Liczby
Niektóre polecenia stylów wykorzystują jako wartości liczby całkowite lub rzeczywiste. Są one precyzowane tylko w notacji dziesiętnej. Liczba całkowita składa się z jednej lub więcej cyfr z zakresu od 0 do 9. Liczba rzeczywista może być liczbą całkowitą albo mieć zero lub więcej cyfr po kropce dziesiętnej ("."). Zarówno liczby całkowite jak i rzeczywiste mogą zostać poprzedzone przez "-" lub "+", wskazującym ich znak.
Wiele właściwości przyjmujących jako wartość liczbę całkowitą lub rzeczywistą, wymaga wartości z określonego przedziału, zwykle nie mniejszej od zera.
Długość
Wstęp
Jednostki długości stosuje się w bardzo wielu poleceniach dotyczących stylów, np. wielkość czcionki, marginesów czy rozmiary elementów itd. Format wartości długości składa się z opcjonalnego znaku liczby ("+" - domyślny lub "-"), liczby całkowitej lub rzeczywistej oraz jednostki. Po wartości długości 0 jednostka jest opcjonalna. Należy pamiętać, że nie każdy parametr może przyjąć wartość ujemną!
Są dwa typy jednostek długości: względne (relatywne) i bezwzględne (absolutne). Jednostki względne podają długość w odniesieniu do innego rozmiaru.
Jednostki względne
Względne jednostki długości stosujemy, gdy chcemy się odwołać do rozmiaru innego elementu (np. wysokości aktualnie używanej czcionki).
Jednostki względne czcionki
CSS 3 - ch: 
CSS 3 - rem:
- em - wysokość aktualnej czcionki
- ex - wysokość litery "x", czyli małej litery w aktualnej czcionce
- ch - szerokość cyfry "0" (zero) w aktualnej czcionce (CSS 3)
- rem - wysokość czcionki elementu korzenia w drzewie dokumentu (CSS 3); w języku HTML korzeniem jest zawsze element
<html>
Jednostka rem może być przydatna w sytuacji, kiedy chcemy, aby definiowana długość (np. szerokość bloku na stronie) odnosiła się do określonego rozmiaru czcionki, ale jednocześnie chcemy ją uniezależnić od wartości wyliczonych zgodnie z zasadą dziedziczenia stylów.
Przykładowo załóżmy, że wysokość czcionki korzenia (element <html>) wynosi 16px, a dla <body> ustalono "font-size: 2em". Jeżeli teraz na stronie wstawimy blok ze stylem "width: 10em", uzyska on faktyczną szerokość: 16px * 2 * 10 = 320px (16px pochodzi o wysokości czcionki korzenia, 2 to względna wysokość czcionki <body>, a 10 - ustalona szerokość bloku). Jak widać, zmiana rozmiaru czcionki dla elementu <body> albo wstawienie dodatkowego potomka z ustaloną wielkością cziconki może nam w tym przypadku całkowicie popsuć wygląd strony, wpływając w niełatwy do przewidzenia sposób na szerokość naszego bloku. Taka sytuacja nie będzie miała jednak miejsca, jeśli zamiast tego wpiszemy "width: 20rem" (16px * 20 = 320px).
Oczywiście opisane problemy nie będą miały również miejsca, gdy ustalimy szerokość bloku bezpośrednio w pikselach - "width: 320px". Jednak w pewnych sytuacjach może zależeć nam, aby wymiary elementów na stronie były zależne od podanego rozmiaru czcionki. Większa czcionka może wymagać szerszych bloków z tekstem. Używając jednostki rem wystarczy, że zmienimy tylko rozmiar czcionki jednego elementu, nie obawiając się czasem trudnych do przewidzenia skutków dziedziczenia stylów, a wymiary elementów strony automatycznie dopasują się do nowych ustawień, bez konieczności ręcznych zmian w wielu miejscach arkusza CSS.
Jednostki procentowe obszaru wyświetlania
CSS 3 - vw, vh:
CSS 3 - vmin:
CSS 3 - vmax:
Jeżeli zawartość strony nie mieści się na ekranie, przeglądarka wyświetla na brzegach okna suwaki lub zapewnia inny mechanizm przewijania wyświetlanego dokumentu, tak aby użytkownik mógł zapoznać się z całą jego treścią. Jednostki procentowe obszaru wyświetlania odnoszą się do wymiarów tej widocznej powierzchni okna, w obrębie której przewijana jest zawartość strony (ang. viewport). Na przykład długość 100vw wynosi tyle co szerokość całego obszaru wyświetlania - 100%.
- vw - procentowa szerokość obszaru wyświetlania
- vh - procentowa wysokość obszaru wyświetlania
- vmin - mniejsza z wartości vw lub vh
- vmax - większa z wartości vw lub vh
Nie jesteśmy w stanie przewidzieć, z jakiego urządzenia wyświetlającego korzysta użytkownik. Nie znamy wymiarów jego ekranu. Aby tekst strony był czytelny na niewielkim urządzeniu mobilnym (np. smartphone), być może konieczne będzie ustalenie większej czcionki niż w przypadku dużego monitora panoramicznego. Z pomocą przychodzą nam jednostki procentowe obszaru wyświetlania. Dzięki nim, nieważne jakie będą fizyczne wymiary ekranu, ustalając wielkość tekstu jako np. "font-size: 5vh; line-height: 100%" zapewnimy, że na ekranie powinno zmieścić się dokładnie 20 linijek tekstu (bez konieczności przewijania).
Jednostki bezwzględne
Jednostki bezwzględne są użyteczne tylko wtedy, gdy fizyczne własności medium wyjściowego (np. monitor) są znane. Należy ich używać zawsze wtedy, gdy zależy nam, aby wybrany element zajmował zawsze taki sam obszar na ekranie, niezależnie od rozdzielczości i wielkości monitora. Choć rozdzielczość może się zmienić, to jeśli element taki miał wymiar np. 10cm, to tak pozostanie również w nowej rozdzielczości.
- in - cale (1in = 2.54cm)
- cm - centymetry
- mm - milimetry
- Q - ćwierćmilimetry (1Q = 1/4mm, CSS 3 - obsługuje: Firefox 49, Opera 50, Chrome 63)
- pt - punkty (1pt = 1/72in) - często używane przy definiowaniu rozmiaru czcionki w edytorach tekstu
- pc - pika (1pc = 12pt)
- px - piksele (1px = 1/96in)
Porównanie jednostek długości
| Jednostki względne | ||
|---|---|---|
| 5em (czcionka 10px) | wys. czcionki | |
| 5ex (czcionka 10px) | wys. małej litery | |
| 5ch (czcionka 10px) | szer. cyfry "0" | |
| 5rem | wys. czcionki korzenia | |
| 5vw | 5% szer. "okna" | |
| 5vh | 5% wys. "okna" | |
| 5vmin | 5% min. szer./wys. "okna" | |
| 5vmax | 5% max. szer./wys. "okna" | |
| Jednostki bezwzględne | ||
| 1in | cale | |
| 1cm | centymetry | |
| 10mm | milimetry | |
| 40Q | ćwierćmilimetry | |
| 30pt | punkty | |
| 3pc | pika | |
| 50px | piksele | |
Procenty
Format wartości procentowej składa się z opcjonalnego znaku liczby ("+" - domyślny lub "-"), liczby całkowitej lub rzeczywistej oraz znaku procentu ("%"). Należy pamiętać, że nie każdy parametr może przyjąć wartość ujemną!
Wartość procentowa jest zawsze określana względem innej wartości np. długości. Każda właściwość która pozwala podać wartość procentową, definiuje także do czego się ona odnosi. Może ona dotyczyć innej właściwości tego samego elementu, przodka (wyżej w hierarchii drzewa dokumentu) lub wartości kontekstu formatowania (np. szerokość obejmującego bloku).
Kąty
Wartości kątowe są używane przez słuchowe arkusze stylów (aural). Format wartości kątowej składa się z opcjonalnego znaku liczby ("+" - domyślny lub "-"), liczby całkowitej lub rzeczywistej oraz jednostki kąta. Wartość kątowa może być ujemna.
Jednostkami kątów są:
- deg - stopnie (1deg = 1.11111...grad = 0.01745...rad)
- grad - gradusy (1grad = 0.9deg = 0.01571...rad)
- rad - radiany (1rad = 57.29578...deg = 63.66198...grad)
- turn - obroty (CSS 3)
Kąt pełny: 360deg = 400grad = 2πrad = 1turn
Wartości kątów są normalizowane przez pośrednika użytkownika (przeglądarkę internetową) do zakresu 0-360deg (np. -10deg = 350deg).
Czas
Wartości czasów są używane przez słuchowe arkusze stylów (aural). Format wartości czasowej składa się z liczby całkowitej lub rzeczywistej oraz jednostki czasu. Wartość ujemna jest niedozwolona!
Jednostkami czasu są:
- ms - milisekundy (1ms = 0.001s)
- s - sekundy (1s = 1000ms)
Częstotliwość
Wartości częstotliwości są używane przez słuchowe arkusze stylów (aural). Format wartości częstotliwości składa się z liczby całkowitej lub rzeczywistej oraz jednostki częstotliwości. Wartość ujemna jest niedozwolona!
Jednostkami częstotliwości są:
- Hz - herce (1Hz = 0.001kHz)
- kHz - kiloherce (1kHz = 1000Hz)
Na przykład: dźwięk o częstotliwości 200Hz (lub 200hz) jest basowy, a o częstotliwości 6kHz (lub 6khz) - sopranowy.
Łańcuchy znakowe
Łańcuchy znakowe (tzw. strings) mogą być pisane w podwójnym cudzysłowie ("...") lub w pojedynczym ('...'). Łańcuchy ograniczone podwójnym cudzysłowem nie mogą już zawierać wewnątrz takiego znaku - wtedy należy użyć znaku odwróconego ukośnika (backslash) przed cudzysłowem wewnątrz. Tzn. aby wpisać następujący string: "123"123" (niepoprawnie!), należy podać: "123\"123" (poprawnie). To samo dotyczy pojedynczego cudzysłowu (zamiast '123'123' należy wpisać '123\'123'). Natomiast dozwolony jest zapis: "123'123" lub '123"123'.
Niedozwolone jest bezpośrednie użycie znaku nowej linii (przez przełamanie linii klawiszem Enter). Należy zamiast tego użyć znaku \A.
Jeśli łańcuch jest bardzo długi, można go przedzielić na dwie linie, ale wtedy trzeba koniecznie postawić na końcu pierwszej linii (w miejscu przedzielenia tekstu) znak odwróconego ukośnika \ (backslash). Po znaku \ ani przed następną linią nie należy już stawiać cudzysłowu. Przykładowo wyrażenie:
"1234567890\ 12345"jest równoważne łańcuchowi:
"123456789012345"
Niestety sposób ten nie zawsze działa poprawnie!
W łańcuchach znakowych można wprowadzać znaki ASCII używając notacji: \HEX, gdzie HEX jest jednobajtową liczbą szesnastkową (maksymalnie dwie cyfry 0-F). Natomiast aby wprowadzić znak Unicode, wpisujemy \HHHH, gdzie HHHH jest dwubajtową liczbą szesnastkową (dokładnie cztery cyfry 0-F), tzn. należy obowiązkowo wpisać cztery cyfry. Na przykład:
"\A" = "\000A" = Enter "\22" = "\0022" = '"' "\27" = "\0027" = "'"
Rozdzielczość
CSS 3 - dpi, dpcm:
CSS 3 - dppx:
Jednostki rozdzielności określają wielkość pojedynczej "plamki" w graficznej reprezentacji obrazu, wskazując ile takich plamek zmieści się na długości odpowiednio: 1in, 1cm lub 1px. Używane są np. do ustawiania jakości wydruku - im większa rozdzielczość, tym bardziej szczegółowy obraz.
Jednostkami rozdzielności są:
- dpi - plamki na cal (ang. dots per inch)
- dpcm - plamki na centymetr (ang. dots per centimeter)
- dppx - plamki na piksel (ang. dots per pixel); 1dppx = 96dpi
Wyrażenia matematyczne
CSS 3 -
calc(wyrażenie)
- +
- dodawanie
- -
- odejmowanie
- *
- mnożenie
- /
- dzielenie
Czasami proste określnie pojedynczej jednostki staje się niewystarczające. Przykładowo możemy chcieć, aby jakiś element miał rozmiar 50% i dodatkowo 10 pikseli. Sposobem na uzyskanie takiego rezultatu jest określenie wyrażenia matematycznego:
calc(50% + 10px)
Tworzenie prostych wyrażeń matematycznych jest dość intuicyjne. Wystarczy pamiętać o kilku podstawowych zasadach:
- Dodawać i odejmować można tylko wielkości tego samego typu. W przeciwnym razie takie wyrażenie nie miałoby sensu - jak np. dodawanie długości i czasu:
calc(10px + 1s). Procenty są traktowane jako wartości typu określonego w opisie danej cechy CSS. Dlatego poprawny będzie np. taki styl: "width: calc(50% + 10px)". - Mnożenie odbywa się zawsze z udziałem liczby - np.:
calc(5 * 10px)albocalc(10px * 5) - Dzielimy zawsze przez liczbę - np.:
calc(100vw / 40)
Oczywiście w pojedynczym wyrażeniu matematycznym można wstawić więcej niż tylko dwie wartości.
Po obu stronach operatorów działań dodawania i odejmowania obowiązkowo muszą znajdować się spacje bądź inne białe znaki. Ponadto wyrażenia matematyczne składające się z więcej niż 20 wartości mogą nie działać.