Hiperłącza - ciekawe efekty

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-15

szukaj: hiperłącza linki odnośniki kurs css

Będzie to dział, który chyba najbladziej 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 tekstu, ale również jak można osiągać bardzo ciekawe 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 - Określam 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:twoj@adres.pl 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 następnie skopiuj ją x razy i pozmieniaj jedynie nazwy nowo otrzymanych plików.

Patryk 'yarpo' Jar

szukaj: hiperłącza linki linki odnośniki kurs css

Zagadnienia poruszane w tej części kursu:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!