2. Umieszczanie stylów w dokumencie HTML
Style można dołączać na cztery różna sposoby. Dwa z nich dotyczą włączania stylów zdefiniowanych w oddzielnych plikach, a dwa pozostałe - definiowania stylów "inline". Sposoby te przedstawia poniższy przykład:
<link rel=stylesheet href="http://ładne.style.com.pl/jakiśstyl.css"> - definicja zewnętrznego stylu występująca w sekcji <head> dokumentu.
@import url(http://ładne.style.com.pl/jakiśstyl.css); - definicja zewnętrznego stylu występująca w elemencie <style>.
H1 { color: blue } - definicja stylu w elemencie <style>.
<p style="color: green">zielono mi</p> - definicja stylu w atrybucie elementu.
Ponieważ przeglądarki ignorują nieznane elementy języka HTML dobrą zasadą jest ukrywanie zawartości elementu <style>, gdyż mógłby on zostać po prostu wyświetlony przez starsze przeglądarki, które nie obsługują stylów. Zatem style umieszcza się w komentarzach:
<style><!--
H1 { color: red }
--></style>
Język CSS przewiduje trzy poziomy stylów: domyślny (ustawiany w przeglądarce), czytelnika (specyfikowany przez użytkownika przeglądarki w sposób przez nią umożliwiany) i autora (definiowany w dokumencie). Poziomy te są ustawione od najmniej ważnego do najważniejszego, tzn. deklaracja zmiany koloru czcionki ustawiona w dokumencie jest ważniejsza niż deklaracja czytelnika. Można jednak zwiększyć wagę deklaracji poprzez dodanie "! important" np.:
autor zadeklarował: H1 { color: silver; }
czytelnik zaś: H1 { color: red ! important; } - zatem tekst nagłówków będzie czerwony. Gdyby nie było oznaczenia "! important" w deklaracji czytelnika tekst został by pokazany w kolorze srebrnym.
3. Składnia
Definicja każdego stylu składa się z dwóch elementów: selektora, który określa do jakich elementów HTML ma odnosić się dany styl (np. H1 oznacza wszystkie elementy <h1>) i deklaracji opisującej sposób wyświetlania. Deklaracja składa się z listy par "właściwość: wartość" (np. color: brown). Selektor może zawierać:
a) nazwy elementów HTML do których odnosi się dany styl, np.:
H1 { text-decoration: underline; } - nagłówki stopnia pierwszego będą podkreślone
b) kombinacje elementów do których odnosi się dany styl, np.:
H1 EM { color: green; } - emfaza występująca wewnątrz nagłówka <h1> będzie zielona
c) klasy elementów, np.:
H1.środeczek { text-align: center; } - wszystkie elementy <h1> klasy "środeczek" będą wycentrowane
.czerwony { color: red; } - wszystkie elementy klasy "czerwony" będą czerwone
d) identyfikatory elementów (niewskazana), np.:
#j-23 { background-color: black; } - element o atrybucie id równym "j-23" będzie posiadał czarne tło
H1#jamesbond { background-color: white; } - element <h1> o identyfikatorze "jamesbond" będzie posiadał białe tło
e) pseudo-klasy i pseudo-elementy, odnoszące się do właściwości niektórych elementów, np.:
P:first-letter { font-size: 200%; }
A:link { color: green; } - kolory hiperłączy będą zielone. Ponieważ pseudo-klasa "link" odnosi się tylko do elementów <a>, nazwę można pominąć i napisać:
:link { color: green; } - efekt jak wyżej
f) kombinacje i listy wyżej wymienionych elementów:
H1, H3, EM { color: green; } - elementy <h1>, <h3> i <em> będą zielone
H1 EM, H3.rambo, A.czarna:visited { color: black; } - element <em> występujący wewnątrz <h1>, element <h3> klasy "rambo" oraz odwiedzone hiperłącze klasy "czarna" będą miały kolor czarny
4.1 Czcionki
font-family - Specyfikuje rodzinę fontów które zostaną użyte do wyświetlania tekstu. Może zawierać kilka nazw, które powinny być oddzielone przecinkami (dla zaznaczenia, że są to alternatywy). Nazwy zawierające spacje powinny zostać ujęte w cudzysłowy. Może zawierać predefiniowane nazwy rodzin: serif, sans-serif, cursive, fantasy, monospace. Przykład:
font-style - Wybiera styl czcionki z wyspecyfikowanej przez font-family rodziny czcionek. Przyjmuje wartości normal, italic i oblique. Przykład (font family: gill sans mt shadow):font-variant - Ustawianie sposobu wyświetlania małych liter. Przyjmuje wartości normal i small-caps. Przykład:font-weight - Grubość czcionki. Przyjmuje wartości normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Przykłady (font-family: arial):font-size - Wielkość czcionki. Przyjmuje wartości czterech rodzajów: xx-small, x-small, small, medium, large, x-large, xx-large - wielkości czcionek zdefiniowane przez przeglądarkę, od najmniejszego do największego; larger, smaller - wielkość czcionki większa, mniejsza niż poprzednio, N%, Njednostek. Przykłady:font - Skrótowy zapis właściwości font-style, font-variant, font-weight, font-size, line-height i font-family. Możliwa jest następująca składnia: [[style] [variant] [weight]] size[/height] family. Przykłady:
4.2 Kolory i tła
color - Kolor elementu. Jako wartości może przyjmować nazwy kolorów zdefiniowane w tablicy kolorów, zapis szesnastkowy typu #rgb lub #rrggbb oraz zapisy dziesiętne 0-255 w postaci rgb(r,g,b) i procentowe rgb(r%,g%,b%). Przykłady:
color: green
color: #f0f
color: #00ff80
color: rgb(0,0,255)
color: rgb(100%,50%,0%)
Pseudo-klasa :link - Określa kolor hiperłącza.
Pseudo-klasa :visited - Określa kolor odwiedzonego hiperłącza.
Pseudo-klasa :active - Określa aktywnego hiperłącza.
background-color - Kolor tła. Może przyjmować wartości takie jak color oraz wartość transparent (przezroczysty). Przykłady:
To było wcześniej niemożliwe
background-image - Specyfikuje obrazek, który ma zostać użyty jako tło. Akceptowane wartości to url(URL) bądź none. Przykłady:
background-image: url(images/bluedot.gif)
background-repeat - Sposób powtarzania obrazka tła. Akceptowane wartości: repeat, repeat-x, repeat-y, no-repeat - powtarzaj w pionie i poziomie, powtarzaj w poziomie, w pione, nie powtarzaj. Przykład.
repeat-x
repeat-y
no-repeat
background-attachment - Określa, czy tło jest wyświetlane względem położenia elementu czy względem okna przeglądarki. Akceptowane wartości: scroll (przewijaj tło), fixed (wyświetlaj cały czas w tym samym miejscu). Zobacz przykład.
background-position - Określa położenie lewego górnego narożnika obrazka względem lewego górnego narożnika elementu. Akceptowane wartości to {(n%[ m%])|(npt[ mpt])|(left|center|right[ top|center|bottom])}. Pierwsza wartość z pary specyfikuje położenie w poziomie, druga natomiast (opcjonalna, domyślnie 1/2 wysokości) położenie w pionie. Przykłady:
background-position: left center;
background-position: -5pt -5pt;
background-position: 50% 50%;
background - Skrótowy zapis właściwości background-color, background-image, background-repeat, background-attachment, background-position. Występuje składnia: [color][image][repeat][attachment][position]. Przykłady:
background: silver url(images/greendot.gif) no-repeat center center
background: url(images/bluedot.gif)
center top repeat-y #f70
4.3 Tekst
word-spacing - Odstęp pomiędzy wyrazami. Akceptowane wartości: normal lub (zwiększ o) Njednostek. Przykłady:
word-spacing: normal
word-spacing: 10pt
word-spacing: 4em
letter-spacing - Odstęp pomiędzy literami. Akceptowane wartości: normal lub (zwiększ o) Njednostek. Przykłady:
letter-spacing: normal
letter-spacing: 4pt
letter-spacing: 1em
text-decoration - Specyfikuje "ozdobniki" tekstu. Akceptowane wartości: none, underline, line-through, overline, blink. Przykłady:
text-decoration: underline
text-decoration: line-through
text-decoration: overline
text-decoration: blink
text-decoration: underline overline line-through blink
vertical-align - Specyfikuje wertykalne położenie obiektu. Przyjmowane wartości możne podzielić na trzy grupy. Pierwsza to wartości relatywne do elementu otaczającego: baseline (równaj do linii bazowej rodzica), middle (wypośrodkuj), sub (pisz na pozycji subskryptu), super (pisz na pozycji superskryptu), text-top (równaj do góry), text-bottom (równaj do dołu). Druga grupa to wartości relatywne do linii w której znajduje się element: top (równaj do góry najwyższego w linii) bottom (równaj do dołu najniższego w linii). Trzecia grupa to wartości +-N%, odnoszących się do "normalnej" pozycji elementu (np. -100% to opuszczenie elementu tak, by znajdował się tam gdzie normalnie powinna być następna linia). Przykłady:
Tekst bazowy vertical-align: baseline
Tekst bazowy vertical-align: middle
Tekst bazowy vertical-align: sub
Tekst bazowy vertical-align: super
Tekst bazowy vertical-align: text-top
Tekst bazowy vertical-align: text-bottom
tekst wysoko tekst nisko vertical-align: top
tekst wysoko tekst nisko vertical-align: bottom
text-transform - Sposób transformacji tekstu zawartego w elemencie. Akceptowane wartości: none, capitalize, uppercase, lowercase - nie rób nic, każdy wyraz znacznik wielką literą, wszystko wielką literą, wszystko małą literą. Przykład:
TO jest TeKsT który zostanie PODDANY trANsfORmaCJI
text-transform: capitalize; TO jest TeKsT który zostanie PODDANY trANsfORmaCJI
text-transform: uppercase; TO jest TeKsT który zostanie PODDANY trANsfORmaCJI
text-transform: lowercase; TO jest TeKsT który zostanie PODDANY trANsfORmaCJI
text-align - Sposób wyrównania tekstu. Akceptowane wartości: left, right, center, justify - do lewej, prawej, centruj, justuj. Przykłady:
text-align: left
text-align: center
text-align: right
text-indent - Wielkość wcięcia pierwszej linii elementu. Akceptowane wartości: N% lub Njednostek. Przykłady:
text-indent: 2cm czyli wcięcie 2 centymetry
a nowa linia już od brzegu
line-height - Ustawia odstęp między liniami bazowymi. Akceptowane wartości: normal (domyślna), N, Njednostek, N%. Różnica między wartościami N i N% polega na tym, że elementy zawarte w pierwszym wypadku odziedziczą wartość podaną, natomiast w drugim - wartość wyliczoną. Przykład:
line-height: 10pt
linia pod nią
line-height: 80%
linia pod nią
inna linia
odstęp ten sam
line-height: 0.8
linia pod nią
inna linia
odstęp jest inny chyba że to N 4
Teraz coś ekstra wycentrowanie i wyrównanie do prawej w jednej linii
Pseudo-element :first-line - Określa parametry pierwszej linii elementu.
Pseudo-element :first-letter - Określa parametry pierwszej litery elementu.
4.4 Formatowanie elementu
Każdy element umieszczony w dokumencie traktowany jest jako obiekt o następującym wyglądzie:
| zewnętrzna górna krawędź | ||||||||||
| górny margines | ||||||||||
| górna ramka | ||||||||||
| górny odstęp | ||||||||||
| wewnętrzna górna krawędź | ||||||||||
| zewnętrzna lewa krawędź | lewy margines | lewa ramka | lewy odstęp | wewnętrzna lewa krawędź | zawartość | wewnętrzna prawa krawędź | prawo odstęp | prawa ramka | prawy margines | zewnętrzna prawa krawędź |
| wewnętrzna dolna krawędź | ||||||||||
| dolny odstęp | ||||||||||
| dolna ramka | ||||||||||
| dolny margines | ||||||||||
| zewnętrzna dolna krawędź | ||||||||||
margin-top margin-right margin-bottom margin-left margin - Ustawianie marginesu elementu. Przyjmowane wartości to Njednostek, N% bądź auto. Wartości procentowe odnoszą się do szerokości elementu otaczającego. Właściwość margin pozwala ustawić cztery wyżej wymienione właściwości, podając od jednej do czterech wartości. Przy jednej wartości przyjmowana jest ona dla wszystkich właściwości, przy dwóch - pierwsza dla top/bottom druga dla left/right, zaś przy trzech - pierwsza dla top, druga dla left/right, trzecia dla bottom. Można podawać wielkości ujemne. Przykłady:margin-left: 10pt |
margin-right: 10pt |
margin: 10pt 20pt |
margin: auto |
padding-top padding-right padding-bottom padding-left padding - Ustawianie odstępu elementu. Przyjmowane wartości to Njednostek bądź N%. Wartości procentowe odnoszą się do elementu otaczającego. Właściwość padding pozwala ustawić cztery wyżej wymienione właściwości, podając od jednej do czterech wartości. Przy jednej wartości przyjmowana jest ona dla wszystkich właściwości, przy dwóch - pierwsza dla top/bottm druga dla left/right, zaś przy trzech - pierwsza dla top, druga dla left/right, trzecia dla bottom. Przykłady:border-top-width border-right-width border-bottom-width border-left-width border-width - Ustawianie wielkości ramki elementu. Przyjmowane wartości to thin, medium, thick bądź Njednostek. Właściwość border-width pozwala ustawić cztery wyżej wymienione właściwości, podając od jednej do czterech wartości. Przy jednej wartości przyjmowana jest ona dla wszystkich właściwości, przy dwóch - pierwsza dla top/bottm druga dla left/right, zaś przy trzech - pierwsza dla top, druga dla left/right, trzecia dla bottom. Przykłady:border-color - Ustawienie koloru ramek. Przyjmuje od jednej do czterech wartości. Przykłady:border-style - Styl wyświetlania ramki. Akceptowane wartości to: none, dotted, dashed, solid, double, groove, ridge, inset, outset. Przykłady:border-top border-right border-bottom border-left border - Właściwości ustawiające w skrócony sposób border-width, border-style i kolor ramki dla jej odpowiednich części bądź dla całości. Przyjmuje składnię [border-?-width] [border-style] [color]. Mogą wystąpić kłopoty przy N 4 i IE 4. Przykłady:width - Szerokość elementu. Przyjmowane wartości to Njednostek, N% bądź auto. Przy ustawieniu innym niż auto przeglądarka powinna rozciągnąć/zwęzić obiekt do podanych rozmiarów, zachowując stosunek x/y jeśli właściwość height ma wartość auto. N 4 ma problemy. Zobacz przykłady.heightfloat - Definiuje sposób opływania (obłamywania) obiektu przez tekst. Przyjmuje wartości left, right, none - tekst ma opływać obiekt z prawej (obiekt dosunięty do prawego marginesu), z lewej (obiekt dosunięty do lewego marginesu), bądź też obiekt ma być wyświetlony tam gdzie akurat wypada, następna linia będzie pod nim. N 4 ma problemy. Zobacz przykład.clear - Właściwość określająca, czy dany element może opływać inny. Przyjmuje wartości none, left, right, both - czyli element ten może mieć pływające elementy po obu bokach, nie może mieć takiego z lewej strony, z prawej, z obu. Zobacz przykład.
4.5 Klasyfikowanie elementu
display - Sposób formatowania elementów. Przyjmuje wartości block, inline, list-item i none. Elementy posiadające wartość block właściwości display będą wyświetlane każdy w oddzielnej linii, są to np. <h1> lub <p>. Elementy inline mogą być wyświetlane w tej samej linii. Wartość list-item powoduje, że element jest traktowany jako zawartość elementu-ojca i zostanie wyświetlony wewnątrz jego ramki. Wartość none wyłącza wyświetlanie obiektu. Przykłady:
O dziwo
w tej linii
są
trzy paragrafy! No chyba że masz IE 4
<p style="display: inline;">O dziwo <p style="display: inline;"> w tej linii <p style="display: inline;"> są <p style="display: inline;"> trzy paragrafy!
white-space - Sposób traktowania białych znaków. Przyjmuje wartości normal (dowolna ilość następujących białych znaków traktowana jest jak jeden), pre (tekst preformatowany - odzwierciedl go jeden do jednego) i nowrap (złam linię tylko po napotkaniu <br>). IE 4 ma kłopoty. Przykłady - normal zielony, pre czerwony, nowrap (może nie działać) niebieski:list-style-type - Określa sposób zaznaczania elementów z właściwością display ustawioną na list-item. Przyjmuje wartości: disc (kółeczko, domyślnie), circle (okrąg), square (kwadracik), decimal (liczby arabskie), lower-roman (liczby rzymskie, małe litery), upper-roman (liczby rzymskie, wielkie litery), lower-alpha (małe litery), upper-alpha (duże litery), none (nic). Przykłady:list-style-image - Obrazek zaznaczający elementy z właściwością display ustawioną na list-item. Przyjmuje wartości typu url(adresURL). N 4 ma kłopoty. Przykład:list-style-position - Pozycja tekstu w elemencie listy, który jest przeniesiony do następnej linii. Przyjmuje wartości inside i outside. Zarówno N 4 jak IE 4 mają kłopoty. Przykłady:list-style - Skrócony zapis wartości dla właściwości list-style-type, list-style-image i list-style-position. Przyjmuje wartości [image] [type] [position]. Przykłady:
4.6 Jednostki
CSS1 definiuje następujące jednostki:
5.1 Typy mediów
Style zostały wymyślone po to by umożliwić jak najpełniejszą kontrolę nad wyglądem dokumentu. Jednak w epoce multimediów ekran komputera jest tylko jedną z wielu form prezentowania dokumentu. Można go przecież także wydrukować, pokazać na telewizorze, rzutniku czy terminalu tekstowym, wreszcie próbować przetworzyć przez syntezator mowy czy braila. Tworzenie różnych wersji tego samego dokumentu byłoby uciążliwe, dlatego też w CSS2 wprowadzono możliwość tworzenia styli dla różnych typów mediów, a także właściwości specyficzne np. dla syntezatorów. Pozwala to stworzyć np. dwa style - jeden do prezentacji dokumentu na ekranie, a drugi na drukarce (gdzie np. nie ma sensu prezentowanie migających czcionek). W CSS2 nie ma zdefiniowanej i ustalonej "z góry" listy rozróżnianych typów mediów, podane są jednak nazwy które już powinny zostać rozróżniane. Są to:
| Grupy mediów | |||
|---|---|---|---|
| continous, paged | visual, aural, tactile | grid, bitmap | |
| Typy mediów | |||
| all | + | + | + |
| aural | continous | aural | - |
| braile | continous | tactile | grid |
| embossed | paged | tactile | grid |
| handheld | + | visual | + |
| paged | + | + | |
| projection | paged | + | + |
| screen | continous | + | + |
| tty | continous | + | grid |
| tv | + | visual, aural | + |
@media - Po tym selektorze powinna wystąpić lista oddzielonych przecinkami nazw mediów i ujęta w nawiasy klamrowe definicja stylu. Przykłady:
5.2 Przetwarzanie z podziałem na strony (paged media)
Dokument na ekranie komputera jest przedstawiony w postaci ciągłej, tzn. mamy pełną możliwość jego przewijania, cofania, ustawiania na zadaną linię itd., dlatego też możemy do niego wprowadzać długie tabele czy rysunki, które, choć w całości nie mieszczą się na ekranie, możemy obejrzeć "po kawałku". Podczas drukowania tego typu dokumentu na pojedynczych kartkach może się zdarzyć, że tabela bądź rysunek zostaną ucięte w połowie, lub że tytuł podrozdziału zostanie wydrukowany na poprzedniej stronie. Wprowadzony w CSS2 mechanizm tworzenia różnych stylów dla różnych mediów pozwala na zapobieganie takim zdarzeniom. Służy do tego selektor:
@page - Selektor zawierający właściwości związane z wielkością i orientacją strony, marginesami itd. Przykład:
@page { margin: 2cm; } - Ustawia wszystkie marginesy każdej strony na 2 centymetry.
Selektor ten może zawierać następujące właściwości:
margin-top margin-right margin-bottom margin-left margin
size - Rozmiar i orientacja strony. Akceptowana składnia Njednostek, auto, portrait, landscape. Specyfikując parę dwóch pierwszych wartości podajemy szerokość i wysokość strony. Przykłady:
@page { size: auto; } - Przeglądarka dostosuje rozmiar stron dokumentu do stron drukarki.
@page { size: 21cm 29.7cm; } - Rozmiar strony A4.
marks - Ustawia rodzaj celowników, drukowanych np. w celu pozycjonowania kartek. Akceptowane wartości: crop, cross, none - celownik do wyrównywania kartek, do zaznaczania miejsca cięcia, żaden.
Pseudo-klasy :left :right :first - Specyfikują właściwości dla lewej, prawej i pierwszej strony. Przykłady:
@page:left { margin-left: 2cm; } - Każda lewa strona będzie miała dwucentymetrowy lewy margines.
@page:right { margin-right: 2cm; } - Każda prawa strona będzie miała dwucentymetrowy prawy margines.
@page:first { size: landscape; } - Pierwsza strona będzie drukowana w pozycji landscape.
Następujące właściwości nie występują w selektorze @page, lecz odnoszą się do stronicowania dokumentów.
page-break-before page-break-after - Właściwości ustawiane w elementach, specyfikujące czy można i jak łamać stronę przed (before) lub po (after) elemencie. Akceptowane wartości to: auto (zostawienie wyboru przeglądarce), always (zacznij nową stronę), avoid (staraj się nie zaczynać nowej strony), left (złam stronę raz lub dwa, tak by zawartość wyszła po lewej), right (złam stronę raz lub dwa, tak by zawartość wyszła po prawej). Przykłady:
P { page-break-before: left; } - Każdy paragraf na lewej stronie.
H1 { page-break-before: always; } - Tytuł od nowej strony.
DIV { page-break-after: avoid; } - Staraj się umieścić tekst z bloku na jednej stronie.
orphans widows - Bękarty i szewce. Składnia: N linii. Podana wartość całkowita określa ile linii musi zostać na dole (bękart) lub górze (szewc) nowej strony, by ją zaczynać. Przykłady:
BODY { widows=2; } - Jeśli zaczniesz nową stronę, musisz mieć conajmniej 2 linie tekstu u góry.
5.3 Przetwarzanie przez syntezatory mowy (aural media)
CSS2 udostępnia szeroki wachlarz właściwości wspomagających przetworzenie dokumentów HTML przez syntezatory mowy, co umożliwia dostęp do nich przez osoby np. niewidome lub nie umiejące czytać (małe dzieci). Możliwe jest ustawianie głośności oraz tempa czytania, można podać melodię która ma być odgrywana w tle podczas czytania wskazanych bloków tekstu lub pomiędzy nimi. Można nawet zasymulować konwersację kilku osób, określając ich tony oraz kierunki, z których mówią. Ponieważ autor tego tekstu w chwili jego powstawania nie dysponował na tyle zaawansowanym technicznie sprzętem oraz przeglądarką by mógł to sprawdzić, opisy właściwości podane zostaną bez przykładów. Te właściwości to:
volume - Ustawianie głośności. Akceptowane wartości to: N (N to głośność absolutna od 0 do 100), N% (np. 50% - pół tonu ciszej, 200% - dwa razy głośniej), silent (cisza), x-soft (cichutko=0), soft (cicho=25), medium (normalnie=50), loud (głośno=75), x-loud (bardzo głośno=100).
speak - Sposób wymawiania tekstu. Akceptowane wartości: normal (wymowa naturalna), none (nie wymawiaj), spell-out (przeliteruj).
pause-before pause-after pause
- Określa pauzę która ma nastąpić przed lub po przeczytanym bloku tekstu. Przyjmuje wartości Njednostek (s - sekundy, ms - milisekundy) lub N%. W przypadku wartości procentowych odnoszą się one do średniego czasu wymowy słowa w właściwości speech-rate (np. 120 słów na minutę =~1 słowo/500ms, czyli 20% to pauza 100ms). Właściwość pause może przyjąć parę argumentów - specyfikują wtedy odpowiednio pause-before i pause-after. W przypadku jednej wartości oba ustawiane są tak samo.
cue-before cue-after cue - Właściwość specyfikuje dźwięk, który ma być odegrany przed lub po odczytaniu bloku tekstu. Przyjmuje wartości url(adres_dźwięku) bądź none. Właściwość cue może przyjąć parę argumentów - specyfikują wtedy odpowiednio dźwięki cue-before i cue-after. W przypadku jednej wartości oba ustawiane są tak samo.
play-during - Specyfikuje dźwięk, który ma być odgrywany podczas czytania bloku tekstu. Przyjmowane wartości: uri(adres_dźwięku), mix, repeat, auto, none. Wartość mix powoduje że dźwięk odgrywany przy czytaniu otaczającego elementu jest miksowany z aktualnym; repeat - dźwięk ma być powtarzany, jeśli jest za krótki; auto - kontynuuj odgrywanie dźwięku z elementu otaczającego; none - nie graj nic.
azimuth - Kąt poziomy, z którego ma dobiegać dźwięk. Akceptowane wartości to: Ndeg (N stopni, z zakresu -360, 360; 0deg=z przodu, 90deg=z prawej, 270deg=-90deg=z lewej itd.), left-side (=270deg), far-left (=300deg), behind far-left (=240deg), left (=320deg), behind left (=220deg), center-left (=340deg), behind center-left (=200deg), center (=0deg), behind (=180deg), center-right (=20deg), behind center-right (=160deg), right (=40deg), behind right (=140deg), far-right (=60deg), behind far-right (=120deg), right-side (=90deg), leftwards (odejmij 20deg od aktualnego kierunku), rightwards (dodaj 20deg do aktualnego kierunku). Wartości można podawać w stopniach (deg), gradusach (grad) i radianach (rad).
elevation - Kąt pionowy, z którego ma dochodzić dźwięk. Akceptowane wartości to: Ndeg (N stopni, z zakresu -90, 90; 0deg=w poziomie, -90deg=z dołu, 90deg=z góry), below (=-90deg), level (=0deg), above (=90deg), higher (dodaj 10deg do aktualnego kierunku), lower (odejmij 10deg od aktualnego kierunku). Wartości można podawać w stopniach (deg), gradusach (grad) i radianach (rad).
speech-rate - Tempo mówienia. Akceptowane wartości to: N (N słów na minutę), x-slow (bardzo wolno), slow (wolno), medium (normalnie), fast (szybko), x-fast (bardzo szybko), slower (wolniej niż aktualnie), faster (szybciej niż aktualnie).
voice-family - Oddzielona przecinkami lista rodzajów głosów, które mają być użyte do czytania tekstu (ułożona wg preferencji). Np. voice family: romeo, male; - do odczytania tekstu użyj głosu romeo, jeśli nie takiego nie ma to głosu male.
pitch - Ton. Przyjmowane wartości to: Njednostek (Hz bądź kHz), x-low (bardzo nisko), low (nisko), medium (normalnie), high (wysoko), x-hight (bardzo wysoko).
pitch-range - Zakres zmian tonu, jako wartość przyjmuje liczbę N (N=0 czytanie płaskie i monotonne, N=50 czytanie normalne, N>50 czytanie z przebarwioną intonacją).
stress - Nacisk. Przyjmuje wartość N (domyślnie 50).
richness - Barwa głosu. Przyjmuje wartość N (domyślnie 50). Wartości wysokie dają ton porywający, niskie - słodki.
speak-punctation - Określa sposób traktowania znaków interpunkcyjnych: code - czytaj znaki interpunkcyjne (np. ciocia jest zdrowa przecinek aczkolwiek ma chrypkę nawias lewy lekką nawias prawy kropka), none - czytaj naturalnie (zawieszając głos gdzie trzeba).
speak-date - Sposób odczytywania daty. Akceptowane wartości to: mdy (miesiąc, dzień, rok), dmy (dzień, miesiąc, rok), ymd (rok, miesiąc, dzień).
speak-numeral - Sposób czytania liczb. Akceptowane wartości: digits (czytaj poszczególne cyfry, 127=jeden, dwa, siedem), continuous (czytaj naturalnie, 127=sto dwadzieścia siedem), none (???).
speak-time - Sposób podawania czasu. Akceptowane wartości to 12 (14=druga po południu), 24 (14=czternasta), none (???).
5.4 Przetwarzanie wizualne (visual media)
CSS2 rozszerza model wizualny o następujące właściwości:
position - Sposób pozycjonowania elementu. Akceptowane wartości to normal, relative, absolute, fixed. Wartość normal (domyślna) oznacza, że dany element ma zostać umiejscowiony przez przeglądarkę. Wartość relative - podane wartości przesunięć odnoszą się pozycji, jaką miałby ten element z ustawioną wartością normal. Wartość absolute określa, że pozycjonowanie odbywa się względem elementu otaczającego. Wartość fixed - pozycjonowanie odbywa się względem okna przeglądarki.
top right bottom left - Właściwości te określają nową pozycję elementu, kalkulowaną zgodnie z metodą ustawioną we właściwości position. Przyjmowane wartości to Njednostek, N% bądź auto.
direction - Kierunek, w jakim wyświetlane są kolejne elementy. Akceptowane wartości: ltr (z lewej na prawo), rtl (z prawej na lewo), ltr-override (z lewej na prawo, obchodząc algorytmy UNICODE), rtl-override (z prawej na lewo, obchodząc algorytmy UNICODE).
z-index - Kolejność do wyświetlenia. Wartością jest liczba określająca pozycję w kolejce do wyświetlania, bądź auto. Przydatne, gdy np. chcemy wyświetlić parę nachodzących na siebie elementów. Im niższa liczba, tym element leży "bliżej tła".
border-top-style border-right-style border-bottom-style border-left-style border-style - Ustawianie stylu wyświetlania ramki. Właściwość border-style może jako wartość przyjąć listę oddzielonych spacjami stylów. Zobacz border-style.
min-width max-width min-height max-height - Właściwość określająca minimalną/maksymalną szerokość/wysokość, jaką przeglądarka może ustawić w przypadku elementów skalowanych (np. tabel). Akceptowane wartości: Njednostek lub N%.
overflow - Określa sposób wizualizacji elementów których rozmiary wykraczają poza element otaczający, lub też znajdują się poza nim. Akceptowane wartości: visible (powiększ otaczający element tak, by pomieścił całą zawartość), hidden (pokaż tylko tyle ile się zmieści), scroll (umożliw przewijanie zawartości), auto (rób co uważasz). Działa z elementami których właściwość position ma wartość absolute.
clip - Określa rozmiary i położenie regionu, który reprezentuje element w dokumencie (np. dla wykrywania zdarzeń typu onmouseover. Akceptuje wartości: auto - region ma wymiary elementu, lub rect(Njednostek|auto,Mjednostek|auto,Ojednostek|auto,Pjednostek|auto) - region, którego odpowiednie boki są osunięte o N (góra), M (prawo), N (dół), O (lewo) jednostek od regionu elementu otaczającego. Negatywne wartości są akceptowane.
visibility - Określa, czy dany element będzie wyświetlany, czy nie. Akceptowane wartości: visible (pokazuj), hidden (nie pokazuj).
cursor - Typ kursora wyświetlany nad danym elementem. Składnia: typ-kursora url(kursor_do_ściągnięcia). Akceptowane typy kursora: auto (kursor przeglądarki), crosshair (celownik), default (domyślna dla danej platformy, np. strzałka), pointer (kursor wskazujący hiperłącze), move (kursor do przeciągania), [n|ne|e|se|s|sw|w|nw]-resize (strzałki poszerzania ramek), text (kursor tekstowy), wait (klepsydra), help (kursor dla pomocy). Przykład:
DIV { cursor: text url(biegnący_prosiaczek.cur); } - kursor tekstowy dla elementów <div> będzie biegnącym prosiaczkiem.
Przykłady
5.5 Dobór czcionek
Mechanizmy zastosowane w CSS1 pozwalały na dobranie do odpowiedniego bloku tekstu czcionki (font-family), jej grubości (font-weight) czy wielkości (font-size). CSS2 dodaje do tego możliwość tworzenia nowych rodzin czcionek, lub definiowania domyślnych parametrów czcionek używanych w dokumencie. Służy do tego selektor @font-face.
@font-face - Selektor grupujący właściwości dla czcionki lub rodziny czcionek.
Właściwości występujące tylko w selektorze @font-face:
font-family Oddzielona przecinkami lista nazw czcionek i rodzin czcionek. Zobacz też font-family.
font-style Oddzielona przecinkami lista stylów czcionek. Zobacz też font-style.
font-variant Oddzielona przecinkami lista wariantów czcionek. Zobacz też font-variant.
font-weight Oddzielona przecinkami lista grubości czcionek. Zobacz też font-weight, przy czym nie można używać wartości bolder i lighter, można użyć nową wartość - all.
font-size Oddzielona przecinkami lista wielkości czcionki. Zobacz też font-size, przy czym nie można używać wartości relatywnych, można natomiast użyć nową wartość - all.
unicode-range Oddzielona przecinkami lista zakresów kodu Unicode, dla których zdefiniowano czcionki. Format: U+N[-M], gdzie N i M to liczby szesnastkowe z zakresu od 0 do 7fffffff. Dozwolone jest używanie znaków zapytania jako jokerów. Przykłady:
unicode-range: U+1234; - Zdefiniowany jest jeden znak.
unicode-range: U+0-100, U+200-400; - Zdefiniowano znaki z zakresów 0-100 i 200-400.
unicode-range: U+1??; - Zdefiniowano znaki z zakresu od 100 do 1ff.
units-per-em. Specyfikuje wielkość jednostki 1em (ilość linii). Akceptowana wartość to numer z zakresu od 16 do 16384. Przykładowe wartości to 1000 dla Type 1, 2048 dla TrueType.
src Specyfikuje adres danych czcionki. Przyjmowana składnia to oddzielona przecinkami lista elementów typu: {url(adres_sieciowy) [format(format1[,format2[,...]])]|local(nazwa_czcionki)}. Przykłady:
src: url(fonty/moje/truetype/font0) format(truedoc), local(times-iso new roman);
src: url(http://zenek.com/ala.cgi?graphite) format(intellifont, type1);
src: local(graphite light att);
panose-1 stemv stemh slope cap-height x-height ascent descent - Właściwości używane w algorytmach doboru czcionek, szerzej opisane w dokumentacji CSS2 (patrz źródła).
widths definition-src - Właściwości używane w algorytmach aproksymacji czcionek, szerzej opisane w dokumentacji CSS2 (patrz źródła).
baseline - Poziom linii bazowej (dolnej) danej czcionki. Zobacz też units-per-em.
centerline - Poziom linii środkowej. Zobacz też units-per-em.
mathline - Poziom linii symboli matematycznych (domyślnie taki sam jak centerline). Zobacz też units-per-em.
topline - Poziom linii górnej. Zobacz też units-per-em.
Nowe właściwości dotyczące czcionek:
font-size-adjust - Przeskalowanie czcionki zastępczej. Akceptowane wartości: z (skaluj tak, by wielkości litery 'x' czcionki starej i nowej były takie same), none (nic nie rób).
5.6 Tabele
CSS2 definiuje dziesięć nowych wartości właściwości display, odnoszących się do tabel. Są to:
table - Element jest tabelą (HTML - <table>).
table-inline - Element jest tabelą inline (wyświetlany jest w tej samej linii).
table-column-group - Element jest kontenerem właściwości dla grupy kolumn (HTML - <colgroup>).
table-column - Element jest kontenerem właściwości dla kolumny (HTML - <col>).
table-row-group - Element jest kontenerem właściwości dla grupy wierszy (HTML - <tbody>).
table-header-group - Element jest kontenerem właściwości dla grupy wierszy będących nagłówkiem tabeli (HTML - <thead>).
table-footer-group - Element jest kontenerem właściwości dla grupy wierszy będących stopką tabeli (HTML - <tfoot>).
table-row - Grupuje wiersz komórek (HTML - <tr>).
table-cell - Komórka tabeli (HTML - <td>).
table-caption - Etykieta tabeli (HTML - <th>).
z ich pomocą można sformatować tabelę korzystając np. z elementów <span> z odpowiednimi właściwościami. CSS2 definiuje też nowe właściwości, zastępujące atrybuty elementów HTML:
column-span - Określa ile kolumn tabeli zajmuje jedna komórka.
row-span - Określa ile wierszy tabeli zajmuje jedna komórka.
border-collapse - Określa, czy komórka z włączoną ramką ma mieć zewnętrzny margines. Akceptowane wartości: collapse (nie), separate (tak).
Właściwość border-style odnosząca się do tabeli może przyjmować wartość hidden - przy ramkach bez marginesu (collapse) wyłączana jest także ta ramka, z którą dana się styka.
table-layout - Sposób rysowania tabeli. Przyjmuje wartości auto (wieloprzebiegowy algorytm, wolny, elegancka tabela), fixed (algorytm szybki, wszystkie komórki takie same).
Pseudo-klasy :row[n] :row[%n] :row[%n+m] :row-odd :row-even :column[n] :column[%n] :column[%n+m] :column-odd :column-even - Odnoszą się do: n-tego wiersza/kolumny (:row[7] - siódmy wiersz), co n-tego wiersza/kolumny (:column[%5] - co piąta kolumna), co n-tego wiersza/kolumny, zaczynając od m-tego (:row[%3+1] - wiersz 1, 4, 7 itd.), odd - nieparzyste, even - parzyste. Numeracja wierszy/kolumn zaczyna się od zera.
Przykłady
5.7 Selektory
CSS2 rozszerza mechanizmy selektorów o następujące konstrukcje:
* - Pasuje do każdego elementu.
A > B - Pasuje do każdego elementu B, który leży bezpośrednio lub pośrednio w elemencie A.
A:first-child - Pseudo-klasa, określająca pierwszy element który będzie leżał w elemencie A.
A + B - Pasuje do każdego elementu B poprzedzonego przez element A.
A[ala] - Pasuje do każdego elementu A z atrybutem ala.
A[ala="makota"] - Pasuje do każdego elementu A z atrybutem ala ustawionym na "makota".
A[ala~="makota"] - Pasuje do każdego elementu A z atrybutem ala ustawionym na listę oddzielonych spacjami wartości, z których jedna to "makota".
Przykłady
5.8 Inne
Prawie wszystkim właściwościom CSS2 można przypisać wartość inherit, oznaczającą, że właściwa wartość powinna zostać odziedziczona po elemencie otaczającym.
text-shadow - Specyfikuje ilość i wygląd zastosowanego dla danego tekstu efektu cienia. Składnia: none (brak efektu), lub oddzielona przecinkami lista: kolor Njednostek Mjednostek [Ojednostek]. Kolor określa kolor cienia, N - przesunięcie cienia na prawo od tekstu (wartości ujemne - na lewo). M - przesunięcie do dołu od tekstu (ujemne - do góry). O - opcjonalne, wielkość rozmycia cienia.
Pseudo-klasa :hover - Określa kolor hiperłącza gdy użytkownik przesunął na nie kursor myszki.
Pseudo-klasa :before :after - Selektor zawierający nazwę elementu z ustawioną pseudo-klasą :before lub :after powinien zawierać właściwość content, specyfikującą tekst wstawiany automatycznie przed lub po danym elemencie.
content - Zawiera tekst wstawiany automatycznie przed lub po elemencie, który jest selektorem dla danej definicji, wraz z pseudo-klasą :before lub :after.
Nowe nazwy kolorów: activeborder, activecaption, appworkspace, background, buttonface, buttonhighlight, buttontext, captiontext, graytext, highlight, hightlighttext, inactiveborder, inactivecaption, inactivecaptiontext, infobackground, infotext, menu, menutext, scrollbar, threeddarkshadow, threedface, threedhighlight, threedlightshadow, threedshadow, window, windowframe, widnowtext - będące kopiami kolorów z pulpitu użytkownika.
Przykłady