KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets)

Transkrypt

1 LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets) 1. Wprowadzenie Selektory należą do kluczowych pojęć, wskazują obiekty, którym przypisujemy jakiś zestaw własności. Selektorem może być dowolny element języka HTML. Przykładem jest choćby element P, który w języku HTML, jak wiadomo, oznacza akapit, albo UL, czyli wykaz nieuporządkowany. Jest to tzw. selektor prosty. Ogólna konstrukcja stylu ma następującą postać: selektor { cecha: wartość } // W języku angielskim: selector { property: value } Selektor pełni zasadniczą rolę określając, jakiemu elementowi przypiszemy pewne własności. Gdybyśmy chcieli przypisać akapitowi czcionkę Helvetica o rozmiarze 12pt, powinniśmy to zdefiniować następująco: P { font-family: Helvetica; font-size: 12pt} Podobnie, gdyby wykaz nieuporządkowany miał być przedstawiony za pomocą czcionki pogrubionej, koloru czerwonego, definicja powinna wyglądać następująco: UL { font-weight: bold; color: #FF0000 } 2. Grupowanie selektorów Te same wartości stylu możemy nadać jednocześnie kilku selektorom, wyliczając ich listę przed deklaracją własności i wartości. Na przykład, chcąc przypisać taką samą czcionkę i kolor tytułom stopnia pierwszego, drugiego i trzeciego, zamiast definiować każdy tytuł z osobna, możemy napisać: H1, H2, H3 {font-family:helvetica; color:blue} 3. Selektory elementów Kilka ważnych pojęć: Drzewo dokumentu (document tree) - hierarchiczny układ elementów HTML zakodowanych w dokumencie; każdy element ma dokładnie jednego rodzica, oprócz elementu najwyższego w hierarchii. Dziecko (child) - element będący o jeden szczebel niżej w drzewie w stosunku do danego elementu. Potomek (descendant) - element będący o jeden lub więcej szczebli niżej w drzewie w stosunku do danego elementu. Rodzic (parent) - element o jeden szczebel wyżej w drzewie w stosunku do danego elementu. Przodek (ancestor) - element będący o jeden lub więcej szczebli wyżej w drzewie w stosunku do danego elementu. Brat (sibling) - element mający tego samego rodzica co inny element; jeśli znajduje się obok niego, to jest to brat przylegający (adjacent sibling). Przykładowe drzewo: a. Selektor prosty Selektor został opisany we wprowadzeniu b. Selektor uniwersalny Wartości ogólne (uniwersalne) można przypisywać dokumentowi na najwyższym poziomie, czyli w BODY, ale można także stosować tzw. selektory uniwersalne, oznaczane gwiazdką. Interpretacja: Internet Explorer, Netscape 6, Opera 5. * {color:#ff0000; font-weight:bold} // cały tekst (w akapitach, wykazach, tabelach itd.) będzie wyświetlany jako pogrubiony i w czerwonym kolorze. *.klasa1 {font-family:verdana} // wszystkie elementy opatrzone klasą o nazwie klasa1 będą wyświetlane za pomocą czcionki Verdana.

