Kategorie
Kurs CSS

Lista CSS – Właściwości i stylizowanie

Lista w CSS umożliwia uporządkowanie informacji w sposób przejrzysty i łatwy do zrozumienia. Poniżej przedstawię, jak tworzyć listy w HTML oraz jak je stylizować za pomocą CSS, aby nadać im atrakcyjny wygląd.

Tworzenie list w HTML

HTML obsługuje dwa główne typy list:

  1. Listy nieuporządkowane (<ul>)
  2. Listy uporządkowane (<ol>)

Listy nieuporządkowane (<ul>)

Listy nieuporządkowane są używane, gdy kolejność elementów nie ma znaczenia. Co więcej każdy element listy jest poprzedzony punktorami (bullet points).

<ul>
  <li>Punkt pierwszy</li>
  <li>Punkt drugi</li>
  <li>Punkt trzeci</li>
</ul>

Listy uporządkowane (<ol>)

Listy uporządkowane są używane, gdy elementy mają być numerowane. W tym przypadku każdy element listy jest oznaczony za pomocą numeru.

<ol>
  <li>Punkt pierwszy</li>
  <li>Punkt drugi</li>
  <li>Punkt trzeci</li>
</ol>

Stylizowanie list za pomocą CSS

Przede wszystkim CSS daje nam wiele możliwości stylizowania list, w tym zmiany typu punktorów, odstępów, kolorów i innych aspektów wyglądu. Dlatego niżej omówię kilka podstawowych właściwości CSS, które są używane do stylizacji list.

Właściwość list-style-type

list-style-type określa typ markera używanego dla elementów listy.

Przykłady:

  • disc – domyślny punktor (kropka) dla list nieuporządkowanych
  • circle – okrągły punktor
  • square – kwadratowy punktor
  • none – brak markera
  • decimal – domyślny numer dla list uporządkowanych
  • roman – numery rzymskie (duże litery)
  • lower-alpha – małe litery alfabetu
ul {
  list-style-type: circle;
}

ol {
  list-style-type: lower-alpha;
}

Właściwość list-style-image

list-style-image pozwala użyć obrazu jako punktor listy.

ul {
  list-style-image: url('path/to/image.png');
}

Właściwość list-style-position

list-style-position określa, gdzie ma być wyświetlany punktor – wewnątrz (inside) lub na zewnątrz (outside) elementu listy.

ul {
  list-style-position: inside;
}

Właściwość list-style

list-style jest skrótem umożliwiającym jednoczesne ustawienie list-style-type, list-style-position oraz list-style-image.

ul {
  list-style: square inside url('path/to/image.png');
}

Stylizowanie list CSS – przykłady

Niestandardowe punkty listy

