KASKADOWE ARKUSZE STYLÓW CSS Żeby tworzyć atrakcyjnie wyglądające, rozbudowane serwisy należy skorzystać z innych języków, np. CSS (kaskadowych arkuszy stylów, ang. Cascading Style Sheets). CSS nie jest samodzielny jest ściśle powiązany z HTML, dlatego wiedza o znacznikach przyda się w tym rozdziale. Jakie zalety ma CSS? Wyobraź sobie, że zadaniem Twoim jest przygotowanie serwisu internetowego we współpracy z kilkunastoma osobami. Każdy powinien opracować dane dotyczące pewnej części. Wszystkie pliki wgrane na serwer utworzą jednolitą całość. Skąd wiadomo jakich czcionek użyć, jaka będzie kolorystyka treści i tła? Każdy ma zapewne inną koncepcję wyglądu strony i inny gust. Jeżeli nawet wszyscy dostaną dokładne, szczegółowe instrukcje dot. wyglądu poszczególnych elementów to zapamiętanie wszystkich formatowań będzie zadaniem trudnym. Ewentualne potrzeba zmiany wyglądu któregoś z elementów w przyszłości jest teoretycznie możliwa, ale będzie się wiązała z ogromną pracą. Skala problemów rośnie wraz z rozmiarem portalu - jeszcze trudniejsze zadanie czekać będzie administratorów serwisów tworzonych przez tysiące internautów, np. na podobnych zasadach co Wikipedia. Rozwiązaniem może być użycie CSS języka, który pozwala na oddzielenie treści strony (umieszczonej w plikach *.html) od sposobu ich prezentacji (umieszczonej w jednym arkuszu). Autor koncentruje się na zawartości merytorycznej strony, za jej wygląd odpowiada twórca pliku *.css. Również późniejsza modyfikacja szaty całego serwisu lub jego poszczególnych elementów jest dużo łatwiejsza. Jak wstawić styl? Istnieje kilka sposobów wstawiania CSS do dokumentów *.html. Nie można wnioskować, iż któraś z metod jest lepsza lub gorsza. Bywa, że administratorzy lub autorzy stron stosują wiele z nich równolegle w zależności od potrzeb. W ćwiczeniu skoncentrujemy się na zewnętrznym arkuszu, który pozwala na formatowanie elementu występującego wielokrotnie na wielu stronach. W takim przypadku należy wykonać dwie rzeczy: - przygotować zwykły plik tekstowy o dowolnej nazwie, np. nazwa_pliku.css (będzie on zawierał polecenia formatujące) - w sekcji nagłówkowej (każdego) dokumentu *.html umieścić następującą konstrukcję: <link rel="stylesheet" type="text/css" href="nazwa_pliku.css" /> Pozostałe metody stosowania CSS to: inline (styl lokalny) pozwala na formatowanie konkretnego elementu, wstawiany w tej samej linii oraz wewnętrzny arkusz umieszczany w sekcji nagłówkowej, pozwala na formatowanie elementu wielokrotnie występującego na stronie. Miejsce na notatki dot. inline i wewnętrznego arkusza: S t r o n a 1
Zapoznaj się z zawartością folderu CSS udostępnionego przez prowadzącego. Otwórz pliki mickiewicz.html, slowacki.html i norwid.html. Szczególną uwagę zwróć na wygląd stron. W katalogu CSS utwórz teraz plik tekstowy o nazwie arkusz.css (możesz do tego użyć Notatnika lub dowolnego edytora HTML, np. PHP Web Page Editor). Następnie edytuj plik slowacki.html i w pierwszej linii dopisz: <link rel="stylesheet" type="text/css" href="arkusz.css" /> Postąp analogicznie z dokumentami mickiewicz.html i norwid.html. Od tej chwili strony internetowe dotyczące pisarzy zostały skojarzone ze stylami, które będą wpisywane do arkusza. Każda zmiana stylu spowoduje jednoczesną zmianę sposobu wyświetlania wszystkich trzech plików *.html. Struktura arkusza Co wpisać w arkuszu? Należy zadeklarować styl stosując następującą zasadę: selektor cecha : wartość; - selektor to po prostu znacznik, np. <body>, <p>, <tr> - cecha to atrybut formatowania, np. wysokość czcionki, szerokość marginesu, kolor tła - wartość konkretna liczba, zazwyczaj z jednostką miary, zależna oczywiście od cechy, np. 10px, 10%, red Porada: - w nawiasach klamrowych można umieścić wiele par cecha-wartość, należy je jedynie rozdzielić średnikiem, - znaki białe (spacje, tabulatory, znaki końca akapitu) są ignorowane (nie mają wpływu na działanie arkusza). W pliku arkusz.css wprowadź poniższą składnię, następnie zapisz zmiany i odśwież slowacki.html. h1 font-size: 28px; W powyższym przykładzie dokonaliśmy formatowania wszystkich elementów zapisanych stylem nagłówkowym pierwszego poziomu (h1). Tabela przedstawia opis zmienianych cech. Wybrane cechy czcionek i tekstu oraz ich dopuszczalne wartości Opis cechy Cecha Dopuszczalne wartości rozmiar czcionki font-size może być wyrażona m.in. w pikselach (px), punktach (pt), milimetrach (mm), calach (in) krój czcionki font-family nazwa czcionki (jeśli zawiera spacje musi być ujęta w apostrofy) rodzaj pogrubienia font-weight m.in. normal, bold kolor czcionki color nazwa angielska lub szesnastkowo w postaci #RRGGBB S t r o n a 2
odległość między letter-spacing normal lub może być wyrażona m.in. w literami pikselach (px), punktach (pt), milimetrach (mm), calach (in) wyrównanie akapitu text-align left, right, center, justify Dopisz w arkuszu następujący kod: h2 font-size: 24px; Sprawdź efekt. Domyślasz się, że tym razem formatowane będą elementy zapisane stylem nagłówkowym drugiego poziomu (h2). Jedyną nową cechą jest font-style (rodzaj pochylenia), która może przyjmować wartości m.in. normal i italic. Na podstawie dotychczasowych ćwiczeń stwórz własne formatowanie selektora p. Zauważ, że formatowanie selektora h1 i h2 różni się tylko w dwóch miejscach, pozostałe pięć cech jest identyczne. W takim przypadku można wykorzystać grupowanie selektorów (selektory o takich samych właściwościach wpisz rozdzielone przecinkiem). Zmień zawartość arkusza do następującej postaci: h1, h2 h1 font-size: 28px; h2 font-size: 24px; Dotychczasowe style dotyczyły czcionek. Tym razem postaramy się zająć ułożeniem zdjęć pisarzy selektorem więc będzie znacznik img. Dopisz do arkusza: img float: left; width: 200px; margin: 30px; S t r o n a 3
Cecha float (mogąca przybierać wartości: left, right, none) to położenie grafiki względem tekstu (oblewanie tekstem). Width oznacza szerokość zdjęcia, a margin odległość od pozostałych elementów strony (np. tekstu). Arkusz CSS powoli powiększa się o kolejne elementy. Ustalmy teraz cechy tła strony. Tym razem dopisz w arkuszu: body background-image: url(tlo.gif); margin-left: 100px; margin-right: 100px; Spowoduje to ustalenie globalnych marginesów (lewego i prawego) na 100 pikseli oraz umieszczenie pliku tlo.gif jako tła strony (background-image). Oczywiście nazwę pliku możesz zmienić na dowolną inną, możesz też zmienić jego lokalizację (ścieżkę dostępu) pamiętaj tylko, by wskazane wartości odpowiadały rzeczywistości. Klasy i dziedziczenie Dopisz w pliku arkusz.css i poddaj edycji plik slowacki.html do postaci jak niżej: arkusz.css td text-align: justify; font-family: Bookman Old Style; border-style: solid; border-width: 2px; border-color: rgb(100,200,255); td.wyroznienie background-color: yellow; color: blue; letter-spacing: 3pt; ( ) slowacki.html Obok <font class=wyroznienie> Mickiewicza </font> i Krasińskiego ( ) <table> <tr> <td> tekst zwykły </td> <td class=wyroznienie> tekst </td> </tr> </table> wyróżniony Zapisz wszystkie zmiany i zaobserwuj efekty. Następnie zmień selektor td.wyroznienie na.wyroznienie (zaczyna się od kropki!), ponownie zapisz zmiany i zaobserwuj efekty. Zapisz wnioski. Miejsce na notatki: S t r o n a 4
Selektor w selektorze Dopisz w pliku arkusz.css i poddaj edycji plik slowacki.html do postaci jak niżej: arkusz.css td p color: #00aa00; margin-left: 25px; slowacki.html <table> <tr> <td>tekst zwykły </td> <td class=wyroznienie> tekst wyróżniony </td> <td> tekst zwykły tekst <p> a tu znacznik p w środku td </p> i znowu tekst zwykły </td> </tr> </table> Zapisz wszystkie zmiany i zaobserwuj efekty. zwykły Pseudoklasy Pseudoklasy są przydatne wtedy, gdy mamy do czynienia z elementem dynamicznym. Klasycznym przykładem jest odnośnik (selektor a). Może on bowiem przyjmować różne formatowania w zależności od interakcji z użytkownikiem. Do najczęściej używanych pseudoklas należą: :link (normalny), :visited (odwiedzony), :hover (mysz nad odnośnikiem). Dopisz w arkuszu poniższy kod i sprawdź efekty działania. a:link color: green; letter-spacing: 1px; text-decoration: none; a:visited color: maroon; letter-spacing: normal; text-decoration: none; a:hover text-decoration: underline; background-color: aqua; Uzupełnij arkusz.css o formatowanie selektora ul. Spróbuj zmienić cechy, które nie były opisane w tej instrukcji. Skorzystaj z tablic informatycznych lub poszukaj pomocy w Internecie. Stwórz szablon książki kucharskiej z wykorzystaniem CSS. Zaprojektuj i umieść w nim wszystkie potrzebne według Ciebie elementy, np. grafikę, tło, układ strony, tabele, czcionki, wypunktowania itp. S t r o n a 5