Kaskadowy arkusz stylów css

Arkusze stylów CSS (Cascading Style Sheets) pozwalają określać wygląd większości elementów strony www. Styl pozwala globalnie lub lokalnie zmieniać sposób formatowania wybranego elementu dokumentu HTML. Za pomocą arkusza stylów można formatować tekst, ustawiać rodzaj czcionki, jej kolor, rozmiar i inne własności, zmieniać tło strony, tabelki lub paragrafu, tworzyć obramowania, zmieniać kształt kursora, wygląd odsyłaczy, kolory suwaków, właściwości wykazów i wiele, wiele więcej. Nie ma już potrzeby ustawiać tych właściwości za pomocą atrybutów znaczników HTML. Niektóre z tych właściwości są praktycznie niemożliwe do osiągnięcia za pomocą znaczników języka HTML. Arkusze stylów w dużym stopniu rozszerzają skalę naszych możliwości, wprowadzają możliwości formatowania tekstu tak jak w zaawansowanych edytorach tekstowych.

Ważną zaletą stylów jest to, że niezwykle ułatwiają i przyspieszają pracę. Gdy chcemy zmienić wygląd wybranych elementów strony bądź całego serwisu wystarczy wykonać odpowiednie zmiany w arkuszu stylów, a efekt będzie widoczny od razu we wszystkich elementach oznaczonych tym stylem. Jakakolwiek zmiana wyglądu dokumentów formatowanych bezpośrednio poprzez znaczniki HTML wymagała dokonania poprawek na każdej stronie, w każdym elemencie z osobna.

Kolejna zaleta arkuszy css to możliwość oddzielenia układu strony od właściwości jej elementów. Za pomocą języka HTML tworzy się tylko strukturę dokumentu, a korzystając ze stylów odpowiednio się go formatuje, ustawia się np. kolor czcionki, tło, wielkość liter itp. W ten sposób nasz dokument staje się bardziej przejrzysty.

Osadzanie stylów na stronie

Kaskadowe arkusze stylów mogą być osadzone w dokumencie HTML na kilka sposobów. Specyfikacja przewiduje następujące rozwiązania:

  1. Style wewnętrzne
    • lokalne
    • zagnieżdżone
  2. Style zewnętrzne
    • dołączone
    • importowane

Style wewnętrzne

Styl lokalny - umieszczenie deklaracji stylu bezpośrednio w formatowanym znaczniku.

...
<body>
<p style="color:green; font-size:15pt;">Treść dokumentu</p>
<p>Treść dokumentu</p>
<p style="color:green; font-size:15pt;">Treść dokumentu</p>
<p>Treść dokumentu</p>
</body>

Przykład stylu umieszczonego w znaczniku, widoczny na powyższym listingu, uzmysławia nam, że taka konstrukcja opiera się na stosowaniu atrybutu style dla znacznika <p>. Wadą tego rozwiązania jest konieczność powielania tego samego stylu wiele razy, ponieważ działa on tylko dla znacznika, w którym został umieszczony.

Styl zagnieżdżony - Definicję stylu umieszczamy na początku strony w sekcji nagłówkowej, czyli pomiędzy znacznikami <HEAD> i </HEAD>, definiuje ona na cały dokument i wygląda na przykład tak:

<HEAD>
<STYLE TYPE="text/css">
<!--
P {font-size: 10pt; font-family: Arial, Verdana, Helvetica; }
-->
</STYLE>
<:/HEAD>

Gdy kilka stron jest formatowanych za pomocą tego samego zestawu stylów, lepiej stosować zewnętrzne arkusze stylów, co ułatwia dokonywanie zmian i zmniejsza wielkość plików.

Style zewnętrzne

Styl dołączony — style CSS można dołączyć z zewnętrznego pliku (*.css), a w dokumentach w sekcji <HEAD> wstawić odpowiednie odwołania do tego pliku. Są to odwołania do tzw. stylów zewnętrznych:

<HEAD>
...
<LINK rel="stylesheet" href="*.css">
</HEAD>

W tym przypadku należy utworzyć odrębny plik o nazwie *.css, np. styl.css lub mojstyl.css, plik ten powinien zawierać definicje stylów dla wszystkich elementów strony www, które chcemy odpowiednio sformatować. Ten sposób dołączania stylów jest bardzo wygodny, ponieważ tworzy się tylko jeden plik ze stylami. W tym pliku można trzymać definicje stylów nawet dla dużych serwisów internetowych, składających się z wielu stron.

Szczegółowy opis zewnętrznego arkusza stylów znajdziesz w kolejnych zakładkach.

Budowa arkusza stylów

Kaskadowy arkusz stylów to zwykły tekst - lista reguł ustalających sposób formatowania elementów treści.

Budowa reguły

Pojedyncza reguła może określać style dla jednego lub wielu elementów dokumentu. Każda reguła składa się z dwóch części:

  • selektora,
  • deklaracji.

Selektor [od ang. select] może wskazywać na jeden element lub grupę elementów albo na atrybut.
Deklaracja określa właściwość i jej wartość.

Ponieważ selektory mogą wskazywać na elementy bądź atrybuty wyróżniamy trzy typy selektorów:

  • selektor elementu, inaczej selektor prosty wskazuje na elementy ustalone w specyfikacji HTML, takie jak akapit - p, lista - ul, czy tabela - table, itp.
  • selektor klasy, oznaczony dowolną nazwą poprzedzoną kropką, wskazuje na pewną odmianę - wariant prezentacji elementu, np. klasa .wazne może być przypisana różnym elementom dokumentu HTML;
  • selektor identyfikatora, oznaczany znakiem # (haszem, zwanym też krzyżykiem) - wskazuje na konkretny element występujący w dokumencie tylko jeden raz.

Arkusze wewnętrzne i zewnętrzne

Arkusz stylów może być osadzony wewnątrz dokumentu za pomocą elementu <style> albo umieszczony w dołączonym pliku.

Swoje własne domyślne arkusze stylów mają również urządzenia odczytujące. Jeśli do dokumentu nie podpięto arkusza stylów lub jeśli arkusze stylów zostały wyłączone przez użytkownika, do prezentacji dokumentu wykorzystywane są domyślne arkusze stylów urządzeń odczytujących.

Kolejność stosowania reguł

Styl elementu może być określony w różnych miejscach:

  • w arkuszu stylów urządzenia odczytującego,
  • we własnym arkuszu stylów użytkownika,
  • w arkuszu stylów podpiętym przez autora,
  • w wewnętrznym arkuszu włączonym do dokumentu,
  • bezpośrednio w znaczniku elementu.

Które reguły zostaną więc ostatecznie zastosowana? W jakiej kolejności?

Kolejność stosowania reguł wyznaczana jest przez trzy zasady: dziedziczenia, specyficzności i kaskadowości.

Dziedziczenie

Zasada dziedziczenia właściwości zakłada, że elementy potomne dziedziczą właściwości swoich ’rodziców’, czyli elementów nadrzędnych, obejmujących. Nie wszystkie jednak właściwości są dziedziczone. Informacje na ten temat znajdziesz w specyfikacji czy w podręcznikach CSS.

Kaskadowość

Sytuacje konfliktowe rozwiązywane są zgodnie z zasadą kaskadowości. Wedle tej zasady pierwszeństwo mają style zdefiniowane bliżej formatowanego elementu. Nadpisują one style zdefiniowane wcześniej. Im później w dokumencie lub w arkuszach stylów występuje deklaracja, tym jest ważniejsza. Kolejność interpretacji jest następująca:

  • najpierw style arkusza przeglądarki,
  • następnie style arkusza użytkownika,
  • potem zewnętrzne arkusze stylów,
  • później wewnętrzne arkusze stylów zdefiniowane w nagłówku dokumentu),
  • na końcu style w atrybucie style elementu.

