Wprowadzenie do CSS Okiełznać style
Co to jest CSS? CSS to technologia, która pozwala na dużą swobodę w formatowaniu dokumentów HTML. Upraszcza nie tylko tworzenie stron WWW, ale również ich późniejszą modyfikację. Początki internetu były skromne. Miał służyć naukowcom do wymiany poglądów i porównywania wyników badań. Dopiero z biegiem lat uległ komercjalizacji. Pierwsze strony internetowe były oparte na języku HTML, który pozwalał zarówno na przekazywanie treści, jak i odpowiadał za prezentację, czyli wystrój graficzny strony. Gwałtowny rozwój sieci sprawił, że rozpoczęto prace nad stworzeniem technologii ułatwiającej formatowanie dokumentów HTML. Tak powstały Kaskadowe Arkusze Stylów - CSS. Tworząc arkusz CSS ustalamy, jak będzie wyglądał dokument HTML, np. czy będzie miał tło czarne, białe, czy tłem będzie zdjęcie. Gdy będziemy chcieli np. zmienić kolor tła na wszystkich podstronach, wystarczy dokonać zmiany włącznie w jednym pliku CSS.
Jak wygląda kod? Zobaczmy to na przykładzie. Gdy w HTML-u chcieliśmy pokolorować tekst w paragrafie na niebiesko, robiliśmy to tak: <font color="blue">Jakiś tekst.</font> W CSS zrobimy to już bez pomocy znacznika <font>: <p style="color: blue;">Jakiś tekst.</p> Przestawiamy się na znacznik style="" i zauważamy, że w deklarowaniu stylu występuje inna składnia: cecha: wartość;
Dlaczego warto korzystać z CSS? Pozwala ustalić zbiorczy styl dla całej witryny. Wszelkie modyfikacje oznaczają zmiany tylko w jednym pliku stylów. Rozmiar plików HTML po zastosowaniu stylów maleje, czasem bardzo pokaźnie. Mniejsze pliki to mniejszy transfer i szybsze ładowanie stron. Przeglądarka przechowuje plik CSS w swoim buforze.
Sposoby wprowadzania stylów Style umieszczane lokalnie Style w nagłówku strony Style jako zewnętrzny plik CSS Style można definiować w trzech różnych, niewykluczających się miejscach: korzystając z zewnętrznego pliku, umieszczając style w nagłówku dokumentu HTML oraz tworząc atrybut "style" w dowolnym znaczniku HTML. Wszystkie trzy metody można stosować jednocześnie, lecz obowiązuje tu zasada priorytetów. Im bliżej znacznika HTML znajdują się właściwości CSS, tym bardziej przebija on inne właściwości CSS umieszczone wcześniej. Tym sposobem raz zadeklarowany kolor paragrafu w pliku zewnętrznym może zostać zmieniony na zielony przez lokalne umieszczenie deklaracji stylu.
Style umieszczane lokalnie <p style="color: red;">Jakiś tekst.</p> <div style="width: 100px;">Jakiś tekst.</div> Jest to najprostsza metoda definiowania stylu dla danej sekcji witryny. W przykładzie dla znacznika <div> ustalana jest ramka o grubości jednego piksela po lewej stronie bloku tekstu. Pomiędzy nawiasami zamykającymi atrybut, tj. style="", możemy umieścić dowolną ilość właściwości CSS. Ta metoda wprowadza bałagan w kodzie, lecz gdy konkretnego stylu używamy tylko raz, umieszczanie stylów lokalnie może być uzasadnione. Jednak profesjonalni webmasterzy nie używają tej metody, bo nie spełnia ona zasady: osobno treść, osobno prezentacja. <a style="font-familly: Arial;">Jakiś tekst.</a>
Style w nagłówku strony <style type="text/css"> .p { color: blue; } </style> </head> <body> <p>Jakiś tekst.</p> Wirtualna Polska wszystkie swoje style umieszcza w nagłówku kodu źródłowego każdej strony. Wszystkie ustalenia CSS są umieszczane pomiędzy znacznikami <style>. Dlaczego nie wrzucono wszystkich deklaracji do jednego pliku zewnętrznego? W przypadku serwisów popularnych, takich jak portale czy wyszukiwarki, bezpieczniejsze jest umieszczenie wszystkich danych o generowanej witrynie w jednym pliku. Strony takie jak WP.pl są generowane za pomocą programów (tzw. generowanie dynamiczne stron, np. przy użyciu PHP), a następnie buforowane w celu uzyskania wyższej wydajności.
Style jako zewnętrzny plik CSS <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>Jakiś tekst.</p> Znacznik <link> wskazuje lokalizację zewnętrznego pliku CSS, tj. "style.css". W tym samym katalogu utworzymy plik o takiej nazwie i rozszerzeniu, wstawiając do niego: Ta metoda preferowana jest przez zawodowych webmasterów. Każda z naszych stron HTML zawiera odwołanie do pliku ze stylami, czyli znacznik, który wskazuje lokalizację pliku CSS. W ten sposób dokument HTML wie, który plik ma załadować jako zbiór stylów. W tym pliku (używamy rozszerzenia .css) umieszczamy wszystkie deklaracje. Takich plików może być dołączonych do dokumentu HTML dowolnie dużo. p { color: blue; }
Kolory w CSS Opisowe nazwy kolorów Szesnastkowe wartości RGB Dziesiętne i procentowe wartości RGB Kolor mogą mieć linki, tła, ramki, obramowania oraz tekst. Kolory definiujemy za pomocą ich opisowych nazw, dziesiętnych lub szesnastkowych wartości RGB, korzystając z nazw systemowych lub procentowych wartości RGB.
Opisowe nazwy kolorów color: blue; Istnieje 140 predefiniowanych nazw, z których każda znajduje swój odpowiednik w postaci kodu RGB. Niestety, nie mamy gwarancji, że te nazwy będą działały ze wszystkimi przeglądarkami. Istnieje jednak 16 podstawowych nazw, które na pewno obsłuży każda przeglądarka: black, white, aqua, blue, fuschia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow
Szesnastkowe wartości RGB color: #0000ff; Zapis szesnastkowy to trzy pary wartości ustalające kolejne składowe RGB. W przykładzie kolor składa się z trzech par wartości o tych samych kolorach. W CSS możemy uprościć ten zapis wg reguły: #aabbcc = #abc. Zatem poniższa, trzyliterowa notacja zostanie obsłużona prawidłowo przez przeglądarki color: #00f;
Dziesiętne i procentowe wartości RGB color: rgb(0, 0, 255); color: rgb(0%, 0%, 100%); To zdecydowanie najrzadziej stosowana przez webmasterów metoda zapisu. Kolor czarny przy takiej reprezentacji to: rgb(0, 0, 0), a biały: rgb(255, 255, 255). W notacji procentowej będzie to odpowiednio: rgb(0%, 0%, 0%), rgb(100%, 100%, 100%)
Dziedziczenie W CSS podstawowym mechanizmem przydzielającym reguły jest dziedziczenie. Spójrzmy na fragment kodu: <style type="text/css"> body { font-family: Verdana; } strong { text-decoration: underline; </style> </head> <body> <p>Jakiś <strong>tekst</strong></p> </body> <style type="text/css"> body { font-family: Verdana; } strong { text-decoration: underline; </style> </head> <body> <p>Jakiś <strong>tekst</strong></p> </body> Jeżeli dla znacznika <body> określimy czcionkę, dajmy na to Verdanę, reguła ta będzie dotyczyła wszystkich jego potomków. Tym sposobem cały nasz tekst w paragrafie <p> zostanie wyświetlony przy użyciu czcionki Verdana. Taka metoda przyznawania reguł to dziedziczenie. Elementy potomne w hierarchii dziedziczą od korzeni. Jeżeli z kolei ustalimy, że znacznik <strong> zawierający słowo "tekst" ma go dodatkowo podkreślać, reguła ta będzie dotyczyła tylko znaczników <strong>. Jeżeli jakaś wartość nie została określona w stylach (np. margines), to wykorzystywane są wartości domyśle. Każda z przeglądarek może tu nieco się różnić. Dlatego ważne jest, by sprawdzać poprawność wyświetlania strony za pomocą przynajmniej kilku wiodących przeglądarek. Wynikiem tego kodu będzie: Jakiś tekst
Schemat dziedziczenia HTML HEAD BODY TITLE TABLE TD H P Oczywiście jest to tylko przykładowy, bardzo pobieżny schemat, bo przecież znaczników html jest dużo więcej i ogólnie jest to trochę bardziej złożone, ale sądzę, ze teraz jesteś i tak już skołowany, więc chyba to starczy.
Klasy selektorów selektor.klasa { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne) Klasa to wartość atrybutu class="..." nadanego selektorowi z poziomu języka (X)HTML. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style. Zdefiniowanie klasy selektorów w części arkuszu stylów, pozwala później się do niej odnosić już we właściwej treści dokumentu. Dzięki temu możemy np. ustalić określone atrybuty dla danego elementu (selektora) na całej stronie, a jednocześnie zmienić wygląd tylko niektórych, bezpośrednio przy nich. Nie musimy już wtedy za każdym razem wpisywać stylu inline, którego zapis czasem może być dosyć długi, ale wystarczy odwołać się do nazwy klasy z arkusza. Deklaracja klasy jest przydatna szczególnie, jeśli na wielu stronach serwisu znajdują się elementy mające takie samo formatowanie, a dodatkowo nie można dla nich posłużyć się selektorem typu, ponieważ na stronie znajdują się inne znaczniki tego samego rodzaju co wybrany element, ale nie chcemy, aby i one otrzymały takie samo formatowanie. Wtedy np. w zewnętrznym arkuszu stylów umieszczamy deklarację klasy, a następnie na stronach wstawiamy atrybut class="klasa" tylko dla wybranych znaczników. Dzięki temu inne znaczniki tego samego typu zachowają swoje oryginalne formatowanie.
Selektor identyfikatora selektor#identyfikator { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne) Klasa to wartość atrybutu id="..." nadanego selektorowi z poziomu języka (X)HTML. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style. Polecenie to pozwala, na nadanie określonych atrybutów formatowania dla elementu, który ma jednoznaczny identyfikator (ID) , czyli występuje tylko raz w drzewie dokumentu (w odróżnieniu od klasy).
Podsumowanie CSS został stworzony 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. Stosowanie zewnętrznych arkuszy CSS daje możliwość zmiany wyglądu wielu stron na raz bez ingerowania w sam kod (X)HTML, ponieważ arkusze mogą być wspólne dla wielu dokumentów.