Konstrukcja stylu nie należy do zbyt skomplikowanych i wygląda tak jak na poniższym przykładzie.

Transkrypt

1 Tematy: Budowa stylu Osadzanie stylów na stronie Jednostki miar stosowane w CSS Nazewnictwo kolorów używane w CSS Do tego, aby rozpocząć przygodę z kaskadowymi arkuszami stylów oraz świadomie z nich korzystać, niezbędne są podstawy. Musisz dowiedzieć się, w jaki sposób zbudowany jest styl, co to jest kaskadowość, dziedziczenie, selektor, z jakimi jednostkami miar będziesz miał styczność przy konstruowaniu swoich arkuszy. Bezwzględnie należy poznać, w jaki sposób umieszczać style w dokumencie XHTML/HTML. Budowa stylu Konstrukcja stylu nie należy do zbyt skomplikowanych i wygląda tak jak na poniższym przykładzie. selektor cecha:wartość; cecha:wartość; etc.; Selektor jest odpowiednikiem znacznika występującego w języku XHTML/HTML, np. może to być <p> lub <div>. Drugi człon stylu jest zamknięty w nawias klamrowy i zawiera polecenia formatujące. Polecenie formatujące cecha jest określane przez specyfikację, natomiast wartość jest zmienną określaną przez nas w zależności od aktualnych potrzeb. Przykładowy prosty styl definiujący kolor bloku tekstu jako czerwony o wysokości czcionki równej 14 punktów wygląda następująco: P color:red; fontsize:14pt; Należy zwrócić uwagę na to, że cecha jest oddzielona od wartości za pomocą dwukropka, a po wartości zawsze występuje średnik. Stosowanie średnika po ostatniej parze cechy i wartości nie jest wymagane, ale zaoszczędzi wielu niespodzianek. Zapis stylu może również przybierać inną postać, jednak jego działanie pozostaje niezmienne. P color:red; fontsize:14pt; Jeżeli zapomnimy rozdzielić poszczególne pary cech i wartości za pomocą średników, to styl nie będzie działał poprawnie. BODY backgroundcolor:white; color:green fontsize:20pt; Zwróć uwagę na powyższy przykład, w którym chcemy określić biały kolor tła dokumentu oraz kolor czcionki jako 1 / 11

2 zielony. Dodatkowo tekst powinien zostać wyświetlony za pomocą czcionki o wielkości 20pt. Niestety, zapomniałem wstawić średnik przy definicji koloru tekstu na końcu linii. W większym arkuszu błąd jest praktycznie niewidoczny, jednak strona zostanie błędnie wyświetlona. Z trzech definicji stylów zadziała tylko pierwsza linijka odpowiedzialna za przypisanie białego koloru tła. Pozostałe dwa elementy zostaną błędnie rozpoznane przez przeglądarkę i nie zadziałają. Osadzanie stylów na stronie Kaskadowe arkusze stylów mogą być osadzone w dokumencie XHTML/HTML na kilka odmiennych sposobów. Specyfikacja przewiduje następujące rozwiązania: Style wewnętrzne: lokalne, zagnieżdżone. Style zewnętrzne: dołączone, importowane. Style wewnętrzne Pierwszym rozwiązaniem jest umieszczenie deklaracji stylu bezpośrednio w formatowanym znaczniku. Rozwiązanie takie nosi nazwę stylu lokalnego. <html> <head> </head> <body> <p style="color:green; fontsize:15pt;">treść dokumentu</p> <p>treść dokumentu</p> <p style="color:green; fontsize:15pt;">treść dokumentu</p> <p>treść dokumentu</p> </body> 2 / 11

