CSS.doc

CSS – podstawy

Wstęp

Czym są style? Jest to potężne narzędzie do formatowania stron WWW (CSS – Cascading Style Sheets – Kaskadowe Arkusze Stylów). Dają one ogromne możliwości manipulowania wyglądem dokumentów
i zwiększają efektywność narzędzi. Dodatkowo nie powodują problemów w przeglądarkach, które ich nie obsługują. Styl jest zespołem poleceń formatujących i pozwala zmieniać wygląd pojedynczych elementów strony lub nawet całej serii dokumentów. Jest on dobrze znany ze zwykłych edytorów tekstu, gdzie od dawna zajmuje ważne miejsce.

Niestety część poleceń stylów nie jest interpretowana przez niektóre przeglądarki internetowe lub jest obsługiwana odmiennie. Dotyczy to szczególnie bardziej skomplikowanych deklaracji. Dlatego należy stosować je uważnie i zawsze sprawdzać efekty w praktyce (jeśli to możliwe, to najlepiej w kilku najbardziej popularnych przeglądarkach: Internet Explorer, Netscape, Opera). To co na twoim komputerze wygląda poprawnie, wcale nie musi wyglądać tak samo u kogoś innego!

Przeglądarki wprowadzają interpretację stylów stopniowo - w kolejnych aktualizacjach. Są one obsługiwane m.in. przez: Netscape Communicator 4.x i 6, Internet Explorer 4, 5, 6 oraz Opera 5 i 6. Obsługa stylów w IE3 jest szczątkowa i często niepoprawna.

Po co w ogóle wprowadzono style? Dzięki temu, że polecenia formatujące zawiera sam HTML, przodujące na rynku przeglądarek internetowych firmy, zaczęły wprowadzać rozszerzenia w swoich produktach (np. animacja Marquee w Internet Explorerze czy migotanie tekstu w Netscape Communicator). Te ulepszenia jednak nie były oficjalnie zawarte w specyfikacji języka HTML i dlatego interpretowały je tylko te konkretne przeglądarki, w których zostały wprowadzone. Prowadziło to do swoistej „anarchii”. Dzięki wprowadzeniu stylów można stopniowo rezygnować z formatowania dokumentu bezpośrednio za pomocą samego HTML i zacząć to robić poprzez polecenia stylów. Język HTML nie będzie już więcej zmieniany i pozostanie w swej początkowej formie.

Edytory

Style można oczywiście pisać „ręcznie”, ponieważ jest to zwykły tekst (tak jak w przypadku samego HTML). Lecz stosowanie specjalnych edytorów przyspiesza i ułatwia nam pracę oraz zmniejsza ryzyko popełnienia błędów. Pozwalają nam one zdefiniować np.: wielkość i kolor czcionki, kolor odsyłaczy, tła czy marginesy tekstu (za pomocą specjalnych generatorów). Kolorowanie składni sprawia, że natychmiast odnajdziemy wszystkie błędy.

Kreatory stylów (wizards) są najczęściej wbudowane w edytory HTML. Powstały także specjalne edytory stylów. Do najlepszych tego typu programów należy TopStyle firmy Bradbury software, z którego darmowej wersji Lite będziemy korzystać.

Korzyści z używania stylów

Arkusze stylów są bardzo proste w nauce, dając jednocześnie olbrzymie możliwości nieosiągalne przy pomocy samego HTML-a:

1. Style stały się już praktycznie podstawowym narzędzie formatującym. Jeśli poważnie myślisz o zajęciu się projektowaniem stron WWW, koniecznie musisz je poznać.
2. Przestarzałe atrybuty i znaczniki, znajdujące się bezpośrednio w składni HTML, które dotyczą formatowania, będą stopniowo wycofywane przez producentów przeglądarek internetowych, na rzecz rekomendowanych analogicznych deklaracji stylów. Widać już nawet różnice pomiędzy IE4 a IE5.
3. Dokumenty pisane z wykorzystaniem arkuszy stylów są zwykle bardziej przejrzyste i krótsze.
4. Style pozwalają w łatwy sposób zarządzać całą serią dokumentów, poprzez stosowanie zewnętrznych arkuszy stylów. Dzięki temu w łatwy i wygodny sposób, można dokonać modyfikacji rodzaju formatowania jednocześnie we wszystkich dokumentach, zmieniając dane tylko w jednym pliku.
5. Dzięki możliwości stosowania klas selektorów, znacznie oszczędzamy sobie pisania. W jednym miejscu określamy wszystkie atrybuty formatowania (których może być bardzo dużo), odnoszące się do wielu elementów, które mają wyglądać tak samo. Bezpośrednio przy elemencie wystarczy podać tylko nazwę klasy i nie musimy już wypisywać "litanii" poleceń. Znacznie przyspiesza to późniejszą modyfikację strony, ponieważ zmian dokonujemy tylko w jednym miejscu, a wpływają one na wiele elementów jednocześnie.
6. Możliwość stosowania różnorodnych jednostek oraz sposobów definiowania kolorów.
7. 
   Style dają autorowi możliwości, które do tej pory były praktycznie niemożliwe do osiągnięcia:

