Kaskady i terminologia
Kaskady
Aby uzyskać ostateczny efekt, możemy łączyć ze sobą różne arkusze stylów, importując po prostu więcej niż jeden arkusz:
@import url(http://siteaddress/sheet1
);
@import url(http://siteaddress/sheet2
);
Ten efekt nazywamy kaskadą
. Informacja o stylu podana w dokumencie w zasadzie jest ważniejsza od informacji, którą być może zdefiniował czytelnik. Tam, gdzie zastosowane zostały style importowane, ostatni załadowany styl koryguje ustawienia określone przez wcześniejsze style. '@import' musi występować na początku arkusza stylów.
Najogólniej, kolejność kaskady jest następująca, przy czym dalsze pozycje mają pierwszeństwo przed wcześniejszymi :
- wartości domyślne
- wartości dziedziczone
- wartości określone dla danej własności. Jeśli własność ma dwie przypisane wartości, używana jest ostatnia z nich.
important
format: selector { property:value
! important}
Jakikolwiek element w arkuszu stylów autora, któremu nadano atrybut
! important
, jest ważniejszy od domyślnych ustawień w arkuszu czytelnika, chyba że czytelnik sam określił atrybut ! important
dla tej własności. Zauważ, że jest to nieco odmienne podejście niż w CSS Level 1
przykład: H1 { color : red ! important}
Model formatowania dla elementów
Każdy element HTML (<PRE>, etc) składa się z następujących "klocków" (tzw. model pojemnika, czyli "box model" - przyp. tłum.), chociaż wartości niektórych z nich mogą zerowe:
- przezroczysty margines zewnętrzny (margin)
- obramowanie (border), wewnątrz obszaru marginesu
- "padding", czyli wewnętrzny margines
- konkretna zawartość elementu
Elementy blokowe
Są to elementy wyświetlane jako odrębne bloki lub punkty wykazu, jak również elementy "pływające". Elementy blokowe zwykle tworzą automatycznie przełamanie linii na początku i na końcu.
Notacja dla definicji własności
W sekcjach, w których definiuję rozmaite własności stylów,
Text like this
to tekst, który sam podajesz
|
oznacza "lub" ("or")
[ ]
oznacza, że wartości wewnątrz są opcjonalne
length, percentage, url, number
i color
opisują typ wartości do zastąpienia
||
oznacza i/lub (and/or)
Jednostki
Jednostki długości
W definicjach własności mogą mieć określony rozmiar, wyrażany za pomocą liczby i dwuliterowego identyfikatora jednostki.
jednostki względne, jak w poniższych przykładach:
H1 { margin: 0.5em } /* w proporcji do wysokości czcionki danego elementu */
H1 { margin: 1ex } /* w proporcji do wysokości litery x */
P { font-size: 12px } /* piksele (kropki) na ekranie lub papierze */
jednostki absolutne:
H1 { margin: 0.5in } /* cale, 1in = 2.54cm */
H2 { line-height: 3cm } /* centymetry */
H3 { word-spacing: 4mm } /* milimetry */
H4 { font-size: 12pt } /* punkty, 1pt = 1/72 in */
H4 { font-size: 1pc } /* pica, 1pc = 12pt */
Jednostki kolorów
Kolory mogą być określone imiennie: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white,
i yellow.
...lub jako kombinacje kolorów RBG (red,green,blue):
EM { color: rgb(255,0,0) } /* zakres liczb całkowitych 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* procent dostępnych wartości */
EM { color: #rrggbb} /* wartości heksadecymalne red,green,blue */
Dodatkowo, CSS2 pozwala wykorzystać specjalne nazwy kolorów, które odnoszą się do odpowiednich elementów w systemie operacyjnym czytelnika strony. Są one przydatne wtedy, gdy zależy nam, aby dokument zawierał kolory odpowiadające schematowi kolorów używanych przez czytelnika.
ActiveBorder, ActiveCaption
Kolory obramowania i belki tytułowej aktywnego okna.
AppWorkspace
Kolor tła dla aplikacji używającej wielu okien.
Background
Kolor pulpitu.
ButtonFace
, ButtonHighlight
, ButtonShadow
, ButtonText
powierzchnia, ciemne obramowanie, cień i kolor tekstu w przyciskach i obiektach 3D.
CaptionText
Tekst w nagłówkach.
GrayText
Tekst w nieaktywnych elementach.
Highlight
Wybrane elementy.
HighlightText
Tekst w wybranych elementach
InactiveBorder, InactiveCaption, InactiveCaptionText
Kolory dla obramowania, belki tytułowej i tekstu w belce tytułowej nieaktywnego okna.
InfoBackground
Tło w "podpowiedziach".
InfoText
Kolor tekstu w "podpowiedziach".
Menu
, MenuText
Kolor tła i tekstu w menus.
Scrollbar
Szary obszar belki przewijania.
ThreeDDarkShadow
, ThreeDFace
, ThreeDHighlight
, ThreeDLightShadow
Kolory ciemnego cienia, powierzchni, podświetlenia i jasnego cienia w obiektach 3D.
Window
Tło okna.
WindowFrame
Kolor ramki okna.
WindowText
Kolor tekstu w oknach.
Przykład: P { color: WindowText; background-color: Window }