3 </html> Przykład stylu umieszczonego w znaczniku widoczny na powyższym listingu uzmysławia nam, że taka konstrukcja opiera się na stosowaniu atrybutu style dla znacznika <p>. Wadą tego rozwiązania jest konieczność powielania tego samego stylu wiele razy, ponieważ działa on tylko dla znacznika, w którym został umieszczony. Weźmy na przykład dokument, w którym umieszczono czterdzieści bloków tekstu i każdy z nich ma wyglądać identycznie. Aby to osiągnąć, do każdego z nich należy wpisać odpowiednie style. Wiąże się to z wykonaniem dodatkowej pracy, stratą czasu oraz zwiększeniem objętości kodu XHTML/HTML. Do tego dochodzi kolejna ważna rzecz, jaką jest utrudniona możliwość poprawienia takiego kodu, gdy nie spodoba się on odbiorcy. Sytuację taką przewidzieli twórcy kaskadowych arkuszy stylów, dzięki czemu mamy kolejną możliwość umieszczania CSS w kodzie XHTML/HTML. Metoda ta polega na zdefiniowaniu odpowiednich wpisów bezpośrednio w nagłówku strony. Rozwiązanie takie nazywane jest stylem zagnieżdżonym. <html> <head> <style type= text/css > P </style> </head> <body> color:green; fontfamily:arial; <p>tekst akapitu</p> <p>tekst akapitu</p> <p>tekst akapitu</p> <p>tekst akapitu</p> </body> </html> Styl umieszczony w nagłówku dokumentu XHTML/HTML jest rozwiązaniem bardzo wygodnym, gdyż działa na wszystkie elementy, które znajdują się w dokumencie. Przy takiej konstrukcji strony zmiany upodobań klienta prowadzące do modyfikacji wyglądu strony nie są już dużym problemem. Wystarczy wprowadzić drobne modyfikacje w samym nagłówku dokumentu, aby cały dokument zmienił się tak, by odpowiadał nowej wizji zleceniodawcy. Style zewnętrzne 3 / 11

4 Style wewnętrzne zarówno lokalne, jak i zagnieżdżone poza zaletami mają również dość poważne wady. Weźmy jako przykład rozbudowany serwis np. witrynę Wydawnictwa Helion na który składają się setki lub tysiące podstron. Każda z podstron jest formatowana w podobny sposób i wykorzystuje ten sam zestaw stylów. W takim wypadku style lokalne odpadają, a zagnieżdżanie definicji w nagłówki <head> również nie jest najlepszym pomysłem. Na szczęście istnieje jeszcze trzecia możliwość styl zewnętrzny, która opiera się na znaczniku <link /> umieszczanym bezpośrednio w nagłówku strony, dzięki czemu taki arkusz również działa na cały dokument. Znacznik ten pozwala na podłączenie zewnętrznego arkusza stylów. Odpowiedni wpis ma następującą postać: <link href="arkusz.css" rel="stylesheet" type="text/css" /> Atrybut href odpowiada za określenie nazwy oraz lokalizacji wybranego arkusza. Kolejny element, rel, definiuje relacje, które w przypadku CSS zawsze mają wartość stylesheet. Ostatni element type zawsze posiada wartość text/css. Dzięki temu przeglądarka może rozpoznać, z jakim arkuszem ma do czynienia. Działanie tego elementu docenimy w przyszłości, gdy powstaną inne arkusze i zajdzie potrzeba korzystania z nich. Zastosowanie znacznika <link /> w praktyce wyraźnie widać na listingu widocznym poniżej. <html> <head> <link href="arkusz.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html> Zewnętrzny arkusz jest zwyczajnym plikiem tekstowym, a jego zawartość może wyglądać np. tak jak na poniższym przykładzie. /* To jest przykład zewnętrznego arkusza stylów*/ P color:green; fontfamily:arial; Zewnętrzny arkusz powinien być zapisany w pliku o dowolnej nazwie, która nie zawiera polskich znaków. 4 / 11

