Będzie to dział, który chyba najbadziej się każdemu z was przyda. Pamiętam, że pierwszy raz użyłem CSS do zmiany wyglądu linków. Na tej lekcji nauczysz się nie tylko jak można spowodować zmianę koloru textu, ale również jak można osiągać bardzo wciekawe efekty, jak zawsze, przy minimalnym nakładzie pracy.

Będziemy dalej kontynuować pracę nad twoją stronką.
Stwórzmy więc najpierw bazę dla naszych linków, czyli zdefiniujmy wygląd samego a [bez klasy].

Dodaj do pliku 'style.css':

a {
text-decoration:none; // 1
color: black} // 2

Opis:
1 - Określam dekorację textu [text-decoration] na 'żadna[none]'. Domyślnie linki są podkreślone [underline]. Inne możliwości: line-trough[przekreślnenie], overline[linia nad].
2 - Określam kolor linków na 'czarny'. Gdybym tego nie zrobił przyjęłyby kolor określony ustawieniami przeglądarki (najczęściej fioletowy).

Dzięki temu, że nie użyłem tu klasy wszystkie 'a' będą miały te właściwości wyżej opisane - dziedziczenie.

Teraz czas, aby opisać linki, które będą w menu po lewej w lewej komórce środkowej tabeli.

Dodaj do pliku 'style.css':

a.lewe { // 1
border-left: 1px solid white; // 2
border-bottom: 1px solid white;
width:90%; // 3
background-color:#CBD1D3; // 4
display: block; } // 5

a.lewe:hover { // 6
background-color: white;} // 7

Opis:
1 - Tym razem tworzę klasę o nazwie 'lewe' - odziedziczy ona jednak wszystkie właściwości 'a'.
2 - Obramowanie (jak widzisz wszędzie je stosuję)
3 - Określam szerokość tego linku na 90% dotępnego dlań miejsca. Gdybym tego nie zrobił zająłby tylko powierzchnię pod textem ujętym między <a> txt</a>
4 - Okreslam kolor tła.
5 - Określam typ wyświetlania na 'block' [element blokowy]. Domyślnie jest 'in-line' [wyświetlane w lini]
6 - tworzę pseudoklasę ':hover', która będzie wywołana, kiedy użytkownik najedzie nad obszar linku. Pseudoklasa ta, odziedziczy wszystkie właściwości od 'a' i klasy 'lewe'...
7 - ... dlatego mogą przypisać tylko jedną właściwość zmieniającą kolor tła. Po najechaniu na link (text/grafikę lub na obszar ujęty 'width: 90%' kolor tła ulegnie zmianie).

Nadszedł czas, aby to wszystko jakoś ze sobą połączyć(twoją stronę i nowe klasy).

Otwórz plik 'index.htm' i znajdź pierwszą od lewej komórkę drugiej (środkowej tabeli).
Powinno to wyglądać mniej-więcej tak:

<td class="menu">
<tr>
<p class="menu1">Menu:</p>
<p class="menu2">
<A href="index.htm" class="lewe">O mnie</a>
<A href="index.htm" class="lewe">Ważne</a>
<A href="index.htm" class="lewe">Formularz</a>
<A href="index.htm" class="lewe">Kontakt z autorem</a>
<A href="index.htm" class="lewe">www.yarpo.prv.pl</a></p>
</td>
<td class="txt">

Fragmenty kodu o kolorze czarnym powinny się już znajdować w kodzie stron [jest to druga tabela, pierwsza komórka od lewej]. Nowe fragmenty są niebieskie. Podobnych zmian dokonaj na wszystkich stronach, które dotąd zrobiłeś. Powinny wyglądać prawie tak samo. Liczba linków jest zależna od twojej woli. Poprobuj. Zrób jedną stronę o sobie (skopiuj 'index.htm' zmień jego nazwę i napisz kilka zdań o własnej osobie), drugą z listami - np. lista zakupów (tu nie chodzi o treść), kolejną z formularzami (nie będą działać, gdyż wstawisz jedynie pola, ale popróbuj), następny link niech uruchamia program pocztowy [ <a href="mailto: Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. class="lewe">Kontakt</a> ]. Możesz oczywiście zrobić jeszcze więcej stron, ale sądzę, że starczy jeśli będzie ich 3-4. Oczywiście, aby linki odnosiły się do nich musisz wpisać href="xxx", gdzie xxx - nazwa strony.

>------Rada-----<

Nie musisz za każdym razem pisać od nowa kodu. Stwórz jedną stronę, która będzie mieć wszystko na swoim miejscu, a nastepnie skopiuj ją x razy i pozmieniaj jedynie nazwy nowootrzymanych plików.
>---------------<