Budowa stylu

Budowa stylu

Ogólny schemat konstrukcji stylu wygląda następująco:

selektor {cecha: wartość; cecha: wartość; etc.;}

W schemacie budowy stylu widocznym w poprzednim podrozdziale zamiast słowa selektor należy podstawić odpowiednią nazwę — innymi słowy, znacznik z języka XHTML/HTML. Jest to bardzo proste. Jeśli chcesz formatować akapity, to selektorem jest znacznik <p>, z tą różnicą, że pomijasz wówczas nawiasy kątowe.

Cecha jest wpisem ściśle określonym przez specyfikację kaskadowych arkuszy stylów. Wybrane cechy dostępne w specyfikacji opiszę w następnych podrozdziałach. Przy wyborze elementów kierowałem się ich przydatnością i mam nadzieję, że dzięki temu wiedzy do przyswojenia nie będzie zbyt wiele, ale za to okaże się ona przydatna w praktyce.

Wartość zazwyczaj jest przypisana do danej cechy; bardzo często jednak bywa tak, że może ona być podobna do kilku zupełnie różnych cech. Poniżej zamieściłem praktyczny przykład stylu.

Podstawowe kolory systemowe, z których możemy skorzystać w CSS2

Wartość Opis i przykład
Background Pobiera kolor pulpitu:

BODY {background-color:background;}

Window Pobiera kolor tła z okna:

BODY {background-color:window;}

Windowframe Pobiera kolor ramki okna:

BODY {background-color:windowframe;}

Windowtext Pobiera kolor tekstu z okna: P{color:windowtext;}
ThreeDLightShadow Pobiera kolor jasnego cienia z elementów 3D: BODY{backgroud-color:ThreeDLightShadow;}
ThreeDDarkShadow Pobiera kolor ciemnego cienia z elementów 3D: BODY)backgroud-color:ThreeDDarkShadow;}
ThreeDFace Pobiera kolor powierzchni z elementów 3D: BODY{backgroud-color:ThreeDFace;}
ThreeDHighlight Pobiera kolor podświetlenia z elementów 3D: BODY{backgroud-color:ThreeDHi ghlight;}
ActiveCaption Pobiera kolor belki tytułowej aktywnego okna: P{color:ActiveCaption;}
InactiveCaption Pobiera kolor belki tytułowej nieaktywnego okna: P{color:InactiveCaption;}
ActiveBorder Pobiera kolor obramowania głównego okna: P{color:ActiveBorder;}
AppWorkspace Pobiera kolor tła z aplikacji pracującej na wielu oknach: Pfcolor:AppWorkspace;}
ButtonFace Pobiera kolor z powierzchni przycisków: P{color:ButtonFace;}
ButtonHighlight Pobiera kolor z obramowania przycisków: P{color:ButtonHighlight;}
ButtonShadow Pobiera kolor z cienia przycisku: P{color:ButtonShadow;}
ButtonText Pobiera kolor z tekstu umieszczonego na przycisku: P{color:ButtonText;}
CaptionText Pobiera tekst z nagłówków: P{color:CaptionText;}
GrayText Pobiera kolor z nieaktywnego tekstu: P{color:GrayText;}
Highlight Pobiera kolor z wybranego elementu: P{color:Highlight;}
HighlightText Pobiera kolor z tekstu w wybranych elementach: P{color:HighlightText;}
Wartość Opis i przykład
InfoBackground Pobiera kolor z tła podpowiedzi: P{color:InfoBackground;}
InfoText Pobiera kolor z tekstu podpowiedzi: P{color:InfoText;}
Menu Pobiera kolor z tła menu: P{color:Menu;}
MenuText Pobiera kolor z tekstu znajdującego się w menu: P{color:MenuText;}
Scrollbar Pobiera kolor tła z belki przewijania: P{color:Scrollbar;}
ThreeDDarkShadow Pobiera kolor z ciemnego cienia belki przewijania: P{color:ThreeDDarkShadow;}

p
{
color: green; font-size: 14px;
}

Oczywiście nic nie stoi na przeszkodzie, by stosować inny zapis: p {color: green; font-size: 14px;}

Pamiętaj, że po każdej cesze zawsze musi znaleźć się dwukropek, a po wartości średnik. Brak tych znaków może skończyć się problemami z interpretacją stylu przez przeglądarkę.