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ę.