-          różne wartości pogrubienia czcionki (9 rodzajów),

-          dodatkowe możliwości formatowania tekstu,

-          nowe własności tła,

-          obramowanie,

-          dodatkowe właściwości wykazów (list),

-          nowy model obramowania tabeli,

-          pozycjonowanie,

-          zmiana kształtu kursora,

-          zmiana wyglądu odsyłacza, po wskazaniu go myszką,

-          kolor suwaków,

-          efektowne filtry graficzne,

-          dodatkowe możliwości określenia wyglądu dokumentów podczas ich drukowania,

-          wiele innych.

Dodatkowo w ciągłym opracowaniu są style poziomu trzeciego (CSS3), które oferują jeszcze więcej rozwiązań. Aby dowiedzieć się więcej, sprawdzaj stronę organizacji W3C oraz najnowsze specyfikacje.

Metody wstawiania stylów

Mamy do dyspozycji trzy podstawowe metody wstawiania stylów do dokumentu. Możemy stworzyć arkusz stylów jako zewnętrzny plik; wówczas z takiego arkusza możemy korzystać w kilku dokumentach jednocześnie. Można cały blok stylów umieścić w kodzie dokumentu. Można wreszcie definiować style indywidualnie dla każdego znacznika.

Kaskadowość stylów

Już sama nazwa stylów, Cascading Style Sheets, sugeruje istotną cechę stylów - ich ka­skadowy charakter. Co to znaczy?

Powiedzieliśmy, że style mogą być wprowadzane bezpośrednio w ciele dokumentu, w nagłówku (Head), a mogą też pochodzić z zewnętrznych źródeł, np. arkuszy wzorcowych. Konieczne jest więc ustalenie hierarchii ważności w przypadku konfliktu stylów. Może się bowiem zdarzyć, że zewnętrzny arkusz definiuje akapit za pomocą czcionki Times 12pt, w nagłówku strony akapit jest reprezentowany przez czcionkę Helvetica 11pt, a w samym dokumencie pojawia się akapit zdefiniowany za pomocą czcionki Times 11pt. Problem więc w tym, która definicja ma pierwszeństwo i jaka jest ich hierarchia.

Kaskadowość, od której wzięły nazwę style, polega na ustaleniu porządku źródeł stylów. Wszystkie sposoby odwoływania się do stylów są ułożone w pewnej hierarchii. Można to obrazowo przedstawić następująco:

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 style zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo mają zatem style zdefi­niowane „bliżej” konkretnego elementu. Między stylami z różnych źródeł nie muszą zresz­tą wcale występować żadne konflikty - wszystkie style uzupełnią się, tworząc jeden wiel­ki, „wirtualny” styl.

Modelowo wygląda to tak, że przeglądarka sprawdza najpierw, czy istnieją jakieś ze­wnętrzne arkusze stylów i stosownie do ich definicji formatuje stronę. Następnie spraw­dza, jakie są definicje stylów w nagłówku strony i modyfikuje wygląd zgodnie z ich usta­leniami. Następnie sprawdza style w ciele dokumentu i ponownie modyfikuje fizyczną postać strony. To oczywiście model działania, ale pokazuje on, jak działa taka kaskada stylów. Stąd właśnie nazwa.

