Kaskadowe arkusze stylów

Kaskadowe arkusze stylów – Wikipedia, wolna encyklopedia

Kaskadowe arkusze stylów

Z Wikipedii, wolnej encyklopedii
Skocz do: nawigacji, szukaj
Disambig.svg Na tę stronę wskazuje przekierowanie ze strony „CSS”. Zobacz też: inne znaczenia skrótu CSS.
Mergefrom.svg
 Zasugerowano, aby artykuł CSS_1 zintegrować z tym artykułem lub sekcją. (dyskusja)
Mergefrom.svg
 Zasugerowano, aby artykuł CSS_2 zintegrować z tym artykułem lub sekcją. (dyskusja)
Ten artykuł jest częścią serii
World Wide Web

Struktura stron WWW

(X)HTML, XML, XSL

Generowanie dynamicznych stron WWW

ASP, ASP.NET, JSP, PHP, Profile MSP

Po stronie użytkownika

CSS, JavaScript, AJAX, Kolory w Internecie

Przesyłanie danych

HTTP(S), HTTP referrer, Serwer WWW, VoiceXML, XMLHttpRequest

Pojęcia

Architektura informacji, Użyteczność (web-usability), Dostępność (WWW)
Nuvola mimetypes source css.png

Kaskadowe arkusze stylów (ang. Cascading Style Sheets, CSS) 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. Pierwszy szkic CSS zaproponował w 1994 r. Håkon Wium Lie[1].

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.

Spis treści

Historia

Pierwotnie HTML był językiem wyłącznie do opisu struktury dokumentu. Jednak z czasem zrodziła się potrzeba ożywienia wyglądu takich dokumentów. Powoli dodawano nowe znaczniki do HTML pozwalające kontrolować kolory, typografię, dodawać nowe media (np. obrazki). Te niestandardowe rozszerzenia realizowane były przez najpopularniejszych producentów przeglądarek bez porozumienia z drugim. Doprowadziło to do zaimplementowania nowych znaczników działających w konkretniej grupie przeglądarek i nie działających w innych przeglądarkach. Projektanci zostali zmuszeni do wysyłania do klienta różnych wersji tej samej witryny w zależności od użytej przeglądarki, uzyskanie identycznego wyglądu w różnych przeglądarkach było praktycznie niemożliwe. Håkon Wium Lie jako pierwszy zaproponował CHSS (Cascading HTML Style Sheets) w październiku 1994 roku. Później Lie i Bert Bos pracowali wspólnie nad standardem CSS (literka H została usunięta ze względu na możliwość stosowania stylów do innych podobnych do HTML języków).

W tym czasie została utworzona organizacja World Wide Web Consortium, która z Lie'em i Bosem na czele przejęła prace nad CSS. Pod koniec 1996 roku wydano oficjalną dokumentację CSS, Kaskadowe arkusze stylów, poziom 1.

W3C zatwierdziło dwa oficjalne standardy CSS: CSS 1 i CSS 2. Przygotowywana jest też zrewidowana wersja CSS o numerze 2.1[2]. CSS 2.1 osiągnęła już status Candidate Recommendation, 13 czerwca 2005 została cofnięta do statusu Working Draft, a 19 lipca 2007 status Candidate Recommendation został ponownie przywrócony.

Trwają również prace nad CSS3. Wersja ta w stosunku do poprzedników wzbogaci się o wiele selektorów oraz właściwości, nowością jest także modułowy charakter języka - nie będzie to już jednolita rekomendacja, lecz kilkadziesiąt osobnych dokumentów, co pozwoli na włączanie lub wyłączanie odpowiednich modułów w przeglądarkach w zależności od chwilowych potrzeb[3].

Obsługa przez przeglądarki

Początki implementacji CSS1

Specyfikacja CSS1 została opublikowana pod koniec 1996. Kilka miesięcy później pojawiła się przeglądarka Internet Explorer 3 zapewniająca podstawową obsługę CSS1. Była to ważna cecha, która dawała przewagę przeglądarce Microsoftu w erze dominacji Netscape Navigatora. Obsługa CSS1 była na tyle dobra, że można było porzucić niestandardowy znacznik <font> i rozpocząć eksperymentowanie z marginesami i innymi elementami układu CSS. Projektanci napotkali jednak problemy związane z niekompletną i pełną błędów implementacją CSS1. Pod koniec 1997 roku światło dzienne ujrzała przeglądarka IE4, w której poprawiono obsługę CSS1.