2 c. Selektor potomka (descendant selector) Selektor potomka (w CSS1 jest to selektor kontekstowy) pozwala nadawać styl tym elementom, które mają określonych przodków. Interpretacja: Internet Explorer, Netscape 6, Opera 5. Na przykład: H1 I {color:red} // jeśli fragment tytułu stopnia pierwszego będzie przedstawiony za pomocą czcionki pochylonej, to automatycznie zyska on także czerwony kolor. UL UL LI {color:green} // elementy wykazu na drugim poziomie zagnieżdżenia będą przedstawione w zielonym kolorze, podczas gdy elementy wykazu pierwszego poziomu będą miały domyślny kolor. W definicji selektora potomka poszczególne elementy są rozdzielone spacjami. Spacja jest tzw. kombinatorem - w CSS2 rozróżniamy trzy rodzaje kombinatorów: spacja, znak + i znak >. Spacje wokół znaków + i > są opcjonalne. 4. Specjalne selektory HTML a. Klasy selektorów W powyższych przykładach posłużyliśmy się prostym selektorem w postaci elementu HTML. Język CSS przewiduje jednak tworzenie tzw. klas, które pozwalają zróżnicować ten sam element zależnie od pojawiających się okoliczności. Bardzo dobrym przykładem jest tutaj ponownie element P. W większym dokumencie, składającym się z wielu akapitów, nie wszystkie akapity muszą mieć taki sam wygląd, np. czcionka Times, o rozmiarze 12 punktów, w kolorze czarnym. Może się przecież zdarzyć, że niektóre akapity będziemy chcieli wyróżnić pogrubieniem, inne zaznaczyć odmiennym kolorem, a jeszcze inne - mniejszą czcionką. Te "nietypowe" akapity możemy łatwo zdefiniować za pomocą klas i tylko w odpowiednim miejscu przywoływać stosowne definicje, podczas gdy gros tekstu będzie wyświetlane za pomocą podstawowego formatowania przewidzianego dla akapitu. Interpretacja: Internet Explorer, Netscape 6, Opera 5. Na przykład, definicja stylów akapitów w części nagłówkowej dokumentu może mieć taką postać: P {font-family: Helvetica; font-size: 10pt} P.uwagi {font-family: Helvetica; font-size: 10pt; font-weight: bold} P.istotne {font-family: Times; font-size: 10pt; color: red} P.przypisy {font-family: Helvetica; font-size: 8pt} Natomiast w samym tekście będziemy przywoływać klasy za pomocą polecenia <p class=konkretna_klasa>akapit</p> b. Selektor ID Selektor ID (identyfikatora) został pomyślany jako narzędzie do wskazywania elementu mającego jednoznaczny atrybut ID, a więc występującego raz jeden w drzewie dokumentu. Identyfikator jest budowany z liter od a do z, cyfr, łączników i kropek, przy czym na początku musi się znajdować litera. Interpretacja: Internet Explorer, Netscape 6, Opera 5. #[etykieta ID] {deklaracja stylu} Przykład: H1#chapter {letter-spacing: 0.5em} W tekście podajemy kod <h1 id="chapter">chapter</h1> 5. Selektory pseudoklas a. Pseudoklasy odsyłaczowe CSS2 wyróżnia specjalne selektory dla odsyłaczy, zależnie od ich bieżącego statusu. Interpretacja: Internet Explorer, Netscape 6, Opera 5. Selektor a:link pozwala nadać formatowanie odsyłaczowi na stronie, na przykład: a:link {color:yellow; background: blue} Selektor a:visited nadaje formatowanie odsyłaczowi już odwiedzonemu, na przykład: a:visited {color:green} b. Pseudoklasa :hover Selektor nadaje styl elementowi, gdy urządzenie wskazujące, np. myszka, znajduje się nad elementem, ale nie aktywizuje go. Jest to szczególnie często wykorzystywane do zmiany wyglądu odsyłacza, co ułatwia czytelnikowi śledzenie, nad jakim odsyłaczem znajduje się w danym momencie kursor myszki. Interpretacja: Internet Explorer, Netscape 6, Opera 5. Przykład: A:hover {background:blue; color:red} // odsyłacz mający domyślnie np. niebieski kolor na białym tle, po nasunięciu kursora zostanie wyświetlony jako biały na niebieskim tle. c. Pseudoklasa :active Selektor :active formatuje we wskazany sposób aktywny w danym momencie element, np. kliknięty odsyłacz. Interpretacja: Internet Explorer, Netscape 6, Opera 5. A:active {background:olive; color:black} Powyższe cztery pseudoklasy powinny być umieszczane w nagłówku w podanej kolejności: link, visited, hover, active.

