06. Poznajemy domyślne cechy elementu "a" i poznajemy sposób ich zmiany

W poprzedniej części kursu CSS umieściliśmy elementy a w elementach li. Czas zapoznać się z domyślnymi cechami elementów a i dowiedzieć się w jaki sposób możemy je zmienić.

Przyjrzyjmy się jak wygląda nasze menu, które do tej pory udało nam się utworzyć, w poprzednich częściach tego kursu CSS.

Element a domyślnie jest wyświetlane w linii z innymi tego typu elementami, które są umieszczone obok niego. W tym wypadku nasze elementy a są umieszczone w elemencie li, który jest z kolei elementem wyświetlanym w bloku z innymi elementami tego typu. Granicę szerokości i wysokości elementu a określa zawartość jaką w nim umieścimy, w tym wypadku jest to tekst (link 1, link2 itd.). Ponadto sam element a zawiera w sobie kilka dodatkowych domyślnych cech. Element a będzie nieodwiedzonym linkiem do czasu, gdy nie zostanie on kliknięty. Taki nieodwiedzony link posiada domyślne właściwości wyglądu, takie jak:

• color - przeważnie domyślnym kolorem dla nieodwiedzonych elementów a jest kolor niebieski.

Po tym jak klikniemy w dany element a stanie się on odwiedzonym linkiem. Taki odwiedzony link posiada domyślne właściwości wyglądu, takie jak:

• color - inny kolor niż kolor tekstu, który jest umieszczony w nieodwiedzonych elementach a, przeważnie domyślnym kolorem dla odwiedzonych elementów a jest kolor fioletowy.

Kolejną domyślną właściwością wyglądu elementu a jest następująca właściwość:

• text-decoration:underline; - przez co tekst umieszczony w elemencie a jest podkreślony.

Następną domyślną właściwość wyglądu elementu a zobaczymy, w momencie gdy umieścimy kursor myszki nad elementem i klikniemy na niego (nie puszczając lewego przycisku myszki), przez co zmieni się kolor tekstu znajdujący się w danym elemencie a. Kolejną domyślną właściwość wyglądu elementu a, czyli cursor:pointer; zobaczymy gdy najedziemy na niego kursorem myszki, wtedy kursor zmieni swój wygląd na małą dłoń, za co odpowiada wspomniana właściwość cursor wraz z wartością pointer.

• Do zmiany wyglądu nieodwiedzonych linków wykorzystuje się - selektor pseudoklasy :link.

• Do zmiany wyglądu odwiedzonych linków wykorzystuje się - selektor pseudoklasy :visited.

• Do zmiany wyglądu elementów w momencie kliknięcia na nie, wykorzystuje się - selektor pseudoklasy :active.

• Do zmiany wyglądu elementów, na które chcemy najechać kursorem myszki, wykorzystuje się - selektor pseudoklasy :hover.

Przyjrzyjmy się naszemu kodowi HTML jaki do tej pory został umieszczony w części body dokumentu HTML i zapamiętajmy gdzie znajdują się elementy a.

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

Analizując informacje, które zostały przedstawione do tej pory, możemy dojść do wniosku, że aby usunąć podkreślenie tekstu z nieodwiedzonych linków, należy użyć następującej reguły CSS:

a {
  text-decoration:none;
}

Reguła, którą utworzyliśmy powyżej, usunie podkreślenie tekstu ze wszystkich linków w danym dokumencie HTML, czyli ze wszystkich elementów a. Jednak nie chcemy, aby dana reguła przeznaczona dla wyglądu elementów a usuwała podkreślenie z każdego takiego elementu w dokumencie HTML, tylko chcemy, aby odnosiła się do tych elementów a, które znajdą się w naszym pionowym menu CSS. Żeby udoskonalić naszą regułę CSS odnoszącą się do elementów a umieszczonych w elementach li, musimy połączyć ze sobą selektor potomka oraz selektor elementu, co zostało przedstawione i opisane poniżej:

ul li a {
  text-decoration:none;
}

Właściwość text-decoration:none; spowoduje usunięcie dodatkowej dekoracji z tekstu. Selektor ul li a wyszukuje w kodzie HTML każdy element a, który jest potomkiem elementu li, który z kolei jest potomkiem elementu ul, czyli dana reguła CSS odszuka wszystkie elementy a, które zostały umieszczonych w tych elementach li, które są umieszczone w elemencie ul. W sytuacji gdy zmienimy, za pomocą selektora elementu, kolor tekstu, który został umieszczony w elemencie a, to nie musimy martwić się o kolor tekstu odwiedzonych oraz nieodwiedzonych elementów a, jak również o kolor tekstu elementu a, który jest definiowany za pomocą selektora :active, ponieważ selektor elementu ma pierwszeństwo przed selektorami :link, :visited, :active o czym była mowa w dziale pierwszym - Stopień ważności selektorów CSS. W jednej z następnych części tego działu kursu CSS ustalimy jak ma zmieniać się wygląd elementów a, w momencie gdy najedziemy na dany element kursorem myszki. Użyjemy do tego celu następującej reguły CSS:

ul li a:hover {
  /* ta reguła CSS nie zawiera żadnych właściwości CSS */
}

Jak na razie zostawimy tę regułę CSS bez właściwości CSS. Od tej pory nasze pionowe menu CSS prezentuje się następująco:

Pełny kod HTML z tej części kursu CSS, w której zmieniliśmy domyślny wygląd elementów a, został umieszczony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>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;
      }

      /* wygląd elementów - a */
      ul li a {
        text-decoration:none;
      }

      /* wygląd elementu - a - w momencie najechania na niego kursorem myszki */
      ul li a:hover {}
    </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 CSS sprawimy, aby szerokość elementu a automatycznie dopasowywała się do szerokości jego rodzica, czyli elementu li.