Projektujemy menu

Rozdział 6

Jak zapewne zauważyłeś, w naszym kodzie CSS użyliśmy samych nazw tagów HTML. W <article> na przykład szukaliśmy <figure>:

article figure  { ... }

W CSS istnieją jednak inne metody, by odnieść się do poszczególnych elementów. Jedną z nich poznamy na przykładzie menu na stronie. Uznajmy, że dysponujemy takim oto kodem HTML, który należy "ostylować" używając kodu CSS w pliku main.css.

<!DOCTYPE html>
<html lang="pl">
  <head>
      <meta charset="utf-8">
      <title>Menu</title>
      <link rel="stylesheet" href="main.css" media="screen">
  </head>
  <body>
    <nav>
      <ul>
        <li>
          <a href="index.html">Strona główna</a>
        </li>
        <li>
          <a href="szkolenia.html">Szkolenia</a>
        </li>
        <li>
          <a href="konferencje.html">Konferencje</a>
        </li>
        <li>
          <a href="onas.html">O nas</a>
        </li>
      </ul>
    </nav>
  </body>
</html>

Będzie to strona tylko i wyłącznie z samym menu, które będzie składać się z czterech pozycji:

Strona główna
Szkolenia
Konferencje
O nas

Docelowo ma to wyglądać tak:

Zapytasz zapewne, dlaczego w kodzie odpowiadającym za menu użyłem elementu <nav> i <ul> oraz <li>. Otóż <nav> służy do oznaczania wszelkiego rodzaju nawigacji na stronach internetowych, które zawierają linki do wewnętrznych lub zewnętrznych stron. A więc umieszczając <nav> w kodzie mówimy tak: wszystko, co będzie wewnątrz <nav> będzie służyło do nawigowania na stronie.

W <nav> z kolei umieściłem <ul> i kilka elementów <li>. Otóż <ul> oznacza nieuporządkowaną listę elementów, a więc taką w której kolejność jest nieistotna. Z kolei <li> oznacza pojedynczy element takiej listy. W świecie tworzenia stron internetowych utarło się, że – biorąc pod uwagę wszystkie dostępne tagi HTML – lista nieuporządkowana wydaje się najrozsądniejszym wyborem, jeśli chodzi o odwzorowanie menu na stronach. Tak naprawdę menu jest swego rodzaju listą linków, która została stworzona bez jakiejś z góry określonej reguły co do kolejności jej elementów.

Bez gotowego pliku stylów main.css, nasza nieuporządkowana lista wyświetla się domyślnie tak:

Zapewne wielokrotnie widziałeś już podobną, choćby podczas tworzenia plików tekstowych, kiedy chciałeś wymienić kilka elementów w postaci listy punktowej. Bez kodu CSS lista <ul> wygląda podobnie - każdy jej element rozpoczyna się od kropki. Natomiast nasze menu jest nieco inne. Ma obramowanie, co więcej, poszczególne jego elementy również. Każdy element listy ma też tło, a linki w tym menu są koloru czarnego (domyślnie w HTML każdy link wyświetlany jest niebieskim kolorem, co widać na załączonym obrazku). Spróbujmy odwzorować to wszystko w naszym kodzie CSS.

Standardowo, zaczynamy od najbardziej ogólnego, zewnętrznego tagu w kodzie HTML. Jest nim <nav>. Jak powiedzieliśmy, <nav> jest elementem, który mówi, że w jego środku zawiera się wszelki kod odpowiedzialny za nawigację. A więc oprócz semantycznego znaczenia, nie ma tutaj dla nas za wiele pracy, ponieważ element ten jako taki nie wymaga w obecnej sytuacji zmian w wyglądzie (tym bardziej, że domyślnie przeglądarka nie aplikuje mu żadnych stylów).

Następnie mamy tag <ul>, który oznacza listę nieuporządkowaną. Chcemy, by nasza lista była wyświetlana nieco inaczej, niż domyślnie. Najważniejsze, by miała tło:

nav ul {
  background-color: LightCyan;
}

Dla tła wybraliśmy kolor o nazwie LightCyan. Spójrzmy, czy coś się zmieniło, dzięki naszym poprawkom:

Rzeczywiście! Udało się zaaplikować kolor cyjan jako tło elementu <ul>. Wszystko dlatego, że w <nav> poszukaliśmy tagów <ul> i zaaplikowaliśmy im tło. Wyraża to poniższy selektor, jak zapewne pamiętasz:

