Poznajemy element "a" i wykorzystujemy go w menu

W poprzedniej części kursu CSS zmieniliśmy wygląd elementów li. Naszym następnym krokiem będzie zmiana wyglądu elementów a, jednak zanim to nastąpi musimy poznać do czego służą wspomniane elementy a.

Nasz kod HTML w części body dokumentu HTML do tej pory prezentował się następująco:

<ul>
    <li>to jest element - li</li>
    <li>to jest element - li</li>
    <li>to jest element - li</li>
    <li>to jest element - li</li>
  </ul>

W poprzednich częściach tego działu stworzyliśmy dla elementów ul oraz li odpowiednie reguły CSS, które zmieniły wygląd tych elementów. Wspomniane elementy, jak na razie, po wyświetleniu w oknie przeglądarki internetowej wyglądają następująco:

  • to jest element - li
  • to jest element - li
  • to jest element - li
  • to jest element - li

Głównymi elementami każdego menu są linki (odnośniki), czyli elementy a. Odnośniki służą do przemieszczania się pomiędzy poszczególnym stronami serwisu internetowego.

Oprócz standardowego znacznika rozpoczynającego dany element a i znacznika zamykającego ten element, elementy a zawierają w sobie atrybut href, do którego należy wpisać ścieżkę do pliku, do którego dany odnośnik ma prowadzić. Sposoby tworzenia różnego rodzaju ścieżek do pliku, zostały przedstawiony podczas omawiania metody dodania zewnętrznego kaskadowego arkusza stylów CSS do dokumentu HTML.

Umieszczamy elementy a w elementach li i zmieniamy ich zawartość, wpisując do nich jakiś przykładowy tekst:

<ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
    <li><a href="#">link 4</a></li>
  </ul>

Jeżeli umieścimy znak # w atrybucie href elementu a, to po kliknięciu w dany element zostaniemy przeniesieni na początek strony, na której aktualnie się znajdujemy.

A tak teraz prezentują się nasze elementy po wyświetleniu w oknie przeglądarki:

Pełny kod HTML z tej części kursu CSS, w której zmieniliśmy tylko część body dokumentu HTML, został przedstawiony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      /* wygląd elementu - ul */
      ul {
        list-style-type:none;
        margin:0;
        padding:0;
        border:1px solid #CCC;
        width:250px;
      }

      /* wygląd elementów - li */
      ul li {
        border-top:1px solid #CCC;
      }

      /* wygląd pierwszego elementu - li */
      ul li:first-child {
        border-top:none;
      }
    </style>
  </head>

  <body>

    <ul>
      <li><a href="#">link 1</a></li>
      <li><a href="#">link 2</a></li>
      <li><a href="#">link 3</a></li>
      <li><a href="#">link 4</a></li>
    </ul>

  </body>
</html>

W następnej części kursu poznamy domyślne cechy elementów a i dowiemy się w jaki sposób je zmienić.