(wyświetlania) stron WWW. CSS został opracowany przez

Komentarze

Transkrypt

(wyświetlania) stron WWW. CSS został opracowany przez
Jest to język służący do opisu formy prezentacji (wyświetlania) stron WWW. CSS został opracowany
przez organizację W3C w 1996 r., jako potomek języka DSSSL przeznaczony do używania w połączeniu
z SGML-em.
Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana
przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) (X)HTML lub XML.
Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów
dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp
międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna
przeglądarki. Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania
elementów na stronie, niż oferuje sam (X)HTML.
CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji.
Separacja ta zwiększa zakres dostępności witryny, zmniejsza zawiłość dokumentu, ułatwia
wprowadzanie zmian w strukturze dokumentu. CSS ułatwia także zmiany w renderowaniu strony w
zależności od obsługiwanego medium (ekran, palmtop, dokument w druku, czytnik
ekranowy).Stosowanie zewnętrznych arkuszy CSS daje możliwość zmiany wyglądu wielu stron naraz
bez ingerowania w sam kod (X)HTML, ponieważ arkusze mogą być wspólne dla wielu dokumentów.
Arkusz stylów składa się z reguł określających styl dla wybranych elementów dokumentu (HTML, SVG
i innych). Reguła składa się z selektora oraz deklaracji. Selektor określa grupę elementów (rzadziej
pojedynczy element), którego ma dotyczyć deklaracja. Deklaracja określa formatowanie i składa się z
nazwy jednej z właściwości i jej wartości napisanej po dwukropku. Deklaracja musi być otoczona
nawiasami klamrowymi:
selektor { właściwość: wartość }
Dodatkowo możliwe jest grupowanie zarówno selektorów jak i deklaracji. Zgrupowane selektory
rozdziela się przecinkami, a deklaracje średnikami:
selektor1, selektor2 { właściwość1: wartość1; właściwość2: wartość2;}
Dozwolone jest stosowanie średnika po wszystkich deklaracjach, nie jest jednak dozwolone
stosowanie przecinka po ostatnim selektorze. Ponadto niektóre wartości mogą być zgrupowane i
podane w ramach jednej deklaracji. W takim wypadku składnia zależy od definicji składni zbiorczej
właściwości.
Poniżej podana jest przykładowa reguła dla języka (X)HTML, w której przypisujemy wszystkim
akapitom niebieski kolor tekstu:
p { color: blue; }
Selektorem jest tutaj p, właściwością color, a wartością blue.
Selektory zawarte w pierwszej specyfikacji CSS zapewniają możliwość opisania docelowej grupy
elementów przez:
 nazwę elementu (np. „h1”)
 klasę elementu (np. „.elementy_menu”), także w połączeniu z nazwą elementu (np.
„img.wyrownane_do_prawej”)
 id elementu (np. „#menu_lewe”)
 Przodków danego elementu (np. „div#menu_lewe a” zostanie zastosowane do linków
zawartych w elemencie div o id „menu_lewe”)
 stan linków określany przez pseudoklasy (:visited, :link, :active)
 inne pseudoklasy typograficzne (:first-line, :first-letter)
Dokument można powiązać z arkuszem określając relację tego pierwszego z osobnym dokumentem
CSS za pomocą elementu link:
<link rel="stylesheet" href="style.css" /> <!-- wersja uniwersalna dla (X)HTML -->
W przypadku dokumentu XML (w tym także XHTML serwowanego z XML-owym typem zawartości)
można użyć specyficznej dla XML-a instrukcji przetwarzania:
<?xml-stylesheet type="text/css" href="style.css"?>
Reguły CSS można też umieszczać wewnątrz nagłówka dokumentu (X)HTML oraz w niektórych
dokumentach opartych na XML dzięki elementowi style:
<style type="text/css"><![CDATA[p {color: red;}]]></style>
Model Kaskadowy
Nazwa „kaskadowe arkusze stylów” wynika z faktu, iż gdy reguły CSS wykluczają się wzajemnie
warkuszu zewnętrznym, arkuszu wewnętrznym oraz na poziomie elementów HTML, priorytet stylów
ustalany jest hierarchicznie. Przyjęto, że oddziaływanie stylów z arkuszy zewnętrznych może być
modyfikowane przez style zdefiniowane w nagłówku dokumentu, te zaś mogą być modyfikowane
przez reguły zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo mają zatem style
zdefiniowane „bliżej” formatowanego elementu. Kolejność interpretacji reguł formatujących dany
element przez przeglądarkę przedstawia się następująco:
 Domyślny arkusz przeglądarki WWW (niezależny od autora strony)
 Domyślny arkusz użytkownika przeglądarki (jak wyżej)
 Zewnętrzne arkusze stylów i definicje stylów w nagłówku dokumentu
 Definicje stylów w atrybucie style elementu
Ten model działania pokazuje, w jaki sposób działa kaskada stylów. Między stylami z różnych źródeł
nie muszą zresztą wcale występować żadne konflikty – wszystkie style uzupełnią się, tworząc jeden
wielki „wirtualny” styl.

Podobne dokumenty