Netscape po raz pierwszy w wersji 4 zaprezentował interpretowanie CSS1, jednak mimo obsługiwania znacznej części, zawierał sporo rażących błędów. Powszechne było nawet przekonanie, że CSS jest wadliwy. Wielu projektantów porzuciło CSS, błędy w dominującej w tamtym okresie przeglądarce Netscape Navigator spowodowały opóźnienie powszechnego przyjęcia standardu CSS.

CSS 1 we współczesnych przeglądarkach

CSS 1 jest w pełni obsługiwany przez współczesne, popularne przeglądarki tj. oparte na następujących silnikach renderujących stronę:

Jednym z testów sprawdzających CSS 1 jest Acid1.

CSS 2

W CSS 2 i późniejszej wersji 2.1 wprowadzone zostały nowe selektory i właściwości. Teoretycznie stało się np. możliwe wybranie elementu HTML, który jest bezpośrednio pod innym elementem (jest dzieckiem danego elementu). W praktyce użycie wielu z nowych elementów języka przez parę lat uniemożliwiała dominację IE 6 i późniejszego IE 7, którego wsparcie CSS 2.1 jest słabe[4]. Nowsza wersja IE dołączył jednak do pozostałych przeglądarek i w pełni przechodzi m.in. test Acid2, w którym testowane są elementy standardu CSS 2.1.

CSS 3

CSS 3 jest obecnie szczątkowo obsługiwany przez większość najnowszych przeglądarek (np. opacity w Gecko). Właściwości CSS 3 o implementacji znajdującej się w fazie eksperymentalnej opatrzone są prefiksem odpowiednim dla przeglądarki (np. -moz-border-radius dla Gecko, -webkit-border-radius dla WebKit).

Selektory CSS3 są obsługiwane przez wszystkie główne przeglądarki (silniki) poza Internet Explorerem[5][4]. Jednak IE 9, nad którym trwają prace, ma dołączyć pod tym względem do pozostałych[6].

Składnia arkuszy

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[7].

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)

Dodawanie stylów do dokumentu

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="arkusz.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="arkusz.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">p { color: red }</style>

Można również dodawać deklaracje bezpośrednio do danego elementu dokumentu za pomocą atrybutu style:

<p style="color: red">Lorem ipsum</p>

Ta ostatnia metoda nie jest jednak zalecana, ponieważ utrudnia zachowanie spójności w wyglądzie.

Model kaskadowy

Nazwa „kaskadowe arkusze stylów” wynika z faktu, iż gdy reguły CSS wykluczają się wzajemnie w arkuszu 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:

  1. Domyślny arkusz przeglądarki WWW (niezależny od autora strony)
  2. Domyślny arkusz użytkownika przeglądarki (jak wyżej)
  3. Zewnętrzne arkusze stylów i definicje stylów w nagłówku dokumentu
  4. 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.

Zobacz też

Wikibooks
Zobacz publikację na Wikibooks:
CSS

Przypisy

  1. ↑ Håkon Wium Lie: Cascading HTML Style Sheets - A Proposal (ang.). 1994-10-10. [dostęp 2010-06-26].
  2. ↑ Changes (ang.). W: Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification [on-line]. W3C. [dostęp 2010-06-26].
  3. ↑ Module Overview (ang.). W: Introduction to CSS3 [on-line]. W3C, 2001-05-23. [dostęp 2010-06-26].
  4. ↑ 4,0 4,1 Peter-Paul Koch: CSS contents and browser compatibility (ang.). 2009-03-28. [dostęp 2010-06-26].
  5. ↑ CSS3 Selectors Test (ang.). CSS3.info. [dostęp 2010-06-26].
  6. ↑ The CSS Corner: CSS3 Selectors (ang.). ieblog, 2010-05-13. [dostęp 2010-06-26].
  7. ↑ Håkon Wium Lie, Bert Bos: Cascading Style Sheets, level 1 (ang.). W3C, 2008-04-11. [dostęp 2009-08-16].

Bibliografia

Linki zewnętrzne

TOSHIBA notebooki
TOSHIBA notebooki, TOSHIBA laptopy
www.elprobis.com.pl		Badania DNA

www.slady-kryminali…		BMW X6 3.0sd 286KM
BMW X6 3.0sd 286KM
www.mobiliagroup.pl		Łysienie
To nie problem
www.pieknewlosy.info		nezmerte

www.nezmerte.lancom…