Najważnie 4-5 miesięczna (już tylko za opłata za pozycjonowaniu strony
Najważnie 4-5 miesięczna (już tylko za opłata za pozycjonowaniu strony
Reklama w internecie mnóstwo źródeł tanich, bądź nawet darmowych linków. Słabe linki są jednak bezwartości Page Rank strony:
| World Wide Web |
|
Struktura stron WWW Generowanie dynamicznych stron WWW Active Server Pages, ASP.NET, JavaServer Pages, PHP Po stronie użytkownika kaskadowe arkusze stylów, JavaScript, AJAX, kolory w Internecie Przesyłanie danych Hypertext Transfer Protocol, HTTPS, HTTP referrer, serwer WWW, VoiceXML, XMLHttpRequest Pojęcia |
Kaskadowe arkusze stylów (ang. Cascading Style Sheets ; w skrócie CSS) to język służący do opisu formy prezentacji (wyświetlania) stron WWW. CSS stał się 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 albo 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 albo nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki. Wykorzystanie arkuszy stylów daje wydatnie większe możliwości pozycjonowania elementów na stronie, niż oferuje sam (X)HTML.
CSS stał się zbudowany 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, albowiem arkusze bywają wspólne dla wielu dokumentów.
Spis treści |
Pierwotnie HTML był językiem jedynie 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 oraz nie działających w innych przeglądarkach. Projektanci zostali zmuszeni do wysyłania do klienta wielorakich wersji tej samej witryny w zależności od użytej przeglądarki, uzyskanie identycznego wyglądu w wielorakich 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 oraz Bert Bos pracowali wspólnie nad standardem CSS (literka H była usunięta ze względu na możliwość stosowania stylów do innych podobnych do HTML języków).
W tym czasie była utworzona organizacja World Wide Web Consortium, która z Lie'em oraz 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 oraz CSS 2, a także dnia 7 czerwca 2011 roku standard CSS 2.1[2].
Trwają także 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 albo wyłączanie odpowiednich modułów w przeglądarkach w zależności od chwilowych potrzeb[3].
Specyfikacja CSS1 była opublikowana pod koniec 1996. Kilka miesięcy później ukazał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 da się było porzucić niestandardowy znacznik <font> oraz rozpocząć eksperymentowanie z marginesami oraz innymi elementami układu strony. W praktyce projektanci napotkali rozliczne problemy związane z niekompletną oraz 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 nader prosty a równocześnie dający projektantowi wiele możliwości. Umożliwia przede wszystkim dokładnie rozmieścić poszczególne elementy strony oraz stosować warstwy. Jedną z podstawowych właściwości CSS 1 jest kaskadowość. Pliki stylów dołączone przez autora dokumentu, potrafią zostać podmienione przez odbiorcę w celu dopasowania prezentacji do indywidualnych potrzeb. Najważniejsze, że wszystko bywa zmodyfikowane w jednym pliku, a tym samym odpadło monotonne oraz uciążliwe modyfikowanie każdego pliku witryny oddzielnie.
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.
W CSS 2 zmodyfikowanym do stabilnej wersji 2.1 wprowadzone zostały nowe selektory oraz 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 oraz 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 IE 6 oraz późniejszego IE 7, którego wsparcie CSS 2.1 jest słabe[4]. Nowsza wersja IE dołączyła jednak do pozostałych przeglądarek oraz w pełni przechodzi m.in. test Acid2, w którym testowano elementy standardu CSS 2.1. CSS 2.1 ma za podstawę na CSS 1 oraz z nielicznymi wyjątkami, wszystkie aktualne style wersji pierwszej są też obecne w wersji drugiej. CSS 2.1 obsługuje specyficzne medialne arkusze stylu tak, że autorzy potrafią 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ę oraz pewne właściwości dotyczące interfejsu użytkownika.
CSS 3 jest aktualnie szczątkowo obsługiwany przez przeważajaca ilość 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).
Arkusz stylów składa się z reguł określających styl dla wybranych elementów dokumentu (HTML, SVG oraz innych). Reguła składa się z selektora oraz deklaracji. Selektor wyznacza grupę elementów (rzadziej pojedynczy element), którego ma dotyczyć deklaracja. Deklaracja wyznacza formatowanie oraz składa się z nazwy jednej z właściwości oraz 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 oraz 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 pewne wartości bywają zgrupowane oraz podane w ramach jednej deklaracji. W takim wypadku składnia zależy od definicji składni zbiorczej właściwości[5].
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:
Dokument da się 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) da się użyć specyficznej dla XML-a instrukcji przetwarzania:
<?xml-stylesheet type="text/css" href="style.css"?>
Reguły CSS da się też umieszczać wewnątrz nagłówka dokumentu (X)HTML oraz w poniektórych dokumentach opartych na XML dzięki elementowi style:
<style type="text/css"><![CDATA[p {color: red;}]]></style>
Można także 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, albowiem utrudnia zachowanie spójności w wyglądzie.
Nazwa „kaskadowe arkusze stylów” wynika z faktu, iż kiedy 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 bywa modyfikowane przez style zdefiniowane w nagłówku dokumentu, te zaś bywają modyfikowane przez reguły zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo posiadają zatem style zdefiniowane „bliżej” formatowanego elementu. Kolejność interpretacji reguł formatujących dany element przez przeglądarkę przedstawia się następująco:
style elementuTen model działania pokazuje, w jaki sposób działa kaskada stylów. Między stylami z wielorakich źródeł nie muszą zresztą wcale występować żadne konflikty – wszystkie style uzupełnią się, tworząc jeden wielki „wirtualny” styl.
