# 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 }`