R_D_07.PDF

Dodatek D.

Krótki przewodnik

po kaskadowych

arkuszach stylów (CSS)

Kaskadowe arkusze stylów dają zaawansowane możliwości rozmieszczania i

wyświetlana na stronach zarówno tekstu, jak i obrazów. Dzięki nim, z ogromną

precyzją można umieszczać na stronach tekst, obrazy oraz inne elementy

multimedialne. W tym dodatku umieściłam krótkie opisy właściwości CSS1 oraz tych

właściwości i wartości CSS2, jakie pojawiły się w rekomendacji CSS2 z dnia 12 maja

1998 roku. Aktualnie jest to najnowsza wersja tego dokumentu.

Informacje podane w tym dodatku bazują na rekomendacji W3C kaskadowych arkuszy

stylów poziomu 2 ( Cascading Style Sheets , Level 2), z dnia 12 maja 1998 roku. Dokument

ten można znaleźć na WWW pod adresem:

http://www.w3.org/TR/REC-CSS2/ .

Aby ułatwić dostęp do informacji, właściwości przedstawione w tym dodatku zostały

zorganizowane w następujący sposób:

właściwości bloku,

właściwości tła i koloru,

właściwości modelu blokowego,

właściwości czcionek,

właściwości list,

właściwości tekstu,

właściwości efektów wizualnych,

głosowe właściwości arkuszy stylów,

właściwości zawartości wygenerowanej/automatycznego numerowania,

właściwości mediów stronicowanych,

968

HTML 4 — Vademecum profesjonalisty

właściwości tabel,

właściwości interfejsu użytkownika,

jednostki stosowane w kaskadowych arkuszach stylów.

Jak korzystać z tego dodatku

Każda właściwość zawiera informacje podane w następującej kolejności:

zastosowanie — opis właściwości,

wartości CSS1 — poprawna składnia oraz wartości dostępne w CSS1,

wartości CSS2 — poprawna składnia oraz wartości dostępne w CSS2,

wartość początkowa — początkowa wartość właściwości,

stosowana do — elementy dla jakich można użyć danej właściwości,

dziedziczona — czy właściwość jest dziedziczona,

notatki — informacje dodatkowe.

Określanie wartości CSS jest doświadczeniem wymagającym cierpliwości i ścisłego

stosowania się do zasad logiki. Aby określić wartości wszystkich właściwości

opisanych w tym dodatku, powinieneś posługiwać się schematem przedstawionym

poniżej.

rtości różnych typów są rozróżniane w następujący sposób:

słowa kluczowe — słowa kluczowe to identyfikatory, takie j

czy też inherit . Nie są one zapisywane w cudz

ak: red , auto , normal

ysłowach

proste typy danych — te wartości, na przykład, <liczba> lub <długość>

są zapisywane w nawiasach kątowych; oznaczają one faktyczne wartości podawan

w arkuszach stylów. Koniecznie należy zwrócić uwagę, iż oznaczenia te jedynie

określają typ danych i nie stanowią

opisane pod koniec tego dodatku,

odwołania skrótowe — wartości zapisane w nawiasach kątowych i apostrofach

jak, na przykład, <'background-color'> we właściwości background ,

określają uproszczoną, skrótową metodę podania wartości. Wartości określone w

background-color mogą zostać użyte we właściwości background . Jeśli, na

przykład, b

sposoby:

body { background: red } lub body { background-color: red } ,

predefiniowane typy danych — wartości zapisane w nawiasach kątowych j

bez apostrofów, na przykład, <obramowanie-grubość> we właściwości

border-top-width , przypominają proste typy danych, jednak zawierają wart

predefiniowane. Na przykład, dostępne warto

faktycznej wartości. Proste typy danych zostały

ędziesz chciał określić kolor tła dokumentu, możesz to zrobić na dwa

ednak

ości

ści <obramowanie-grubość>

to: thin , thick , medium oraz <długość> .

Dodatek C. Porównanie możliwości przeglądarek

969

Jeś

cyc

li właściwość będzie mieć kilka wartości, zostaną one zapisane według następują-

h reguł.

sąsiednie słowa — kilka sąsiadujących ze sobą słów oznacza, że wszystkie war

muszą zostać podane, jednak ich kolejność jest dowolna,

wartości oddzielone pionową kreską „|” — pionowa kreska oddziela wartości

alternatywne, z których można użyć tylko jednej,

wartości odd

oddzielają opcje, z których można wybrać jedną lub kilka i podać w dowolnej

kolejności,

tości