Stylizowanie listy z kwadratowymi punktorami i wyrównaniem wewnętrznym.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lista z kwadratowymi punktorami</title>
  <style>
    ul.custom-list {
      list-style-type: square;
      list-style-position: inside;
      padding: 10px;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <ul class="custom-list">
    <li>Punkt pierwszy</li>
    <li>Punkt drugi</li>
    <li>Punkt trzeci</li>
  </ul>
</body>
</html>
  • Punkt pierwszy
  • Punkt drugi
  • Punkt trzeci

Obrazki jako punkty listy

Stylizowanie listy z obrazkami jako punktorami.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lista z obrazkami jako punktorami</title>
  <style>
    ul.image-list {
      list-style-image: url('path/to/image.png');
      padding: 10px;
    }
  </style>
</head>
<body>
  <ul class="image-list">
    <li>Punkt pierwszy</li>
    <li>Punkt drugi</li>
    <li>Punkt trzeci</li>
  </ul>
</body>
</html>
  • Punkt pierwszy
  • Punkt drugi
  • Punkt trzeci

Listy uporządkowane z numeracją rzymską

Stylizowanie listy uporządkowanej z numeracją rzymską.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lista uporządkowana z numeryzacją rzymską</title>
  <style>
    ol.roman-list {
      list-style-type: upper-roman;
      padding: 10px;
      background-color: #e0e0e0;
    }
  </style>
</head>
<body>
  <ol class="roman-list">
    <li>Punkt pierwszy</li>
    <li>Punkt drugi</li>
    <li>Punkt trzeci</li>
  </ol>
</body>
</html>
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci

Zagnieżdżone listy

Listy mogą być również zagnieżdżane, co oznacza, że możemy umieszczać listy wewnątrz innych list. Co więcej stylizacja takich zagnieżdżonych list może być dostosowana do różnych poziomów.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zagnieżdżone Listy</title>
  <style>
    ul.nested-list {
      list-style-type: disc;
    }

    ul.nested-list ul {
      list-style-type: circle;
      padding-left: 20px;
    }

    ul.nested-list ul ul {
      list-style-type: square;
      padding-left: 20px;
    }
  </style>
</head>
<body>
  <ul class="nested-list">
    <li>Punkt pierwszy
      <ul>
        <li>Punkt pierwszy.1
          <ul>
            <li>Punkt pierwszy.1.1</li>
            <li>Punkt pierwszy.1.2</li>
          </ul>
        </li>
        <li>Punkt pierwszy.2</li>
      </ul>
    </li>
    <li>Punkt drugi</li>
    <li>Punkt trzeci</li>
  </ul>
</body>
</html>
  • Punkt pierwszy
    • Punkt pierwszy.1
      • Punkt pierwszy.1.1
      • Punkt pierwszy.1.2
    • Punkt pierwszy.2
  • Punkt drugi
  • Punkt trzeci

W powyższym przykładzie mamy trzy poziomy list, z różnymi stylami punktorów dla każdego poziomu.

Dodawanie odstępów i tła

Dzięki CSS możemy również dodawać odstępy między elementami listy oraz definiować tła.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Odstępy i Tło Listy</title>
  <style>
    ul.styled-list {
      list-style-type: disc;
      padding: 20px;
      background-color: #f9f9f9;
    }

    ul.styled-list li {
      margin-bottom: 10px;
      padding: 10px;
      background-color: #ffffff;
      border: 1px solid #dddddd;
    }
  </style>
</head>
<body>
  <ul class="styled-list">
    <li>Punkt pierwszy</li>
    <li>Punkt drugi</li>
    <li>Punkt trzeci</li>
  </ul>
</body>
</html>
  • Punkt pierwszy
  • Punkt drugi
  • Punkt trzeci

W tym przykładzie dodaliśmy odstępy między elementami listy oraz tło, aby lista wyglądała bardziej estetycznie.

Niestandardowe punktory za pomocą ::before

Aby uzyskać pełną kontrolę nad wyglądem punktorów, możemy użyć pseudoelementu ::before. Dzięki temu możemy wstawić dowolny znak lub obraz przed każdym elementem listy.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Niestandardowy Punktator</title>
  <style>
    ul.custom-bullet {
      list-style: none; /* Ukrywa domyślne punktory */
      padding-left: 0;  /* Usuwa domyślne wcięcie */
    }

    ul.custom-bullet li {
      position: relative; /* Ustawia kontekst pozycyjny dla ::before */
      padding-left: 20px; /* Odstęp dla niestandardowego punktora */
    }

    ul.custom-bullet li::before {
      content: '★'; /* Ustawia niestandardowy znak */
      position: absolute;
      left: 0;
      top: 0;
      color: gold;
    }
  </style>
</head>
<body>
  <ul class="custom-bullet">
    <li>Punkt pierwszy</li>
    <li>Punkt drugi</li>
    <li>Punkt trzeci</li>
  </ul>
</body>
</html>
  • Punkt pierwszy
  • Punkt drugi
  • Punkt trzeci

Sprawdź również inne znaki specjalne.

Lista CSS – podsumowanie

Podsumowując listy w HTML i CSS ułatwiają organizowanie i prezentowanie informacji w sposób uporządkowany i estetyczny. Dlatego zrozumienie podstaw tworzenia i stylizacji list umożliwia tworzenie bardziej zorganizowanych i czytelnych stron internetowych. Co więcej praktyka i eksperymentowanie z różnymi stylami i właściwościami CSS pomogą opanować te techniki i tworzyć bardziej zaawansowane układy. Sprawdź również jak zmienić domyślny kolor i styl wypunktowania listy. Pamiętaj, aby testować swoje projekty w różnych przeglądarkach, aby upewnić się, że wyglądają i działają zgodnie z oczekiwaniami użytkowników.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *