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 }