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.
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:
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: 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. >---------------<