3 6. Selektory pseudoelementów a. Pseudoelement first-line Selektor pozwala nadać odrębne formatowanie pierwszemu wierszowi bloku, np. akapitu. W deklaracji stylu dla :first-line można stosować następujące własności: font properties, color properties, background properties, 'word-spacing', 'letterspacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', 'clear'. Interpretacja: Internet Explorer 5.5, Netscape 6, Opera 5. Przykład: P:first-line {text-transform: uppercase} // to jest akapit, w którym pierwszy wiersz będzie zamieniony na wersaliki. Zawartość pierwszego wiersza zmienia się przy zmianie wielkości ramki. b. Pseudoelement first-letter Selektor :first-letter teoretycznie powinien powodować nadanie odrębnego formatowania pierwszej literze danego bloku, np. akapitu. Został on pomyślany przede wszystkim jako wygodne narzędzie o charakterze typograficznym, pozwalające zbliżyć wygląd strony WWW do tradycyjnych rozwiązań spotykanych w publikacjach papierowych, np. rozciągnięcie pierwszej litery na kilka kolejnych wierszy tekstu. Technika ta (drop-cap) jest znana choćby z popularnych edytorów tekstów. Niestety, żadna z przeglądarek nie interpretuje tego polecenia. W deklaracji stylu dla :first-letter można stosować następujące własności: font properties, color properties, background properties, 'text-decoration', 'vertical-align', 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow', and 'clear'. Interpretacja: Internet Explorer 5.5, Netscape 6, Opera 5. Przykład: P:first-letter { font-size: 200%; float: left } // Pierwsza litera w tym akapicie jest różna od pozostałych. KASKADOWOŚĆ I DZIEDZICZENIE W Cascading Style Sheets istnieją dwa istotne pojęcia, o których należy pamiętać przy konstruowaniu stylów - dziedziczenie stylów i ich kaskadowy charakter. Dziedziczenie polega na tym, że elementy niższe w hierarchii drzewa dokumentu dziedziczą formatowanie elementów leżących wyżej w hierarchii, chyba że wyraźnie nadamy im inne formatowanie. Przykładowo, jeśli ustalimy, że tekst w jakiejś tabeli ma być przedstawiony za pomocą pogrubionej czcionki Helvetica, to wszystkie komórki tabeli będą w ten sposób formatowane, gdyż komórka <TD> leży niżej w hierarchii (drzewie dokumentu) niż tabela <TABLE>. Jeśli natomiast nadamy odrębne formatowanie wybranej komórce (utworzymy wyjątek), to oczywiście wygląd czcionki w tej komórce zmieni się, gdyż bezpośrednie zdefiniowanie czcionki w wybranym miejscu ma pierwszeństwo przed ogólniejszym formatowaniem tabeli (na wyższym szczeblu). Taka jest właśnie ogólna zasada - jeśli wyraźnie nie zdefiniujemy formatowania dla jakiegoś elementu, dziedziczy on własności po swoich "przodkach", czyli elementach wyższych w hierarchii. Niestety, zdarzają się odstępstwa interpretacyjne od tej zasady - przykładowo, zdefiniowanie czcionki w BODY (a więc na szczycie hierarchii) nie wpływa na postać czcionki w komórkach tabeli, jeśli stronę oglądamy w Netscape Communicatorze. Należy się liczyć z tego typu uchybieniami i sprawdzać wygląd strony przynajmniej w dwóch przeglądarkach. No i czekać na pełną implementację CSS2. Zasada dziedziczenia stylów jest bardzo wygodna, gdyż oszczędza autorowi strony czaso- i pracochłonnego wprowadzania mnóstwa informacji dla każdego elementu z osobna. Możemy na przykład ustalić pewne ogólne cechy dla całej strony, a dodać nieco konkretyzującej informacji dla niższych w hierarchii akapitów czy wykazów - połączą one wtedy w sobie "dziedziczoną" informację z wyższego szczebla i konkretyzującą informację ich samych. Dziedziczenie jest zresztą bardzo intuicyjnym i łatwo zrozumiałym pojęciem, jeśli ma się w sobie nieco kultury logicznej. Kaskadowość, od której wzięły nazwę style, polega z kolei na ustaleniu hierarchii źródeł stylów. Style mogą być wprowadzane w nagłówku strony (HEAD), bezpośrednio w ciele dokumentu, 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. Przyjęto, że oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, to zaś może być modyfikowane przez style zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo mają zatem style zdefiniowane "bliżej" konkretnego elementu. Przeglądarka sprawdza więc najpierw, czy istnieją jakieś arkusze zewnętrzne i stosownie do ich definicji formatuje stronę. Następnie sprawdza, jakie są definicje stylów w nagłówku strony i modyfikuje wygląd zgodnie z ich ustaleniami. Następnie sprawdza style w samym dokumencie i ponownie modyfikuje fizyczną postać strony. To oczywiście model działania, ale pokazuje on, jak działa taka 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. 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 drobna zmiana w arkuszu powoduje zmiany we wszystkich objętych nimi dokumentach.