5 Bezwzględnie taki dokument musi posiadać rozszerzenie zgodne ze wzorem nazwapliku.css. Oczywiście nie bez znaczenia pozostaje fakt stosowania dużych lub małych liter w nazwie. W przypadku języka XHTML polecenie odpowiedzialne za podłączenie zewnętrznego arkusza stylów ma postać: <?xmlstylesheet type="text/css" href="arkusz.css"?> Dla zachowania zgodności dokumentów XHTML ze starszymi przeglądarkami zaleca się umieszczanie podwójnej deklaracji wywołującej arkusz stylów. <link rel="stylesheet" type="text/css" href="arkusz.css" /> <?xmlstylesheet type="text/css" href="arkusz.css"?> Bardzo ciekawą cechą kaskadowych arkuszy stylów jest możliwość zdefiniowana kilku arkuszy dla danego dokumentu, co daje oglądającemu możliwość zmiany wyglądu strony w zależności od upodobań. Rozwiązanie to opiera się na możliwości wstawienia kilku znaczników <link /> i określeniu ich ważności. Funkcja ta działa m.in. w przeglądarkach Opera 10, Internet Explorer 8 czy Firefox 3.5. Przykładowy kod strony z kilkoma zewnętrznymi arkuszami zamieszczam poniżej. <html> <head> <link href="arkusza.css" rel="stylesheet" type="text/css" title="czerwony" /> <link href="arkuszb.css" rel="alternate stylesheet" type="text/css" title="zielony" /> </head> <body> </body> </html> Bezwzględnie należy zwrócić uwagę na to, że oba znaczniki <link /> zostały rozbudowane o dodatkowy atrybut title, który odpowiada za przypisanie właściwej nazwy każdemu arkuszowi. Na podstawie tej nazwy w przeglądarce jest możliwa zmiana arkuszy. W przykładzie wykorzystałem następujące nazwy: Czerwony oraz Zielony. Kolejną bardzo istotną zmianą jest atrybut rel, który dla domyślnego arkusza pozostaje bez zmian, natomiast w każdym dodatkowym wpisie przybiera postać rel= alternate stylesheet. 5 / 11