nav ul {}

Niestety, nadal widoczne są czarne, okrągłe punkty. Możemy je schować, dzięki właściwości "list-style":

nav ul {
  background-color: LightCyan;
  list-style: none;
}

Ustawiona na "none" sprawia, że lista nie będzie miała żadnych znaków wyróżniających poszczególne punkty.

Wygląda to już nieco lepiej:

Dziwi jednak duży odstęp od lewej. Wyzerujmy go, stosując znany nam z wcześniejszego ćwiczenia "padding":

nav ul {
  background-color: LightCyan;
  list-style: none;
  padding: 0;
}

Jak widać, był to dobry pomysł. Powoli zbliżamy się do ideału:

Teraz pora popracować nad wymiarami. Nasza nawigacja ma być szeroka na 200 pikseli:

nav ul {
  background-color: LightCyan;
  list-style: none;
  padding: 0;
  width: 200px;
}

Na sam koniec dodajmy obramowanie listy. Niech będzie ono wyrażone linią ciągłą o szerokości 1 piksel. Kolor? Wybierzmy "LightBlue":

nav ul {
  background-color: LightCyan;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid LightBlue;
}

Wynik tej zmiany jest cokolwiek zadowalający:

Pojawiła się ramka – pięknie. Pora teraz zająć się elementami listy, do których możemy się odnieść używając poniższego selektora CSS:

nav ul li {}

A więc w <nav> poszukamy <ul>, a w <ul> wszystkich elementów <li> i im nadamy jakieś własności. Co rzuca się najbardziej w oczy to brak obramowań dolnych dla każdego elementu listy, więc dodajmy je:

nav ul li {
  border-bottom: 1px solid LightBlue;
}

W tym celu użyliśmy właściwości border-bottom, a więc z angielskiego można to przetłumaczyć właśnie jako obramowanie (border) dolne (bottom).

Obecnie, nasze menu wygląda tak:

Uwidoczniły się przy okazji niestety dwa problemy. Pierwszy z nich to bardzo mało przestrzeni pomiędzy poszczególnymi elementami listy. Zmieńmy to, wykorzystując stary, dobry "padding":

nav ul li {
  border-bottom: 1px solid LightBlue;
  padding: 5px;
}

Jest znacznie lepiej, prawda?

Drugim problemem jest dziwna, podwójna linia na samym dole naszego menu. To dlatego, że "naszły" na siebie dwa obramowania - jedno ustawione dla <ul>, a drugie dla <li> (w tym przypadku dla ostatniego <li> - "O nas").

Można łatwo to obejść, przy okazji poznając kolejny, pomocny element, którego możemy użyć tworząc nasze selektory w CSS. Powiedzieliśmy sobie bowiem, że obramowanie dolne ostatniego elementu w liście (a więc ostatniego tagu <li>) pokrywa się z ogólnym obramowaniem, jakie założyliśmy dla <ul> tutaj:

nav ul {
  background-color: LightCyan;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid LightBlue;
}

Pamiętasz zapewne, że w CSS możemy resetować różne wartości. Zrobiliśmy tak na przykład z graficznym wyróżnieniem elementu w liście:

list-style: none;

Zróbmy to samo, tyle że używając właściwości border-bottom, którą "zresetujemy" i ustawimy wartość "none". Jedyna różnica jest taka, że tym razem wybierzemy poprzez selektor tylko ostatni element <li>:

nav ul li:last-child {
  border-bottom: none;
}

Efekt jest jak najbardziej zadowalający:

Podwójne obramowanie znikło, a wszystko dlatego, że poszukaliśmy ostatni element <li> w <ul> i wyłączyliśmy mu obramowanie dolne. Stało się to dzięki selektorowi tzw. pseudoklasy o nazwie "last-child":

nav ul li:last-child {}

Powyższy selektor można przetłumaczyć następująco:

"Poszukaj elementu <nav>, a w nim elementów <ul>, z kolei w elementach <ul> znajdź ostatni (a więc "last-child") element typu <li> i jemu przypisz poniższe wartości". Warto zaznaczyć, że wszelkie selektory pseudoklas używamy poprzez dwukropek i nazwę selektora.

Ostatnia rzecz, jaką musimy zrobić to dostosowanie tekstu w linkach. Otóż domyślnie linki tworzymy w HTML jak poniżej:

<a href="adres">tekst, po kliknięciu którego przeniesiemy się do podanego w href adresu</a>

A więc używamy tagu <a> z atrybutem href. Jako wartość tego atrybutu podajemy adres, do którego chcemy przenieść użytkownika, jeśli kliknie on w nasz link. W co kliknie zależy od tego, jaką treść umieścimy między <a> i </a>. W naszym przykładzie mamy cztery linki, jeden z nich wygląda następująco w kodzie HTML:

<a href="szkolenia.html">Szkolenia</a>

A więc w przeglądarce ujrzymy napis "Szkolenia", który możemy najechać kursorem myszki i kliknąć. Zostaniemy wtedy przeniesieni do strony, która została zapisana w pliku "szkolenia.html".

Znając już to, jaki tag odpowiada za umieszczanie linków w kodzie HTML, możemy stworzyć specjalny selektor CSS, który ich "poszuka". Wtedy z łatwością umieścimy nowe deklaracje dotyczące wyglądu:

nav ul li a {}

Voilà!

Uzupełnijmy teraz ten selektor o nowe właściwości. Przede wszystkim zmieńmy kolor fonta na czarny:

nav ul li a {
  color: black;
}

Podejrzyjmy od razu w przeglądarce, co się zmieniło:

Świetnie, mamy czarny kolor linków. Pora teraz zrobić coś z podkreśleniem. Otóż musisz wiedzieć, że domyślnie, podobnie jak z odstępem od lewej strony w przypadku elementów listy, przeglądarka ustawia linkom podkreślenie w postaci "text-decoration: underline" w CSS. Musimy zresetować tę wartość, jak robiliśmy to już kilka razy podczas wykonywania ćwiczeń przy użyciu wartości "none":

nav ul li a {
  color: black;
  text-decoration: none;
}

Pięknie! Uzyskaliśmy to, o co nam chodziło!

Przy okazji, jeśli pracujemy już z linkami, może pamiętasz, że na wielu stronach po najechaniu kursorem myszki linki podkreślają się. Na przykład na moim Twitterze umieściłem link do ogłoszenia dotyczącego szkolenia z HTML5:

Kiedy najeżdżam na niego kursorem myszki dzieje się coś ciekawego, co jako użytkownik internetu dobrze znasz. Tekst linku podkreśla się:

Spróbujmy zrobić coś podobnego w naszym menu. Niech po najechaniu każdego linka ten podkreśli się. Wykorzystamy do tego selektor pseudoklasy "hover":

nav ul li a:hover {
  text-decoration: underline;
}

Tym razem dodaliśmy go do linków (<a>). Selektor ten oznacza stan, kiedy najeżdżamy kursorem myszki na link. Równie dobrze moglibyśmy skojarzyć go z innymi tagami:

div:hover
li:hover
img:hover

I tak dalej. Działanie ":hover" tłumaczymy sobie, odpowiadając na pytanie: "jak będzie wyglądał element użyty razem z :hover po najechaniu na niego kursorem myszki".

Wynik działania pokazuje poniższy zrzut ekranu:

Umieściliśmy kursor nad linkiem "Konferencje", więc jego tekst samoistnie podkreślił się.

Podsumowując, finalny kod CSS wygląda tak:

nav ul {
  background-color: LightCyan;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid LightBlue;
}

nav ul li {
  border-bottom: 1px solid LightBlue;
  padding: 5px;
}

nav ul li:last-child {
  border-bottom: 0;
}

nav ul li a {
  color: black;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline;
}

Przeanalizuj go spokojnie. Z nowości pojawiły się selektory pseudoklas ":last-child" oraz ":hover". Na pewno przydadzą Ci się one w przyszłości.

W tym rozdziale poznałeś też, jak wstawia się linki. Na razie udało się nam dodać odsyłacze do fizycznych plików (szkolenia.html etc.). Nic nie stoi jednak na przeszkodzie, by "linkować" do adresów www. Jako przykład podajmy mojego bloga:

<a href="http://ferrante.pl">Mój blog</a>

Taki link wyświetli się tak: Mój blog. Zauważ, że w atrybucie href podałem "http://ferrante.pl" (link koniecznie musi zaczynać się od "http://", a nie "www", inaczej nie zadziała!). Z kolei pomiędzy znacznikiem <a> umieszczamy tekst, którego kliknięcie spowoduje przejście do danej strony.