4 Jak z tego widać, kaskadowość i dziedziczenie uzupełniają się, tworząc zwarty system ogólnych zasad sterujących działaniem stylów. Kaskadowość ustala hierarchię różnych źródeł stylów, a dziedziczenie wpływa na wygląd strony z punktu widzenia hierarchii elementów w danym dokumencie (drzewie dokumentu). WSTAWIANIE STYLÓW Style mogą być umieszczane w dokumencie na kilka sposobów: Kody formatujące są umieszczane w środku tekstu (styl lokalny, in-line style) i dotyczą wybranego znacznika dokumentu. Kody formatujące są umieszczane w środku tekstu, obejmują większy fragment dokumentu i nie są związane z wybranymi znacznikami (rozciąganie stylu i wydzielone bloki). Kody formatujące są umieszczane na początku strony, w nagłówku HEAD, i oddziałują na cały dokument (zagnieżdżanie stylu). Kody formatujące są umieszczane na wzorcowych stronach (lokalnie lub na serwerze), a w dokumentach wstawiamy odpowiednie odwołania do tych stron, co powoduje automatyczne zmiany sposobu formatowania. Są to odwołania do tzw. stylów zewnętrznych. Kody formatujące są importowane z innej strony za pomocą 1. Styl lokalny (in-line) Styl lokalny pozwala nadawać atrybuty wybranym, pojedynczym elementom strony. Typowym zastosowaniem jest nadanie określonych atrybutów akapitowi. <p style="definicja stylu">treść akapitu</p> 2. Rozciąganie stylu Rozciąganie stylu polega na objęciu stylem pewnego bloku w dokumencie HTML. Posługujemy się tutaj poleceniem <SPAN> </SPAN>. Na przykład: <span style="font-family: Courier; font-size: 15pt; font-weight: bold; color: red">to jest akapit objęty poleceniem SPAN</span> Poleceniem SPAN możemy obejmować łącznie także niejednorodne elementy, np. akapit i wykaz. <span style="font-family: Courier; font-size: 15pt; font-weight: bold; color: red"> <p>to jest akapit objęty poleceniem SPAN</p> <ul> <li>pierwszy punkt wykazu <li>drugi punkt wykazu <li>trzeci punkt wykazu </ul> </span> W polecenu SPAN możemy wykorzystać także klasy, jeśli są zdefiniowane w nagłówku dokumentu (arkusz zagnieżdżony) czy jakimś zewnętrznym arkuszu. Gdybyśmy wstawili w nagłówku dokumentu, w definicji stylów, polecenie (bez polskich znaków, gdyż Navigator wykazuje tutaj błąd).bardzowazne {font-family: Helvetica; font-size: 14pt; font-weight: bold; color: lime} możemy je wykorzystać w definicji SPAN. Na przykład: <span class=bardzowazne>to jest fragment dokumentu, formatowany zgodnie z definicją klasy BardzoWazne.</span> Inny przykład, w którym kilka pierwszych wyrazów akapitu jest wyświetlanych za pomocą małych kapitalików. Korzystamy tutaj z definicji:.pierwszewyrazy {font-variant: small-caps} którą obejmujemy pierwsze trzy wyrazy <span class=pierwszewyrazy>.

