Kaskadowe arkusze stylów: Różnice pomiędzy wersjami
| [wersja nieprzejrzana] | [wersja przejrzana] |
Usunięta treść Dodana treść
Nie podano opisu zmian |
Tego typu informacje powinny być czerpane z obszernej, oficjalnej specyfikacji, a nie prywatnych stron o wątpliwej wiarygodności; +wandalizm polegający na usunięciu niemal całego artykułu |
||
Linia 1:
{{WWW}}
[[Plik:Nuvola mimetypes source css.png|thumb|upright=0.5]]
'''Kaskadowe arkusze stylów''' ([[język angielski|ang.]] ''Cascading Style Sheets'', w skrócie '''CSS''') – [[Język arkuszy stylów|język]] służący do opisu formy prezentacji (wyświetlania) stron [[World Wide Web|WWW]]. CSS został opracowany przez organizację [[World Wide Web Consortium|W3C]] w 1996 r. jako potomek języka [[Document Style Semantics and Specification Language|DSSSL]] przeznaczony do używania w połączeniu z [[SGML]]-em. Pierwszy szkic CSS zaproponował w 1994 r. [[Håkon Wium Lie
Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana przez [[przeglądarka internetowa|przeglądarkę internetową]] zawartość wybranego elementu (lub elementów) ([[XHTML|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, [[margines]]y, 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 [[Pozycjonowanie tekstu i obrazka|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.
== 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 konkretnej 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, a także dnia 7 czerwca 2011 roku standard CSS 2.1<ref>{{cytuj stronę | url = http://www.w3.org/2011/05/css-pr.html | tytuł = Cascading Style Sheets Standard Boasts Unprecedented Interoperability | data = 2011-06-07| język = en | data dostępu = 2011-06-09}}</ref>.
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<ref name="W3C: CSS3 Module Overview" />.
== Cele ==
Przed pojawieniem się CSS wszystkie informacje dotyczące wyglądu dokumentów HTML (między innymi rodzaj i kolor czcionki, ułożenie, marginesy) zawarte były w znacznikach [[HTML]]. Język CSS umożliwia przeniesienie tych informacji do osobnego pliku. Skutkuje to uproszczeniem i zwiększeniem przejrzystości samego dokumentu HTML. Bez użycia CSS w przypadku definiowania stylu dla nagłówka (h1) lub podtytułu (h2) jego definicja musiałaby zostać powtórzona w każdym miejscu, w którym pojawia się dana struktura. Efektem takiego działania byłoby zmniejszenie czytelności dokumentu i jego odporności na błędy oraz trudność w utrzymaniu. Dodatkowo, zmiany stylu w jednym z miejsc wiązałyby się z koniecznością wprowadzania zmian w każdym miejscu wystąpienia. CSS pozwala na rozgraniczenie warstwy prezentacji od struktury. [[język programowania|Język]] ten umożliwia definicję kolorów, czcionek, układu, rozmiarów, marginesów oraz wielu innych cech związanych z warstwą prezentacji.
== Wsparcie przeglądarek ==
Ponieważ nie wszystkie [[Przeglądarka internetowa|przeglądarki]] poprawnie tłumaczą kod CSS, niektóre techniki deweloperskie umożliwiają filtrowanie specyficznych [[Przeglądarka internetowa|przeglądarek]] albo kierunkowanie definicji stylów dla wybranych. Obydwa sposoby umożliwiają wyłączanie lub włączanie niektórych definicji stylów dla konkretnych [[Przeglądarka internetowa|przeglądarek internetowych]]. Wykorzystując filtry CSS można nawet osiągnąć różne style dla różnych przeglądarek. Początkowo przeglądarki albo całkowicie nie radziły sobie z plikami CSS albo poziom renderowania był bardzo niski. Wsparcie [[Internet Explorer]]a dla CSS zostało zapoczątkowane w wersji 3.0 i z każdą kolejną wersją wsparcie ulegało poprawie.
Przykładem historycznego problemu związanego z implementacją kaskadowych arkuszy stylów był [[Internet Explorer box model bug|błąd Internet Explorera w interpretacji modelu pudełkowego]]. Błędem dotknięte były przeglądarki [[Internet Explorer]] dla [[Microsoft Windows|Windows]] aż do wersji 6. Efektem tego problemu były różnice w szerokościach elementów blokowych między przeglądarkami internetowymi. Obejściem problemu było zawarcie odpowiedniej Deklaracji Typu Dokumentu ([[Document Type Definition|DOCTYPE]]).
Pomimo faktu, że wiele przeglądarek internetowych poprzez wsparcie CSS wpłynęło pozytywnie na rozwój tego [[język programowania|języka]] to niepoprawna interpretacja kaskadowych arkuszy stylów przez niektóre z nich ciągle ogranicza projektantów. Nawet w dzisiejszych czasach problemy te skutecznie utrudniają projektowanie stylów, a testowanie na maksymalnie wielu przeglądarkach jest nieodłączną częścią pracy.
== 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 w czasach dominacji Netscape Navigatora, pozwalała przeglądarce Microsoftu wysunąć się na prowadzenie. Obsługa CSS1 była na tyle dobra, że można było porzucić niestandardowy znacznik <tt><font></tt> i rozpocząć eksperymentowanie z marginesami i innymi elementami układu strony. W praktyce projektanci napotkali liczne problemy związane z niekompletną i pełną błędów implementacją CSS1. Dopiero począwszy od IE4 który ukazał się pod koniec 1997 roku CSS1 działało prawidłowo.
Netscape w wersji czwartej zaimplementował CSS1 lecz, jak się okazało, z licznymi błędami. Powszechnie uważano, że sam CSS jest wadliwy, a to skłoniło wielu projektantów do jego zarzucenia. W efekcie powszechne uznanie CSS1 za standard, bardzo się opóźniło.
Z dzisiejszej perspektywy jest to [[język programowania|język]] dość prosty, a zarazem dający projektantowi wiele możliwości. Pozwala przede wszystkim dokładnie rozmieścić poszczególne elementy strony oraz stosować warstwy. Jedną z podstawowych właściwości CSS 1 jest [[Model kaskadowy|kaskadowość]]. Pliki stylów dołączone przez autora dokumentu, mogą zostać podmienione przez odbiorcę w celu dopasowania prezentacji do indywidualnych potrzeb. Najważniejsze, że wszystko może być zmodyfikowane w jednym pliku, a tym samym odpadło monotonne i uciążliwe modyfikowanie każdego pliku witryny oddzielnie.
=== 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 [[renderowanie|renderujących]] stronę:
* [[Gecko]] np. [[Mozilla Firefox|Firefox]], [[Camino (przeglądarka)|Camino]], [[SeaMonkey]].
* [[Trident (silnik przeglądarki)|Trident]] głównie [[Internet Explorer]].
* [[Presto (silnik przeglądarki)|Presto]] ([[Opera (przeglądarka)|Opera]]).
* [[WebKit]]/ np. [[Safari (przeglądarka)|Safari]], [[Google Chrome]].
* [[KHTML]] m.in. [[Konqueror]].
Jednym z testów sprawdzających CSS 1 jest [[Acid1]].
=== CSS 2 ===
W CSS 2 rozwiniętym do poziomu 2.1 wprowadzone zostały nowe selektory i właściwości. W nowej wersji właściwościami stylu objęto strukturę dokumentu, oddzielając styl prezentacji dokumentów od ich zawartości. CSS2.1 upraszcza autorskie opracowanie w sieci i konserwację strony. Teoretycznie stało się możliwe wybranie np. 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 dominacja [[Internet Explorer 6|IE 6]] i późniejszego [[Internet Explorer 7|IE 7]], którego wsparcie CSS 2.1 jest słabe<ref name="PPK: CSS contents and browser compatibility" />. Nowsza wersja – [[Internet Explorer 8|IE 8]] – dołączyła jednak do pozostałych przeglądarek i w pełni przechodzi m.in. test [[Acid2]], w którym testowano elementy standardu CSS 2.1.
CSS 2.1 opiera się na CSS 1 i z nielicznymi wyjątkami, wszystkie aktualne style pierwszego poziomu są też obecne w jego następcy. CSS 2.1 obsługuje specyficzne medialne arkusze stylu tak, że autorzy mogą dostosować prezentację swoich dokumentów do wizualnych przeglądarek, urządzeń słuchowych, drukarek, urządzeń Braille’a, urządzeń ręcznych itd. CSS 2.1 wspomaga ustawienie (pozycjonowanie) treści, obsługuje ściągalne czcionki, wspiera układ graficzny tabeli, internalizację, automatyczne liczniki, numerację i niektóre właściwości dotyczące interfejsu użytkownika.
=== CSS 3 ===
Inaczej niż CSS 2, który jest jedną wielką specyfikacją definiującą różne właściwości, CSS 3 podzielony jest na niezależne dokumenty zwane [[Moduł (informatyka)|modułami]]. Każdy moduł zawiera nowe możliwości i rozszerza elementy zdefiniowane w CSS 2, tak, żeby zachowywały [[kompatybilność wsteczna|kompatybilność]] z wersjami wcześniejszymi. Prace nad trzecim poziomem CSS rozpoczęły się krótko po oficjalnej publikacji specyfikacji CSS 2. Najwcześniejsza robocza wersja CSS 3 pojawiła się w czerwcu 1999 roku<ref name=w3c>{{Cytuj stronę | url = http://www.w3.org/Style/CSS/specs | tytuł = W3C: Descriptions of all CSS specifications | data = 2011-02-18 | język = en | data dostępu = 2012-12-04}}</ref>.
W wyniku podziału na moduły poszczególne elementy CSS 3 mają różny status czy poziom stabilności, ale dzięki podziałowi mogą być opublikowane jako obowiązujące niezależnie od etapu pracy nad pozostałymi elementami. Dodano także nowe [[Znacznik meta|znaczniki]] i właściwości. W czerwcu 2012 roku CSS Working Group miało opublikowanych ponad 50 różnych modułów<ref>{{Cytuj stronę | url = http://www.w3.org/Style/CSS/current-work | tytuł = W3C: CSS current work | data = 2011-02-26 | język = en | data dostępu = 2012-12-04}}</ref>, a kilka z nich zostało oficjalnie zarekomendowanych jako standard przez W3C, np.:
* 2012-06-19: typy mediów (''media queries'')<ref>{{Cytuj stronę | url = http://www.w3.org/Style/CSS/specs#mediaqueries | tytuł = W3C: Media queries | język = en | data dostępu = 2012-12-04}}</ref>
* 2011-09-29: przestrzenie nazw (''namespaces'')<ref>{{Cytuj stronę | url = http://www.w3.org/Style/CSS/specs#namespace | tytuł = W3C: Namespaces | język = en | data dostępu = 2012-12-04}}</ref>
* 2011-09-29: selektory (''selectors'')<ref>{{Cytuj stronę | url = http://www.w3.org/Style/CSS/specs#selectors | tytuł = W3C: Selectors Level 3 | język = en | data dostępu = 2012-12-04}}</ref>
* 2011-06-07: kolory<ref>{{Cytuj stronę | url = http://www.w3.org/Style/CSS/specs#color | tytuł = W3C: Color | język = en | data dostępu = 2012-12-04}}</ref>
Niektóre z modułów, np. tła i obramowania<ref name=bb>{{Cytuj stronę | url = http://dev.w3.org/csswg/css4-background/ | tytuł = CSS4: Backgrounds & Borders | język = en | data dostępu = 2012-12-04}}</ref> czy układ wielokolumnowy (''multi-column layout'')<ref>{{Cytuj stronę | url = http://www.w3.org/Style/CSS/specs#multicol | tytuł = W3C: Multi-column Layout | język = en | data dostępu = 2012-12-04}}</ref>, mają nadany status ''CR'' (''Candidate Recommendation''), który uważany jest za raczej stabilny. Dostawcy przeglądarek internetowych itp powinni zatem poprawić dotychczasowe implementacje w celu usuwania tzw. prefiksów dostawców (ang. ''vendor prefix'') w nazwach właściwości. Czyli np. zamiast <code>-moz-border-radius</code> dla [[Gecko]], <code>-webkit-border-radius</code> dla [[WebKit]]<ref>{{Cytuj stronę | url = http://www.w3.org/TR/css-2010/#css | tytuł = W3C: Cascading Style Sheets (CSS) Snapshot 2010 | data = 2010-12-12 | język = en | data dostępu = 2012-12-04}}</ref>, powinno być już zaimplementowane <code>border-radius</code>. W środowisku programistów sieciowych jest także dyskusja czy prefiksy, które początkowo miały umożliwiać wprowadzanie eksperymentalnych właściwości, w ogóle są potrzebne<ref>{{Cytuj stronę|url = http://css-tricks.com/tldr-on-vendor-prefix-drama/|tytuł = TL;DR on Vendor Prefix Drama|autor = Chris Coyier|opublikowany = CSS Tricks|język = en|data dostępu = 2012-02-10}}</ref><ref>{{Cytuj stronę|url = http://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref.html|tytuł = CSS vendor prefixes considered harmful|autor = PPK|opublikowany = QuirksMode|język = en|data dostępu = 2010-03}}</ref>. Wielu sugeruje, że powinny być używane jedynie w bardzo wczesnej fazie implementacji, gdy żaden standard de facto jeszcze nie istnieje i dostawcy nie mogą się zgodzić co do kolejności czy możliwych jednostek w wartościach właściwości.
=== CSS 4 ===
CSS 4 nie istnieje już jako jedna specyfikacja<ref>{{Cytuj stronę | url = http://www.xanthir.com/b4Ko0 | tytuł = A Word About CSS4 | język = en | data dostępu = 2012-12-04}}</ref>. Odkąd CSS 3 został podzielony na moduły, każdy z nich rozwija się niezależnie. Większość z nich jest na poziomie 3, który bazuje na wcześniejszym CSS 2.1. Kilka z nich osiągnęło poziom 4 np. własności grafiki (''image values'')<ref>{{Cytuj stronę | url = http://www.w3.org/TR/css4-images/ | tytuł = CSS4: Image Values | język = en | data dostępu = 2012-12-04}}</ref>, tła i obramowania (''backgrounds & borders''){{r|bb}} czy selektory<ref>{{Cytuj stronę | url = http://www.w3.org/TR/selectors4/ | tytuł = CSS4: Selectors | język = en | data dostępu = 2012-12-04}}</ref>, które oparto na sprawdzonych modułach poziomu 3. Są też całkiem nowe elementy, nad którymi dopiero rozpoczęto prace oznaczone jako poziom 1 np. flexbox<ref>{{Cytuj stronę | url = http://www.w3.org/TR/css3-flexbox/ | tytuł = W3C: Flexbox | język = en | data dostępu = 2012-12-04}}</ref>, który jest swego rodzaju „dynamiczną” tabelą (we wrześniu 2012 oznaczony symbolem ''CR'')<ref>{{Cytuj stronę | url = http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/ | tytuł = W3C: Flexible Box Layout Module – CR | język = en | data dostępu = 2012-12-04}}</ref>.
== Zalety i ograniczenia ==
Największą zaletą CSS jest umożliwienie rozdzielenia warstwy prezentacji od warstwy danych. Dzięki temu możliwe jest definiowanie wielu stylów dla tych samych danych, a sam dokument [[HTML]] jest bardziej przejrzysty i łatwiejszy do utrzymania i dalszego rozwinięcia. Dodatkowo w przypadku potrzeby wprowadzenia zmian w definicji stylu wykorzystanego dla elementu występującego wielokrotnie w dokumencie HTML w pliku CSS zmiany są wprowadzane raz, a zmiana jest adaptowana przez wszystkie elementy. Skutkuje to oszczędnością czasu i pracy.
Z drugiej jednak strony podczas gdy poziome rozmieszczenie jest relatywnie łatwe do wykonania to pionowe rozmieszczenie jest często mało intuicyjne. Proste czynności jak centrowanie elementu pionowo często wymaga skomplikowanych operacji. Oprócz tego CSS uniemożliwia definiowanie nowych zakresów bez względu na aktualną pozycję. Jak również kierunkowanie stylu dla określonej części tekstu (oprócz <code>:first-letter</code>) jest zawiłym zadaniem.
== CSS Frameworks ==
CSS Frameworks to specjalnie stworzone biblioteki, których zadaniem jest ułatwienie definicji stylu dla stron internetowych z wykorzystaniem kaskadowych arkuszy stylów. Przykładem takich bibliotek są: Foundation, Blueprint, [[Twitter Bootstrap|Bootstrap]] oraz Cascade Framework. Podobnie jak w przypadku programowania i bibliotek, CSS Frameworks są zazwyczaj dołączane jako zewnętrzne pliki.css w znaczniku HTML <code><head></code>. Zapewniają one gotowe rozwiązania do projektowania stron.
== 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.
<source lang="css">
selektor { właściwość: wartość }
</source>
Dodatkowo możliwe jest grupowanie zarówno selektorów, jak i deklaracji. Zgrupowane selektory rozdziela się przecinkami, a deklaracje średnikami:
<source lang="css">
selektor1, selektor2 { właściwość1: wartość1; właściwość2: wartość2; }
</source>
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<ref name="W3C: CSS1 Grouping" />.
Poniżej podana jest przykładowa reguła dla języka (X)HTML, w której przypisujemy wszystkim akapitom niebieski kolor tekstu:
<source lang="css">
p { color: blue; }
</source>
Selektorem jest tutaj <code>p</code>, właściwością <code>color</code>, a wartością <code>blue</code>.
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 <code>link</code>:
<source lang="html4strict">
<link rel="stylesheet" href="style.css" /> <!-- wersja uniwersalna dla (X)HTML -->
</source>
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:
<source lang="xml">
<?xml-stylesheet type="text/css" href="style.css"?>
</source>
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 <code>style</code>:
<source lang="xml">
<style type="text/css"><![CDATA[p {color: red;}]]></style>
</source>
Można również dodawać deklaracje bezpośrednio do danego elementu dokumentu za pomocą atrybutu <code>style</code>:
<source lang="xml">
<p style="color: red">Lorem ipsum</p>
</source>
Ta ostatnia metoda nie jest jednak zalecana, ponieważ utrudnia zachowanie spójności w wyglądzie.
== Przykłady ==
Przykład definicji stylu dla pliku xml.
<source lang="xml">
Pracownik {
display:block;
margin: 10px auto 10px 30px;
padding: 0.75em 1em;
width: 200px;
border-style: solid;
border-width: 3px;
border-color: #003366;
background-color: #e1e0df;
}
Pracownik [stanowisko="kierownik"] {
background-color: #002288;
}
Imie, nazwisko {
display:inline;
font-size: larger;
}
Pracownik[stanowisko="kierownik"] nazwisko {
font-weight: bold;
}
</source>
== 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:
# 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 <code>style</code> 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.
== Flexbox ==
Termin flexbox wprowadzono wraz z wejściem specyfikacji CSS2.1, natomiast wsparcie wraz z CSS3. Flexbox opisuje dynamiczny i elastyczny układ strony w zależności od rozmiaru okna przeglądarki.
Podstawowe pojęcia odnoszące się do kontenera:
* display: flex;
* flex-direction: row | row-reverse | column | column-reverse;
* flex-wrap: nowrap | wrap | wrap-reverse;
* flex-flow: <‘flex-direction’> || <‘flex-wrap’>
* justify-content: flex-start | flex-end | center | space-between | space-around;
* align-items: flex-start | flex-end | center | baseline | stretch;
* align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Podstawowe pojęcia odnoszące się do elementów:
* order: <integer>;
* flex-grow: <number>;
* flex-shrink: <number>;
* flex-basis: <length> | auto;
* align-self: auto | flex-start | flex-end | center | baseline | stretch; <ref>{{Cytuj|autor=Łukasz Bącik|tytuł=Flexbox, czyli elastyczne tworzenie stron www|data dostępu=2017-04-14|opublikowany=Flexbox, czyli elastyczne tworzenie stron www {{!}} LukaszBacik.pl|url=https://www.lukaszbacik.pl/blog-p71/flexbox-czyli-elastyczne-tworzenie-stron-www.html|język=pl-PL}}</ref>
== Zobacz też ==
{{wikibooks|CSS}}
* [[Extensible Stylesheet Language|XSL]]
* [[XSL Formatting Objects|XSL-FO]]
* [[Dynamiczny HTML|DHTML]]
* [[Edytor CSS|Edytor stylów]]
* [[Walidator]]
== Przypisy ==
{{Przypisy|
<ref name="Lie: CSS proposal">{{cytuj stronę|url=http://www.w3.org/People/howcome/p/cascade.html|tytuł=Cascading HTML Style Sheets – A Proposal|autor=Håkon Wium Lie|data=1994-10-10|język=en|data dostępu=2010-06-26}}</ref>
<ref name="PPK: CSS contents and browser compatibility">{{cytuj stronę|url=http://www.quirksmode.org/css/contents.html|tytuł=CSS contents and browser compatibility|autor=Peter-Paul Koch|data=2009-03-28|język=en|data dostępu=2010-06-26}}</ref>
<ref name="W3C: CSS1 Grouping">{{cytuj stronę| url = http://www.w3.org/TR/CSS1/#grouping | tytuł = Cascading Style Sheets, level 1 | autor = Håkon Wium Lie | autor2 = Bert Bos| opublikowany = W3C | data = 2008-04-11 | język = en | data dostępu = 2009-08-16}}</ref>
<ref name="W3C: CSS3 Module Overview">{{cytuj stronę|url=http://www.w3.org/TR/css3-roadmap/#modlist|tytuł=Module Overview|data=2001-05-23|praca=Introduction to CSS3|opublikowany=W3C|język=en|data dostępu=2010-06-26}}</ref>
}}
== Bibliografia ==
* {{cytuj książkę|autor=[[Jeffrey Zeldman]] |tytuł=Projektowanie serwisów WWW. Standardy sieciowe. Wydanie II|wydawca=Helion|rok=2007|isbn = 83-246-0774-9}}
== Linki zewnętrzne ==
* [http://www.w3.org/TR/REC-CSS1 Kaskadowe arkusze stylów, poziom 1]
* [http://www.w3.org/TR/REC-CSS2 Kaskadowe arkusze stylów, poziom 2]
* [http://www.w3.org/TR/CSS21 Kaskadowe arkusze stylów, poziom 2 korekta 1]
* [http://www.w3.org/Style/CSS/current-work Kaskadowe arkusze stylów, poziom 3]
{{Kontrola autorytatywna}}
| |||