Autor publikacji
Virtual Patriot - Administrator

Poznajemy element "ul" i usuwamy z niego domyślne właściwości wyglądu

Data publikacji
Ostatnio edytowano

Na samym początku tworzenia pionowego menu CSS musimy wybrać element HTML, który idealnie nadaje się do jego utworzenia. Będziemy szukać elementu, który tworzy listę, ponieważ w gruncie rzeczy menu na stronie internetowej to właśnie lista, która zawiera w sobie odnośniki prowadzące do innych stron czy podstron.

Elementami HTML, które pomogą nam utworzyć wspomnianą listę, są ul oraz li. Element ul wraz z elementami li został przedstawiony w kodzie znajdującym się pod spodem:

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

Elementy po wyświetleniu w oknie przeglądarki prezentują się następująco:

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

Elementy li wyświetlają się jeden pod drugim, ponieważ są to elementy wyświetlane w bloku. Element ul jest również elementem wyświetlanym w bloku.

Ponadto sam element ul zawiera w sobie kilka domyślnych cech, takich jak:

  • padding-left - wartość jego lewego marginesu wewnętrznego nie jest równa 0, dlatego tworzy się przez to niepotrzebny odstęp wewnątrz samego elementu ul.
  • margin-top i margin-bottom - wartość jego górnego i dolnego marginesu zewnętrznego nie jest równa 0, dlatego tworzą się przez to niepotrzebne odstępy na zewnątrz elementu ul.
  • list-style-type - wartością domyślną tej właściwości dla elementu ul jest wartość disc, przez co przy każdym elemencie li umieszczonym w elemencie ul widzimy znak przedstawiający kółko i nazywa się on wyróżnikiem listy bądź wykazu.

Naszym pierwszym zadaniem przy tworzeniu menu CSS będzie usunięcie tych domyślnych cech z elementu ul. Możemy to uczynić w prosty sposób wykorzystując do tego celu selektor elementu i tworząc odpowiednią regułę CSS, która została zaprezentowana poniżej:

ul {
  list-style-type:none;
  margin:0;
  padding:0;
}

Selektor ul odszuka każdy element ul w dokumencie HTML i doda do niego właściwości wyglądu, które umieściliśmy w nawiasie klamrowym, a więc:

  • list-style-type:none; - spowoduje usunięcie stylu wyróżników listy ze wszystkich elementów znajdujących się w elemencie ul, czyli z elementów li.
  • margin:0; - spowoduje wyzerowanie wszystkich marginesów zewnętrznych, dzięki czemu pozbędziemy się niepotrzebnych odstępów na zewnątrz elementu ul.
  • padding:0; - spowoduje wyzerowanie wszystkich marginesów wewnętrznych, dzięki czemu pozbędziemy się niepotrzebnych odstępów wewnątrz elementu ul.

A tak teraz będą wyglądać nasze elementy ul oraz li, które stanowią podstawową strukturę menu CSS:

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

Pełny kod HTML z tej części kursu CSS znajduje się poniżej:

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

    <style>
      ul {
        list-style-type:none;
        margin:0;
        padding:0;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

Wybór elementu HTML do utworzenia pionowego menu CSS i usunięcie z niego domyślnych cech mamy już za sobą. W następnej części kursu zajmiemy się formatowaniem wyglądu elementu ul.