Dodajemy nowe właściwości wyglądu do elementów "a"

W tej części kursu CSS dodamy do naszych odnośników nieco więcej właściwości CSS, dzięki czemu urozmaicimy ich wygląd.

Na początek do elementów a dodamy marginesy wewnętrzne, dzięki czemu zawartość, która będzie znajdować się w elemencie a, zostanie odsunięta od jego krawędzi. Efekt ten uzyskamy za pomocą właściwości padding:10px; która spowoduje dodanie marginesów wewnętrznych o wartości 10 pikseli, do danego elementu HTML.

Wspomnianą właściwość padding wraz z wartością 10px dodajemy do reguły CSS, która odpowiada za wygląd elementów a, czyli:

ul li a {
  display:block;
  text-decoration:none;
  background-color:#EEE;
  padding:10px;
}

Nasze elementy HTML, które tworzą pionowe menu CSS, po dodaniu marginesów wewnętrznych o wartości 10 pikseli do elementów a, prezentują się następująco:

Następnym naszym krokiem będzie dodanie do elementów a jakiegoś nowego koloru tekstu, co uzyskamy dzięki właściwości color oraz wartości #00A0AA.

ul li a {
  display:block;
  text-decoration:none;
  background-color:#EEE;
  padding:10px;
  color:#00A0AA;
}

Nasze elementy a, po dodaniu do nich nowego koloru tekstu:

Następną właściwością CSS jaką dodamy do elementu a będzie białe obramowanie, czyli użyjemy właściwość border:1px solid white; w regule CSS, która odpowiada za wygląd wspomnianych elementów a.

Dodatkowo możemy zwiększyć wielkość czcionki w naszych elementach a, efekt ten uzyskamy za pomocą właściwości font-size:18px;.

Dodajemy wspomniane właściwości CSS do reguły, która odpowiada za wygląd elementów a.

ul li a {
  display:block;
  text-decoration:none;
  background-color:#EEE;
  padding:10px;
  color:#00A0AA;
  font-size:18px;
  border:1px solid #FFF;
}

A tak teraz prezentują się nasze elementy HTML, które tworzą pionowe menu CSS:

Kolejną czynnością jaką wykonamy w tej części kursu CSS będzie wyśrodkowanie tekstu w elementach a, efekt ten uzyskamy dzięki właściwości text-align:center; którą dodajemy do reguły CSS odpowiadającej za wygląd naszych elementów a, co zostało zaprezentowane w kodzie znajdującym się poniżej:

ul li a {
  display:block;
  text-decoration:none;
  background-color:#EEE;
  padding:10px;
  text-align:center;
  color:#00A0AA;
  font-size:18px;
  border:1px solid #FFF;
}

Tekst w elementach a został wyśrodkowany:

Naszym ostatnim krokiem w tej części kursu CSS będzie dodanie przykładowego tła obrazkowego do elementów a. Wspomniane tło obrazkowe znajduje się poniżej i należy je pobrać.

tło obrazkowe użyte w menu

Po najechaniu kursorem myszki na przedstawione powyżej tło, klikamy prawym przyciskiem myszy i wybieramy opcję zapisz obrazek jako. Jako nazwę podajemy, na przykład obrazek.png i zapisujemy go na własnym komputerze.

Następnie umieszczamy nasz obrazek w tym samym folderze, gdzie znajduje się plik HTML z naszym menu, dzięki czemu ścieżka do naszego tła obrazkowego będzie wyglądać następująco: obrazek.png. Jeżeli chcemy umieścić nasz obrazek w innym folderze, to należy zapoznać się ze sposobami tworzenia ścieżek do plików, które zostały opisane przy okazji dołączania zewnętrznego kaskadowego arkusza stylów CSS do dokumentu HTML.

Do wypełnienia danego elementu HTML tłem obrazkowym należy wykorzystać właściwość background-image, a jako wartość tej właściwości należy podać ścieżkę do pliku z tłem obrazkowym, które chcemy, aby posiadał interesujący nas element HTML.

Ponadto tło obrazkowe w elemencie HTML domyślnie jest powtarzane zarówno w pionie jak i w poziomie. Jednak my sprawimy, aby powtarzało się tylko w poziomie, czyli użyjemy właściwość background-repeat wraz z wartością repeat-x.

Dodajemy wspomniane właściwości CSS do reguły CSS, która odpowiada za wygląd elementów a, czyli:

ul li a {
  display:block;
  text-decoration:none;
  background-color:#EEE;
  padding:10px;
  text-align:center;
  color:#00A0AA;
  font-size:18px;
  border:1px solid #FFF;
  background-image:url('obrazek.png');
  background-repeat:repeat-x;
}

Nasze elementy a po dodaniu do nich tła obrazkowego prezentują się następująco:

Co stało by się gdybyśmy nie dodali do naszej reguły CSS właściwości background-repeat:repeat-x;?

Odpowiedź znajduje się poniżej.

W sytuacji gdy nasz element a zawierałby w sobie jakąś większą ilość tekstu, to jego tło obrazkowe wyglądałoby, jak ustawione jedno pod drugim. Natomiast właściwość background-repeat:repeat-x; eliminuje ten efekt, ponieważ tło obrazkowe będzie powtarzało się tylko w poziomie, a nie w poziomie i pionie.

Dzięki właściwości background-repeat:repeat-x; w miejscu gdzie nasz element a przekracza granicę wysokości tła obrazkowego, staje się widoczny kolor tła jaki ustaliśmy dla elementów a, czyli w tym wypadku tym kolorem jest kolor szary, za co odpowiada właściwość background-color:#EEE; Dolna granica naszego tła obrazkowego to również kolor szary, dlatego tło obrazkowe z kolorem tła elementu wyglądają tak jakby stanowiły całość.

Pełny kod HTML z tej części kursu CSS został przedstawiony pod spodem:

<!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;
      }

      /* wygląd elementów - a */
      ul li a {
        display:block;
        text-decoration:none;
        background-color:#EEE;
        padding:10px;
        text-align:center;
        color:#00A0AA;
        font-size:18px;
        border:1px solid #FFF;
        background-image:url('obrazek.png');
        background-repeat:repeat-x;
      }

      /* 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 ustalimy jak ma zmienić się wygląd naszych elementów a, w momencie gdy najedziemy, na któryś z nich, kursorem myszki.