Ta zasada pozwala też, co szczególnie ważne, wygodnie manipulować postacią całych kompleksów stron. Można na przykład ustalić pewne ogólne cechy całej witryny firmy i zawrzeć je w zewnętrznym arkuszu stylów. Następnie można zbudować odrębne arkusze dla wydziałów firmy i zawrzeć w nich bardziej konkretyzującą informację. Po ustaleniu hierarchii arkuszy można łatwo definiować style dla dziesiątek i setek stron, a jedna drob­na zmiana w arkuszu powoduje zmiany we wszystkich objętych nimi dokumentach.

CSS – tekst(1)

Wyrównanie tekstu

SELEKTOR { text-align: wyrównanie }

Selektorem może być dowolny znacznik HTML, w którym można wpisywać tekst (np.: P - paragraf, Hn - tytuł czy TD - komórka tabeli)

Wartością właściwości może być:

-          left – wyrównanie do lewej strony,

-          right – wyrównanie do prawej strony,

-          center – wyrównanie do środka strony,

-          justify – wyrównanie do obu stron (justowanie).

Jeśli w edytorze znaczników HTML wstawimy znacznik paragrafu (<p>…</p>) i jako styl wpiszemy: text-align:justify,

to tekst wyświetlany w tym akapicie na stronie WWW będzie wyrównywał do lewej i prawej strony:

Widzimy przy okazji, na czym polega definiowanie stylu dla pojedynczego znacznika. Warto czasem zastosować tę metodę, choćby dlatego, by się przekonać jak wygląda działanie jakiegoś stylu. Na dłuższą metę jednak takie działanie byłoby uciążliwe. Zbudujemy teraz stronę, na której znajdą się dwa nagłówki rzędu drugiego (h2) i trzy akapity (p). Styl wyrównania tekstu musielibyśmy wpisać aż dla pięciu znaczników
(a w przypadku bardziej rozbudowanej strony dla dużo większej ich liczby). Wygodniej będzie umieścić wewnętrzny arkusz stylów w części nagłówkowej dokumentu.

W edytorze znaczników HTML utwórz teraz nową stronę. Ustaw kursor w części nagłówkowej kodu
i wstaw znacznik <style> z zakładki Style:

Kod arkusza stylów moglibyśmy oczywiście wpisywać ręcznie, ale przy bardziej rozbudowanych arkuszach jest to czasochłonne. Posłużymy się zatem wspomnianym wcześniej programem TopStyle Lite. Uruchom teraz ten program.

W panelu Inspektora Stylów (po prawej stronie) wybierz z listy rozwijalnej np. Internet Explorer 5, po czym kliknij ikonę narzędzia New selector. W oknie dialogowym wybierz znacznik body i kliknij przycisk [OK].

W panelu Inspektora Stylów odszukaj właściwość text-align i wybierz dla niej wartość justify:

Podobnie dla znacznika h2 ustal wartość center. Teraz zaznacz myszką cały kod zbudowanego arkusza stylów, skopiuj go do schowka i wklej
w kodzie tworzonej strony pomiędzy znacznikami <style></style>:

Jeśli teraz w kodzie strony wstawimy dwa nagłówki (tytuły) rzędu drugiego (h2) i trzy (lub więcej) akapity (p), nie nadając im żadnych atrybutów, to wyrównanie ich tekstów będzie zgodne z ustaleniami wprowadzonymi w arkuszu stylów:

CSS – tekst(2)

Wstawianie i budowa wewnętrznego arkusza stylów

Jak zaobserwowaliśmy w ostatnim ćwiczeniu wewnętrzny arkusz stylów umieszczamy w części nagłówkowej kodu strony (<head>…</head>) pomiędzy znacznikami <style type=″text/css″><style>.

Właściwości dla poszczególnych selektorów budowane są według schematu:

SELEKTOR {

              właściwość : wartość;

}

Wyjaśnienia wymaga jeszcze, dlaczego w ostatnim ćwiczeniu ustaliliśmy tekst justowany dla znacznika <body>, a nie dla znacznika <p>. Jest to wygodne, gdyż wtedy tekst będzie justowany niezależnie od tego, między którymi znacznikami (np. <div></div>) zostanie umieszczony. Wyjątkiem jest tu oczywiście znacznik <h2>, dla którego osobno zdefiniowaliśmy wyrównanie do środka strony.

Wyrównanie w pionie

SELEKTOR { vertical-align:...