Kiedy piszę coś w CSSie i łączę to ze stronami internetowymi to często wpadam na 2 magiczne wyrazy. Są to "id" oraz "class". Czy programowania obiektowego można nauczyć się z tworzenia stron internetowych bez jakiegokolwiek języka wysokiego poziomu? Odpowiedź znajdziecie w poniższym artykule.

HTML i CSS to nie języki programowania!

HTMLa i CSSa trudno nazwać językami programowania. Nie ma mowy tu o pętlach, instrukcjach warunkowych czy tablicach. Co więcej! Nie ma tu nawet zmiennych! Choć typowych zmiennych faktycznie nie mamy to jednak możemy definiować pewnym atrybutom konkretne wartości. Języki opisu dokumentu częściej przypominają bazy danych niż języki programowania.

Aplikacje zdarzeniowe

Niewątpliwie duet HTML + CSS nie są podobne w działaniu co Pascal czy Basic, ale możemy znaleźć tu cechy wspólne z Delphi czy C++ Builder (a generalnie z programowaniem wizualnym). Aplikacje napisane w np. Delphi to programy zdarzeniowe, a HTML i CSS obsługują wbrew pozorom zdarzenia! Choć paleta możliwości jest ograniczona, to mamy tutaj styczność z: wskazaniem elementu, kliknięciem go, przeładowaniem strony itd. Oczywiście Java Script znacznie rozszerza możliwości zachowań stron internetowych, ale wtedy można nazwać ją już aplikacją, a nie dokumentem...

Zdarzenia CSS

Wróćmy jednak do obsługi zdarzeń oferowanych przez języki opisowe www. CSS pozwala nam zmieniać kolory, rozmiary elementów stron. Za to HTML pozwala zmieniać nam CSSa opisującego ten właśnie dokument. Dochodzimy do tego, że te technologie są od siebie ściśle zależne i jedna bez drugiej nie może istnieć. Obecnie tak, ale jeszcze klika lat temu opis wyglądu dokumentu zawierał się tylko w technologi HTML. Jak bardzo było to niewygodne nikogo przekonywać nie muszę.

Klasy w CSS

Skupmy się na tytule tego artykułu... Obiektami można nazwać każdego DIVa, każdy paragraf tekstu, odnośnik, linię itd. Tak jak w typowym programowaniu tak i w CSSie obiekty mogą mieć określone atrybuty, każdy atrybut powinien mieć przypisaną watrość. Obiekty obiektami, a co zrobić kiedy jeden element pojawia się wiele razy i nie chcemy dla każdego pisać osobnej, ale identycznej definicji stylu? Wtedy niezbędne są klasy. Zdefiniowana klasa np. "kod_zrodlowy" pozwala nam w tekście osadzać inaczej sformatowany tekst taką oto prostą metodą: <p class="kod_zrodlowy">for (i=1; i<10; i++)</p>. Ile razy odwołamy się do tej klasy po tylekroć będziemy wykorzystywać jej formatowanie. W przypadku osadzania w treści kodu źródłowego jest to bardzo użyteczne.

Obiekty w CSS

Teraz inny przykład. Chcemy mieć tabelki o ustalonych rozmiarach, ale każdą w innym kolorze. Można to zrobić tak: definiujemy klasę "tabelka" i przypisujemy ją do każdej z tabeli w dokumencie. Nadajemy stałe parametry: wielkość czcionki, wysokość i szerokość tabeli klasie. Zmienny parametr czyli kolor możemy na sztywno przypisać wprost do obiektu w ten sposób:

<table class="tabelka" style="background-color:#22AA33;">

<tr><td>Zawartość tabelki</td></tr>

</table>

Lub też zrobić tak:

<table class="tabelka" id="zielona">

<tr><td>Zawartość tabelki</td></tr>

</table>

Z tym zastrzeżeniem, że obiekt "zielona" musimy zdefiniować wcześniej w kodzie. Już widzę te zarzuty, że w tabelki się nie wrzuca napisu tylko po to, by miał inny kolor. To był jedynie przykład! Nie chciałem tego robić na spanie lub divie, aby nie zamieszać za bardzo...

Dziedziczenie w CSSie

Mamy już klasy, obiekty i metody. Teraz pora na dziedziczenie! CSS też oferuje tą przydatną funkcję. Niestety często dzięki dziedziczeniu pojawiają się błędy... Ten problem można częściowo rozwiązać przez reset css, ale stosowanie go kilka razy w kodzie mogłoby spowodować znaczny wzrost objętości. Tak czy inaczej zawsze musimy pamiętać, że gdy czegoś nie zdefiniujemy to i tak się to pojawi, a że forma już nie taka to pretensje miejmy do siebie samych.

Poprawne użycie CSS

I tutaj ważna wskazówka na zakończenie! Nie używajmy do formatowania wyglądu atrybutów html, ale starajmy się by układ był tak zrobiony, że przy awarii CSSa dokument będzie się dało "jakoś" przeczytać. Błędem jest zamiana kolejności DIVów tylko po to, by ułatwić wyszukiwarkom działanie. Tak naprawdę nic to nie daje, a robi bałagan kiedy CSS wczyta się z opóźneniem.

CSS wstępem do programowania

Programowanie w C++ może na początek okazać się nieco skomplikowane, więc warto na rozgrzewkę poznać dogłębnie HTMLa i CSSa. Rozumienie kodu i pewnego rodzaju analogie do prawdziwego programowania pomogą w dalszym informatycznym rozwoju. Pojęcie klasy i obiektu dużo łatwiej pojąć na kolorowych tabelkach niż dziwnych tworach "informatyki wyższej".

Procek