6 Rysunek 1.1. Zmiana arkusza stylów w przeglądarce Firefox Możliwość przygotowania alternatywnych arkuszy stylów dla jednej strony pozwala na zadowolenie gustów nawet najbardziej wymagających internautów, którzy trafią na stronę naszego autorstwa. Niestety, do pełni szczęścia potrzeba implementacji obsługi tej funkcji w innych najczęściej stosowanych przeglądarkach. Mam tutaj na myśli MS Internet Explorer, który okupuje pozycję lidera na rynku tego typu aplikacji. Na koniec zostawiłem sobie kolejną możliwość dołączania stylów do dokumentu. Dokładniej mówiąc, chodzi mi o funkcję importowania arkusza. <html> <head> <style url( arkusz.css ); P </style> color:green; </head> <body> </body> </html> Importowanie arkusza stylów jak widać na powyższym przykładzie jest wykonywane za pomocą które musi znajdować się na samym początku, przed deklaracją innych stylów. url(" 6 / 11

7 </style> Adres określający lokalizację może przybierać postać bezwzględną (przykład powyżej) lub względną (listing poniżej). url("../style/arkusz.css"); </style> Możliwość importowania arkusza możemy łączyć z innymi stylami, które są umieszczone w dokumencie (tak jak na jednym z powyższych listingów). Importowanie arkusza z innej lokalizacji działa poprawnie we wszystkich współcześnie używanych wersjach wiodących przeglądarek. Jednostki miar stosowane w CSS Kaskadowe arkusze stylów pozwalają nam na określenie wielkości wielu elementów, dopuszczając przy tym różne jednostki miar względnych i bezwzględnych. Dodatkowo w drugiej specyfikacji możemy się spotkać z jednostkami czasu, częstotliwości oraz kątowymi. Jednostki względne px piksele P marginleft:20px; Jednostka ta opiera się na pojedynczych punktach widocznych na ekranie monitora pikselach. Jeżeli dokładniej przyjrzymy się ekranowi monitora, da się zauważyć drobne punkty. W zależności od ustawionej rozdzielczości ilość tych punktów może być różna, np Pierwsza wartość podaje ilość punktów w poziomie, natomiast druga określa, ile pikseli mieści się w pionie. Oczywiście rozdzielczości mogą być bardzo różne, np czy , a do tego mogą się różnić w zależności od posiadanego systemu operacyjnego czy też typu monitora. Dlatego też stosowanie takiej jednostki nie zawsze daje dobre rezultaty w innych warunkach niż te wykorzystane podczas tworzenia witryny. em proporcje wysokości czcionki do danego elementu P marginleft:2em; Zasada działania tej jednostki jest stosunkowo prosta i polega na określaniu zależności pomiędzy poszczególnymi wielkościami. Jeżeli zdefiniujemy domyślną czcionkę o wielkości 12pt, to będzie ona równa 1em. Przyjrzyj się poniższemu przykładowi: P fontsize:12pt; marginleft:2em; Powyżej zdefiniowałem wielkość czcionki 12pt dla bloku tekstu. Następnie za pomocą kolejnego polecenia ustawiłem lewy margines jako 2em. W tym przypadku lewy margines będzie równał się 24pt. 7 / 11

8 ex proporcje do wysokości litery x P marginleft:2ex; Stosowanie jednostki ex wiąże się z rodzajem użytej czcionki. Weźmy np. stronę, na której używamy kilku rodzajów czcionek. Jak już wiemy, każda czcionka inaczej wygląda, a co za tym idzie, ma inną wielkość podstawową, dlatego czcionka Arial o wielkości 2ex nie będzie równa czcionce Times o wielkości 2ex. % procenty P fontsize:10%; Procenty służą do określania wielkości względem wartości domyślnej. Przykładowa definicja spowoduje ustawienie wielkości czcionki na poziomie 1/10 domyślnego rozmiaru, jaki został skonfigurowany w przeglądarce. Jednostki bezwzględne in cale P marginleft:2in; Cale wywodzą się z amerykańskiego systemu miarowego i głównie tam są wykorzystywane. W naszym przypadku ta jednostka raczej nie będzie potrzebna. pt punkty P fontsize:12pt; Punkty wywodzą się z typografii, gdzie są standardową jednostką miary. W praktyce 72 punkty odpowiadają jednemu calowi, a ten z kolei równa się 2,54 cm. cm centymetry P fontsize:1cm; Centymetr jest miarą stosowaną w większości krajów na świecie. Jeden centymetr odpowiada 0,39 cala. mm milimetry P fontsize:12mm; Minimetry są jednostką mniejszą niż centymetr. Występują w systemie metrycznym, na jeden centymetr składa się 10 mm. pc pica P fontsize:12pc; Podobnie jak punkt jest jednostką typograficzną; jeden pica równa się 12 punktom. Jednostki czasu i jednostki kątowe Jednostki służące do określania czasu oraz kątów zostały wprowadzone w drugiej specyfikacji CSS2. Mają zastosowanie przy projektowaniu stron wzbogaconych o możliwość czytania dokumentu przez komputer oraz 8 / 11

9 obsługi mediów. Jednostki czasu to: ms milisekunda H5 pauseafter:100ms; s sekunda H5 pauseafter:10s; Obie jednostki są używane do określania odstępu pomiędzy czytanymi fragmentami. Jednostki kątowe to: deg stopnie H5 elevation:10deg; grad gradiany H5 elevation:10grad; rad radiany H5 elevation:10rad; Jednostki te są używane do określenia pozycji źródła dźwięku. Nazewnictwo kolorów używane w CSS Kolejną ważną cechą oferowaną przez kaskadowe arkusze stylów jest możliwość określania kolorów. Do określania kolorów, podobnie jak w języku HTML, możemy użyć nazw kolorów, np. red, green czy blue. DIV color:red; Niestety, nazwy zostały przypisane jedynie kilkunastu podstawowym kolorom (patrz tabela 1) i jeżeli chcemy użyć innego, musimy skorzystać z odmiennej formy. Zapis w postaci RGB może przybierać następującą postać: DIV color:rgb(255,0,0); Zapis kolorów opierający się na modelu RGB przypisuje liczby całkowite z przedziału od 0 do 255 dla każdej z wartości składowej palety RGB (red, green, blue), stąd liczb może być aż dziewięć. Oczywiście możemy jeszcze zapisać kolor w postaci RGB, definiując procent nasycenia danej barwy. DIV color:rgb(100%,0%,0%); Kolejnym sposobem zapisu kolorów jest metoda szesnastkowa, będąca dokładnie tym samym, co zapis szesnastkowy doskonale znany wszystkim, którzy mieli do czynienia z komputerami. DIV color:#ff0000; 9 / 11

10 Podane przeze mnie powyżej przykłady zawsze określały kolor czerwony. Tabela 1. Wybrane kolory z przypisanymi nazwami wchodzące w skład bezpiecznej palety 216 kolorów Nazwa koloru Zapis szesnastkowy Black # Silver #C0C0C0 Gray # White #FFFFFF Maroon # Red #FF0000 Purple # Fuchsia #FF00FF Green # Lime 10 / 11

11 #00FF00 Olive # Yellow #FFFF00 Navy # Blue #0000FF Teal # Aqua #00FFFF 11 / 11