Właściwości i wartości

Po selektorze jest zawsze para nawiasów klamrowych zawierających pary właściwości i ich wartości.

Właściwości

Nazwy właściwości są jednym słowem lub kilkoma słowami połączonymi myślnikiem.

Wiele właściwości ma swoje ogólne (skrócone) wersje, które dzielą się na bardziej szczegółowe (dłuższe). Skrócona forma pozwala ustalić komplet właściwości za jednym razem, a dłuższa forma pozwala określić tylko wybrane szczegóły.

 border-color: red green blue yellow;
 Wersja skrócona

 border-top-color: red;
 border-right-color: green;
 border-bottom-color: blue;
 border-left-color: yellow;
 Niepotrzebnie długi zapis :)

Aby zapamiętać notację wersji skróconej można pomóc sobie prostym skojarzeniem: wyobrazić sobie zegar i zaczynając od godziny 12 (top), poprzez 3 (right) iść zgodnie z ruchem jego wskazówek do 6 (bottom) i 9 (left).

Wartości

Składnia wartości jest różna zależnie od właściwości, którą określa, ale zawsze używa analogicznych sposobów na ustalenie takich rzeczy, jak kolory, wielkości, pliki, itp.

Jednostki

Jednostkę stawia się zaraz po liczbie. Nie może być spacji między jednostką, a liczbą!

CSS pozwala określić wielkości w pikselach (px), procentach (%) oraz w wielkościach relatywnych do wielkości tekstu: em równe wysokości tekstu, ex równe wysokości litery x.

Dostępne są też, choć mało przydatne, jednostki absolutne takie jak metry i milimetry (mmm) lub cale (in), punkty (pt, 1/72 cala) i pica (pc, 12 punktów).

 1.2em
 33.33%
 120px
 4ex
 10pt

Kolory

W latach '90 zalecane były „bezpieczne kolory” dla 8-bitowych ekranów i programy jak Photoshop do dziś oferują związane z tym opcje. Obecnie nawet najbardziej prymitywne urządzenia obsługują większą głębię i nie ma powodu, żeby sobie zawracać głowę tym ograniczeniem.

Kolory w CSS można określać na kilka równoważnych sposobów. Najbardziej zwięzła jest notacja szesnastkowa.

Za pomocą nazwy
Dopuszczalne kolory to maroon, red, orange, yellow, olive, purple, fuchsia, white, lime, green, navy, blue, aqua, teal, black, silvergray oraz w specyficznych przypadkach dodatkowe nazwy określające standardowe kolory systemowe użytkownika.
W postaci szesnastkowej
Składowe określa się szesnastkowo (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) wg schematu #RRGGBB lub krótszego #RGB gdzie R to składowa czerwona, G to składowa zielona, B to niebieska. Krótszy zapis, trzyznakowy, jest rozwijany do sześcioznakowego przez duplikację (#369 do #336699).
W postaci funkcji RGB
Funkcja rgb() przyjmuje parametry kolejno dla czerwonego, zielonego i niebieskiego w postaci dziesiętnej od 0 do 255 lub procentowej.
W postaci funkcji RGBA
Funkcja rgba() przyjmuje kolory podobnie jak rgb(), ale dodatkowo przyjmuje poziom przezroczystości koloru od 0 (przezroczysty) do 1 (nieprzezroczysty). Można też stosować wartości częściowe: 0.55 odpowiada 55% wypełnieniu i 45% przezroczystości. Bug w IE Bug w FF Bug w OP
Transparent Bug w IE6
Słowo kluczowe transparent oznacza brak wypełnienia (całkowicie przezroczysty "kolor").


 #0f0
 #00FF00
 rgb(0,255,0)
 rgb(0,100%,0)
 rgba(0,100%,0,1)
 Jaskrawy zielony zapisany na różne sposoby

 transparent
 rgb(0,0,0,0)
 Brak wypełnienia

Format koloru #RRGGBB jest taki sam jak niegdyś używany był w HTML

Starsze wersje CSS nie wszędzie dopuszczają „kolor” transparent i w ogóle nie dopuszczają notacji rgba()

URL-e

Ścieżki w arkuszach stylów są relatywne do nich, a nie dokumentu HTML.

CSS pozwala określić np. obrazki tła lub połączyć kilka arkuszy ze sobą. Wtedy określa się ścieżki do plików funkcją url(). Jako parametr przyjmuje ona ścieżkę. Ścieżka może być opcjonalnie ujęta w pojedyncze lub podwójne cudzysłowy.

 url(obrazek.png)
 url("http://example.com/obrazek.png")
 url('../arkusz.css')

Stałe znakowe Bug w IE

Można do dokumentu dodawać tekst za pomocą CSS. Wtedy tekst zapisuje się w cudzysłowie. CSS to nie HTML i nie dopuszcza CDATA. Znaki specjalne należy poprzedzać znakiem "\". Można użyć dowolnych znaków Unicode w postaci numeru szesnastkowego poprzedzonego znakiem "\".

 "tekst"
 "tekst \"z\" cudzysłowem i \\ backslashem"
 "tekst\0a\0dw nowej linii"
 "as \2660 (pik)"

Inherit Bug w IE

Wiele właściwości CSS jest dziedziczonych między elementami. Np. czcionka ustawiona dla <html> dokumentu zostanie odziedziczona do wszystkich elementów w dokumencie.

Dla właściwości, które nie są domyślnie dziedziczone można wymusić dziedziczenie za pomocą słowa kluczowego inherit. Pozwala to uniknąć nadawania wartości tam, gdzie byłoby to wymagane albo usunąć wartość zmienioną gdzie indziej (w tym samym arkuszu albo w domyślnym arkuszu przeglądarki).

 :link {color: inherit;}
 Odnośniki będą miały taki sam kolor jak tekst, który je otacza.

Wartości nadane, a wartości użyte

Szkic

W pewnych przypadkach przeglądarka może użyć innej wartości, niż ta określona w arkuszu CSS (wynikająca z kaskady) — np. nie ma sensu połączenie position:absolutefloat:left, dlatego w takim przypadku przeglądarka „po cichu” użyje float:none.

Specyfikacja CSS używa określenia computed value.


Zmodyfikowano: 31.08.2011, 12:11
submit