zielone dwiema pionowymi kreskami „||” — dwie pionowe kreski

nawiasy prostokątne „[]” — nawiasy prostokątne grupują wartości w wyrażenia,

obliczane podobnie jak wyrażenia matematyczne.

ie mają wyższy priorytet, niż wartości oddzielone dwoma piono-

wymi kreskami, a te z kolei mają wyższy priorytet od wartości oddzielonych pojedyn-

czą pionową kreską.

datkowo, po każdej wartości lub grupie wartości może się pojawić modyfikator.

używane modyfikatory:

Oto

* ( gwiazdka ) — umieszczony przed nią typ, słowo lub grupa może się pojawić

dowolną ilość razy (w tym, w ogóle),

+ ( plus ) — umieszczony przed nią typ, słowo lub grupa może się pojawić raz

lub kilka razy,

? ( znak zapytania ) — umieszczony przed nim typ, słowo lub grupa jest opcjonaln

{} ( nawiasy klamrowe ) —

otaczające parę cyfr, na przykład, {1, 2} określają,

że umieszczony wcześniej typ, słowo lub grupa może się pojawić o najmniej raz

i co najwyżej dwa razy.

Właśc

iwości bloku

Elementy blokowe to te, które są wizualnie przedstawione w postaci bloków. Przykła-

dowo, są to listy i akapity.

bottom, left

, right

, top

Zastosowanie

za-

owała od odpowiedniej dolnej, lewej,

prawej lub górnej krawędzi bloku zewnętrznego, w którym został

umieszczony blok zawartości.

Określając wartości, podane w tym dodatku, kolejność jaką należy przyjąć jest następu-

jąca: wartości sąsiedn

Określa, w jakiej odległości dolna, lewa, prawa lub górna krawędź

wartości bloku będzie się znajd

970

HTML 4 — Vademecum profesjonalisty

Wartości CSS2

<długość> | <wartość

_procentowa> | auto | inherit

Wartość początkowa auto

Stosowana do

Wszystkich elementów.

Dziedziczona

Nie.

Uwagi

Wartości procentowe odnoszą się do wysokości bloku zewnętrznego.

direction

Zastosowanie

Określa kierun

układu kolum

ek tekstu bloku wpisanego, kierunek tekstu osadzonego,

ny oraz rozkładu zawartości.

Wartości CSS1

ltr |

rtl

Wartości CSS2

inherit

Wartość począ ltr

tkowa

Stosowa

na do

Wszystkich elementów.

Dziedziczona

Tak.

Uwagi

Patrz właściwość unicode-bidi , która jest kolejną właściwością

związaną z kierunkiem wyświetlania tekstu osadzonego.

display

Zastosowanie

Określa, w jaki sposób ma być generowana zawartość bloku.

Wartości CSS1

inline | block | list-item

Wartości CSS2

group | table-column-group | table-header-

table-footer-group | table-row | table-cell |

e | inherit

ble-row-

group |

table-caption | non

Wartość począ inli

tkowa

Stosowana do

Wszystkich elementów.

Dziedz

iczona

Nie.

Dodatek C. Porównanie możliwości przeglądarek

971

float

Zastosowanie

Określa, czy blok może być przesuwany w prawo lub lewo czy nie.

Wartości CSS1

none | left | right

Wartości CSS2

inhe

rit

Wartość początkowa none

Stosowana d

Elementów, których położenie nie zostało określone bezwzględnie.

Dziedziczona

Nie.

position

Zastosowanie

Określa, ja

do określe

ki algorytm umiejscawiania dostępny w CSS2 ma być użyty

nia współrzędnych bloku.

Wartości CSS2

static | <wielkość_względna> | <wielkość_bezwzględna>

xed | inherit

| fi

Wartość początkowa static

Stosowana do

Wszystkich elementów prócz zawartości wygenerowanej.

Dziedziczona

Nie.

unicode-bidi

Zastosowanie

Otwiera no

wym w sytu

nym kierunku są zagłębione na wi

wy poziom osadzania związany z algorytmem dwukierunko-

acji, gdy elementy o zawartości wyświetlanej w przeciw-

ęcej niż jeden poziom.

Wartości CSS2

norm

al | embed | bidi-override | inherit | normal

Wartość początkowa normal

Stosowana

Wszystkich elementów.

Dziedziczona

Nie.

z-index

Zastosowanie

Określa

układania.

kolejność ułożenie bloku oraz, czy określa on lokalny kontekst

Wartości CSS2

auto

| <liczba_całkowita> | inherit

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: