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