W praktyce - gdy któryś z elementów formatowany jest w sposób nieoczekiwany, trzeba sprawdzić, czy został uwzględniony mechanizm dziedziczenia, przeanalizować wagę deklaracji, przyjrzeć się kolejności występowania reguł.

Grupowanie selektorów i deklaracji, skrótowe zapisy

Im zwięźlejszy kod CSS, im mniejsze pliki arkuszy stylów, tym lepiej. Zmniejszanie objętości kodu umożliwia grupowanie selektorów i deklaracji oraz skrótowe zapisywanie właściwości.

Grupowanie selektorów pozwala przypisywać wielu elementom te same właściwości, np.:

h1, h2, h3, h4, h5, h6 {color: blue;}

Grupowanie deklaracji natomiast pozwala w jednej regule umieścić wiele właściwości. Grupując deklaracje w pojedynczą regułę, należy pamiętać o oddzielaniu ich średnikami.

Przykład grupowania deklaracji:

h1 {
font-style: italic;
font-weight: bold;
font-variant: small-caps;
font-size: 12px;
line-height: 14px;
font-family: helvetica, sans-serif;
}

Tę regułę można zapisać znacznie krócej.

Skrócone właściwości

Wiele właściwości można wyrazić jednocześnie, w jednej deklaracji. Poniżej przedstawimy kilka najpopularniejszych przypadków.

Czcionki

Niekiedy, zamiast - jak widzieliśmy wyżej - sześciu deklaracji formatujących czcionkę, można użyć jednej, np.:

h1 {font: italic bold small-caps 12px/14px helvetica, sans-serif;}

Kolory

Jeśli określenie koloru zapisane w postaci szesnastkowej składa się z trzech par cyfr szesnastkowych, można w każdej parze ominąć jedną z nich:

#000000 można zapisać jako #000
#338855 można zapisać jako #385

Tło i podkład

