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

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:

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:

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

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

Previous01. Wprowadzenie do drugiego działu kursu CSS Next03. Formatujemy wygląd elementu "ul"

Last updated 1 month ago