5 3. Wydzielone bloki Style możemy nadawać elementom dokumentu, posługując się bardzo elastycznym poleceniem bloku. Na sposób ten warto zwrócić szczególną uwagę, gdyż jest wygodny, a doświadczenia z dynamicznym HTML, wprowadzanym intensywnie od momentu pojawienia się Internet Explorera 4, wskazują, że jest to jedno z podstawowych narzędzi (dynamiczny HTML jest jednym z kluczowych elementów kanałów informacyjnych). Bloki wydzielamy za pomocą polecenia <DIV> </DIV>. Fragment dokumentu objęty blokiem możemy w swobodny sposób formatować za pomocą stylów. Możemy sobie wyobrazić, że w części nagłówkowej dokumentu znajdą się klasy tytułów czy akapitów, natomiast w bloku utworzonym doraźnie w dokumencie zdefiniujemy czcionki, barwy itp., a także powołamy się na klasy z nagłówka. Przykład bloku ze stylami zdefiniowanymi bezpośrednio w bloku: <DIV style=""font-family: verdana, arial; color: olive; position: relative; left: 300; width: 550"> Fragment dokumentu objęty blokiem (tytuł, akapit i wykaz) </DIV> Przykład bloku ze stylami zdefiniowanymi w części nagłówkowej dokumentu. Zakładamy, że w nagłówku (albo w arkuszu dołączanym lub importowanym) utworzyliśmy klasę o nazwie notatka..notatka {font-family: verdana, arial; font-weight: bold; color: blue; margin-left: 10%; margin-right: 10%} A teraz skorzystamy z tego stylu, wydzielając jakiś fragment dokumentu blokiem i przypisując mu klasę notatka: <div class=notatka> fragment dokumentu objęty blokiem </div> Wydzielane bloki są podobne w działaniu do SPAN, ale obejmują szersze fragmenty dokumentu. Mogą zawierać w sobie tytuły, akapity, wykazy, a nawet inne bloki. Dzięki temu nadają się do wydzielania większych, logicznych fragmentów dokumentów i nadawania im specyficznego formatowania za pomocą stylów. 4. Zagnieżdżanie arkusza stylów Bardzo często spotykanym sposobem definiowania stylów na stronie jest zagnieżdżanie definicji w nagłówkowej części dokumentu. W tym celu wystarczy wpisać odpowiedni blok informacji między poleceniami <HEAD> i </HEAD>. Przykładowo, niniejsza strona zawiera krótki zestaw stylów, zdefiniowany następująco w części nagłówkowej (w kolorze niebieskim): <head> <STYLE TYPE="text/css">  </STYLE> </head> 5. Dołączanie do zewnętrznego arkusza stylów Każdą stronę można dołączyć do zewnętrznego arkusza stylów, w którym są zdefiniowane własności różnych elementów - interpretują to polecenie Internet Explorer 4 i 5, Netscape 6 i Opera 5. Zewnętrzny arkusz stylu zapisywany jest w postaci pliku z rozszerzeniem.css, a jego użycie jest sygnalizowane poprzez zapis w źródle HTML w następujący sposób: <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <LINK REL=stylesheet HREF="../style/toolstyl.css" TYPE="text/css"> </head> Wiersz zawierający odniesienie do arkusza jest umieszczany w ramach części nagłówkowej (HEAD) i ma ściśle określoną składnię. HREF wskazuje ścieżkę do katalogu, w którym jest umieszczony arkusz. Może on być, oczywiście, ulokowany w tym samym folderze, co strony zawierające odniesienie do niego. Wszystkie definicje zewnętrznego arkusza stylów są automatycznie przyjmowane przez elementy danej strony. Stosowanie zewnętrznego arkusza ma tę zaletę, że nie jest konieczne wprowadzanie stylów na konkretnej stronie, zmniejszamy objętość plików, a także możemy za pomocą zmiany jednego parametru w arkuszu stylów zmienić wygląd wszystkich stron, które się odwołują do tego arkusza (np. kolor tytułu czy wielkość czcionki akapitów). 6. Import zewnętrznego arkusza stylów Każdą stronę można opisać za pomocą importowanego arkusza stylów. Funkcję tę realizują Internet Explorer 4 i 5, Netscape 6 i Opera 5. Import jest definiowany za pomocą następującego polecenia, umieszczanego w ramach HEAD: <style> url("adres arkusza");--> </style>

6 PRZYKŁAD ARKUSZA STYLU Zapis z pliku *.css body {font-family: Verdana,Arial,sans-serif; font-size: 10pt; overflow: auto; } a:link { color:#ff0000; } a:visited { color:#a00000; } a:active { color:#e00000; } p { font-family: Verdana,Arial,sans-serif; text-align:center; } h1 {font-family: Verdana,Arial,sans-serif; font-size:22pt; color:#800000; text-align:center;} h2 {font-family: Verdana,Arial,sans-serif; font-size:13pt; font-weight:bold; color:#900000; textalign:center;} h3 {font-family: Verdana,Arial,sans-serif; font-size:12pt; font-weight:bold; color:#a00000; textalign:center; } table { margin-left: auto; margin-right: auto; text-align:center; } table.picinfo { margin-left: auto; margin-right: auto; width:400pt; } table.picinfo td { color:#f0f0f0; text-align:left; } td {font-family: Verdana,Arial,sans-serif; font-size: 10pt; vertical-align:top; text-align:center; } td.fullpic {font-family: Verdana,Arial,sans-serif; font-size: 10pt; vertical-align:middle; textalign:center; } td.tdvmiddle { vertical-align:middle; } div.std { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10pt; text-align:center; } span.chapterpictitle { color:#332222; font-size: 8pt; text-align:center; } span.chapterpicdesc { color:#777777; font-size: 8pt; text-align:center; } span.chapterpicdate { color:#808000; font-size:7pt; } span.chapterlinktitle { color:#441111; font-size: 8pt; text-align:center; } span.footer { color:#7a7a7a; font-size:7pt; } span.picfulltitle { color:#b0b0b0; font-size:11pt; } span.picfulldesc { color:gray; font-size:12pt; } span.picfulldate { color:silver; font-size:7pt; }