Zamiast określania tła i obrazka podkładu w kilku deklaracjach (dla właściwości: color, image, repeat, attachment i position, wystarczy skorzystać z background, np.:

body {background:#fff url(../images/obrazek.png) no-repeat fixed 0 0;}

Obramowania [border]

Zamiast trzech deklaracji własności rozmiar, styl i color, można je umieścić w jednej deklaracji, np.:

div {border: 2px dashed blue;}

W skróconym zapisie musi być kolejność:   styl, variant, weight, size, line-height, rodzina. Niektóre własności można pominąć, konieczne jest określenie tylko rozmiaru i rodziny czcionki.

Listy

Zamiast deklarować   list-style-type, list-style-position, list-style-image   możesz użyć jednej, np.

ul {list-style-type:disc inside url(../images/punktor.png);

Wsparcie CSS przez przeglądarki

Przeglądarki w różnym stopniu wspierają obsługę CSS. Aktualnie najlepiej wspierają CSS przeglądarki oparte na silniku Gecko (Firefox, opera, Safari, Konqueror). IE 6 nawet w trybie zgodności ze standardami, nie obsługuje poprawnie CSS2, nie obsługuje wszystkich własności, sporo w niej błędów. W IE7 nastąpiła znaczna poprawa obsługi CSS2, aczkolwiek nadal nie jest kompletna.

Standard CSS 3 nie jest jeszcze całkowicie obsługiwany, najlepiej z niego korzystać z umiarem. Większość przeglądarek obsługuje już zaokrąglanie rogów.

Obsługa błędów w CSS

Przeglądarki mają obowiązek całkowicie ignorować fragmenty arkusza, których nie rozumieją. Jeśli nie rozumieją fragmentu selektora, ignorują całą regułę. Jeśli nie rozumieją którejkolwiek z wartości właściwości, ignorują całą właściwość, ale nie regułę.

W połączeniu z kaskadą pozwala to podać kilka wersji każdej reguły dla przeglądarek, które nie rozumieją tych bardziej zaawansowanych.

#foo {
color: rgb(234,0,0);
color: rgba(234,0,0,0.5);
}

Jeśli przeglądarka nie rozumie rgba to zignoruje tę właściwość i pozostawi wcześniej ustawiony nieprzezroczysty kolor. W przeciwnym wypadku druga reguła nadpisze pierwszą.

a, b, c[%%%] {color: red}

Reguła nie zostanie zastosowana do żadnego elementu, ponieważ nieprawidłowy selektor c[%%%] powoduje jej całkowite zignorowanie (czyli selektory a i b też nie zostaną wzięte pod uwagę).

a {border: 2px; border: 1px 0 0 7foo;}

Cała ramka będzie dwupixelowa, ponieważ nieprawidłowa jednostka 7foo powoduje zignorowanie całej drugiej właściwości.

Przy ignorowaniu przeglądarki przeskakują klamry, nawiasy i cudzysłowy parami. Oznacza to, że niedomknięcie któregoś z tych elementów może spowodować zignorowanie nawet całego arkusza.

Częstym błędem jest dostawienie średnika za klamrą kończącą regułę CSS. Średnik jest traktowany jako część nieprawidłowego selektora i powoduje zignorowanie całej kolejnej reguły.

Wykaz właściwości (cech) CSS

  • !important - określa ważniejszą deklarację styli
  • active - określa styl naciskanych odnośników
  • after - określa zawartość dodawaną za elementem
  • azimuth - umożliwia umiejscowienie dźwięku
  • background-attachment - określa sposób zachowania się obrazu tła w przypadku przewijania strony
  • background-color - dodaje kolor do tła stylu
  • background-image - umieszcza obraz w tle stylu
  • background-position - steruje umiejscowieniem obrazu w tle elementu strony
  • background-repeat - określa czy i jak obraz tła będzie powtarzany
  • background - właściwość skrótowa pozwala określić właściwości odpowiedzialne za tło elementu
  • before - określa zawartość dodawaną przed elementem
  • border-bottom-color - definiuje kolor obramowania dolnej krawędzi
  • border-bottom-style -definiuje styl obramowania dolnej krawędzi
  • border-bottom-width - definiuje szerokość obramowania dolnej krawędzi
  • border-bottom - nadaje obramowanie dolnej krawędzi elementu
  • border-color - definiuje kolor wszystkich czterech obramowań
  • border-collapse - określa, czy ramki wokół tabeli są rozdzielone, czy łączone
  • border-left-color - definiuje kolor obramowania lewej krawędzi
  • border-left-style - definiuje styl obramowania lewej krawędzi
  • border-left-width - definiuje szerokość obramowania lewej krawędzi
  • border-left - nadaje obramowanie lewej krawędzi elementu
  • border-right-color - definiuje kolor obramowania prawej krawędzi
  • border-right-style - definiuje styl obramowania prawej krawędzi
  • border-right-width - definiuje szerokość obramowania prawej krawędzi
  • border-right - nadaje obramowanie prawej krawędzi elementu
  • border-spacing - ustawia odstęp między komórkami tabeli
  • border-style - definiuje styl używany przez wszystkie cztery obramowania
  • border-top-color - definiuje kolor obramowania górnej krawędzi
  • border-top-style - definiuje styl obramowania górnej krawędzi
  • border-top-width - definiuje szerokość górnej krawędzi obramowania
  • border-top - nadaje obramowanie górnej krawędzi elementu
  • border-width - definiuje szerokość linii użytej dla wszystkich czterech obramowań
  • border - rysuje linię wokół czterech krawędzi elementu
  • bottom - właściwość określa odległość od dolnej krawędzi
  • caption-side - określa położenie tytułu tabeli
  • clear - właściwość sprawia, że element nie będzie opływał elementu pływającego
  • clip - określa widoczną część elementu
  • color - ustawia kolor tekstu
  • content - określa tekst pojawiający się przed elementem lub po nim
  • counter-increment - określa zmianę wartości licznika
  • counter-reset - określa nową wartość licznika
  • cue-after - określa odtwarzanie dźwięku po elemencie
  • cue-before - określa odtwarzanie dźwięku przed elemencie
  • cue - określa odtwarzanie dźwięku przed i po elemencie
  • cursor - umożliwia zmianę wyglądu kursora, gdy zostanie on umieszczony nad określonym elementem
  • direction - określa kierunek wyświetlania tekstu
  • display - określa sposób wyświetlania elementu - czy będzie to element blokowy czy liniowy
  • elevation - umożliwia określenie kąta dźwięku
  • empty-cells - określa, jak przeglądarka ma wyświetlać zupełnie pusta komórkę tabeli
  • first-child - określa styl pierwszego elementu w hierarchii
  • first-letter - określa styl pierwszej litery elementu
  • first-line - określa styl pierwszej linii elementu
  • float - przenosi element do lewej lub prawej krawędzi okna przeglądarki, lub jeśli element pływający znajduje sie wewnątrz innego elementu, do lewej lub prawej krawędzi tego zawierającego elementu
  • focus - określa styl elementu aktualnie używanego
  • font-family - określa czcionkę, której przeglądarka powinna użyć do wyświetlenia tekstu
  • font-size-adjust - określa wartość współczynnika wielkości wielkości czcionki do wysokości znaku
  • font-size - ustawia rozmiar tekstu
  • font-stretch - umożliwia wybór normalnego, zwartego, rozszerzonego kroju z danej rodziny czcionek
  • font-style - tekst pisany jest kursywą, gdy tekst już pisany jest kursywą, zmienia go na zwykłą czcionkę
  • font-variant - tekst pisany jest kapitalikami
  • font-weight - pogrubia lub usuwa pogrubienie czcionki
  • font - skrócona metoda zamieszczania właściwości tekstu w jednej deklaracji
  • height - ustawia wysokość obszaru zawartości - obszaru elementu, w którym umieszczana jest zawartość
  • hover - określa styl "najechanych" odnośników
  • lang - określa język narodowy
  • left - właściwość określa odległość od lewej krawędzi
  • letter-spacing - określa odstępy między literami
  • line-height - określa odstępy między wierszami tekstu w akapicie
  • link - określa styl nieodwiedzonych odnośników
  • list-style-image - określa obraz użyty jako punktor listy nienumerowanej
  • list-style-position - pozycjonuje punktory lub liczby w liście
  • list-style-type - ustawia typ punktora dla listy
  • list-style - skrócona forma określania właściwości listy
  • margin-bottom - ustawia margines dla dolnej krawędzi
  • margin-left - ustawia margines dla lewej krawędzi
  • margin-right - ustawia margines dla prawej krawędzi
  • margin-top - ustawia margines dla górnej krawędzi
  • margin - ustawia odstęp między obramowaniem elementu a marginesem innych elementów
  • marker-offset - określa odległość między markerem i elementem
  • marks - określa, czy tuz poza blokiem strony mają być drukowane znaczniki oznaczające jej obszar
  • max-height - ustawia maksymalną wysokość elementu
  • max-width - ustawia maksymalna szerokość elementu
  • min-height - ustawia minimalną wysokość elementu
  • min-width - ustawia minimalną szerokość elementu
  • orphans - określa minimalną liczbę wierszy tekstu, jaka może być pozostawiona na dole drukowanej strony
  • outline-color - określa kolor konturu
  • outline-style - określa typ linii konturu
  • outline-width - określa grubość konturu
  • outline - skrócona właściwość pozwalająca w jednej deklaracji ustawić odpowiednie wartości konturu
  • overflow - ustawia, co powinno się dziać, gdy tekst przepełnia swój obszar zawartości
  • padding-bottom - ustawia dopełnienie dla dolnej krawędzi
  • padding-left - ustawia dopełnienie dla lewej krawędzi
  • padding-right - ustawia dopełnienie dla prawej krawędzi
  • padding-top - ustawia dopełnienie dla górnej krawędzi
  • padding - ustawia ilość miejsca między zawartością z obramowaniem a krawędziom tła
  • page-break-after - określa, czy podział strony (w druku) wystąpi za wskazanym elementem
  • page-break-before - określa, czy podział strony (w druku) wystąpi przed wskazanym elementem
  • page-break-inside - zapobiega rozdzieleniu elementu na dwie drukowane strony
  • page - określa konkretny typ strony, na której element powinien zostać wyświetlony
  • pause-after - określa pauzę, jaka należy umieścić po odtwarzaniu zawartości elementu
  • pause-before - określa pauzę, jaka należy umieścić przed odtwarzaniu zawartości elementu
  • pause - właściwość skrótowa ułatwiająca określenie właściwości pauzy w jednym miejscu
  • pitch-range - określa wariację standardowej wysokości głosu, używana do wprowadzenia modulacji i animacji głosu
  • pitch - określa średnią wysokość (częstotliwość) głosu
  • play-during - określa dźwięk, jaki ma być generowany w tle podczas odtwarzania zawartości elementu strony
  • position - określa metodę pozycjonowania elementów na stronie
  • quotes - definiuje znaki cudzysłowu
  • richness - określa bogactwo, żywość, głosu odtwarzającego element
  • right - właściwość określa odległość od prawej krawędzi
  • size - określa wielkość i orientację bloku strony
  • speak-header - określa, czy nagłówki tabeli będą odtwarzane przed każdą z jej komórek, czy tylko przed komórkami skojarzonymi z innymi nagłówkami niż komórka poprzednia
  • speak-numeral - odtwarza liczby jako pojedyncze cyfry
  • speak-punctuation - znaki przestankowe są odtwarzane dosłownie
  • speak - określa, czy tekst ma być zaprezentowany dźwiękowo oraz w jaki sposób
  • speech-rate - określa szybkość odtwarzania
  • stress - określa wysokość "lokalnych akcentów" w intonacji głosu, kontroluje wielkość modulacji w znacznikach nacisku
  • table-layout - określa sposób, w jaki przeglądarka rysuje tabelę
  • text-align - wyrównuje tekst do lewej lub do prawej albo wyśrodkowuje tekst na stronie lub wewnątrz pojemnika
  • text-decoration - dodaje linie nad lub pod tekstem albo przez tekst
  • text-indent - ustawia wcięcie pierwszego wiersz bloku tekstu
  • text-shadow - pozwala na podanie listy efektów cieni, które mają być zastosowane przy prezentowaniu tekstu umieszczonego wewnątrz elementu
  • text-transform - zmienia wielkość liter w tekście tak, że wszystkie są wyświetlane jako wielkie albo małe lub jako wielkie wyświetlane są pierwsze litery wyrazów
  • top - właściwość określa odległość od górnej krawędzi
  • unicode-bidi - generowanie tekstu dwukierunkowego
  • vertical-align - ustawia podstawę elementu liniowego względem podstawy otaczającej zawartości
  • visibility - określa, czy element będzie wyświetlany
  • visited - określa styl odwiedzonych odnośników
  • voice-family - zawiera listę nazw rodzin głosów, której poszczególne elementy są od siebie oddzielone przecinkami
  • volume - określa średnie natężenie zapisu dźwięku
  • white-space - steruje sposobem wyświetlania przez przeglądarkę znaków spacji znajdujących się w kodzie HTML
  • widows - określa minimalną liczbę wierszy, które muszą się znaleźć na początku drukowanej strony
  • width - ustawia szerokość obszaru zawartości
  • word-spacing - określa odstępy między słowami
  • z-index - steruje warstwami pozycjonowanych elementów

Jednostki w CSS

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 szerokości litery m
    • H1 { margin: 1ex } - w proporcji do wysokości litery x
    • P { font-size: 12px } - piksele (kropki) na ekranie
  • 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)
    • h5 { 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):

  • p { color: rgb(255,0,0) } - zakres liczb całkowitych 0 - 255
  • h1 { color: rgb(100%, 0%, 0%) } - procent dostępnych wartości
  • ul { color: #rrggbb} - wartości heksadecymalne (szesnastkowe) 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.