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óconaborder-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 (m
i mm
) 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
,silver
igray
oraz w specyficznych przypadkach dotatkowe 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 jakrgb()
, 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. -
Transparent
-
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 sposobytransparent
,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
Można do dokumentu dodawać tekst za pomocą CSS. Wtedy tekst zapisuje się w cudzysłowie. CSS to nie HTML i nie dopuszcza encji
. Znaki specjalne należy poprzedzać backslashem. Można użyć dowolnych znaków Unicode w postaci numeru szesnastkowego poprzedzonego
backslashem.
"tekst"
,"tekst \"z\" cudzysłowem i \\ backslashem"
,"tekst\0a\0dw nowej linii"
,"as \2660 (pik)"
Inherit
Wiele właściwości CSS jest dziedziczonych między elementami. Np. czcionka ustawiona dla <body>
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, w którym się znajdują.
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:absolute
i float:left
, dlatego w takim przypadku przeglądarka „po cichu” użyje float:none
.
Specyfikacja CSS używa określenia computed value.
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 13.03.2007, 03:49