Стилизация списков с использованием CSS-атрибутов

Введение

В этом практическом занятии студенты изучат искусство стилизации списков с использованием CSS, сосредоточившись на трансформации стандартного вида упорядоченных, неупорядоченных и описательных списков. Участники узнают, как настраивать маркеры списков с помощью различных свойств CSS, таких как list-style-type, list-style-image и list-style-position, что позволит им создавать визуально привлекательные и уникальные дизайны списков.

Практическое занятие проведет учащихся по шагам создания HTML-проекта с разными типами списков и последующего применения техник CSS для изменения стилей списков. В конце практического занятия студенты приобретут практический опыт в изменении типов маркеров списков, замене стандартных маркеров на пользовательские изображения, настройке размещения маркеров и использовании сокращенного свойства list-style для эффективной стилизации списков.

Настройка HTML-проекта и создание базового списка

В этом шаге вы настроите базовый HTML-проект и создадите свой первый список, чтобы подготовиться к изучению стилизации списков с использованием CSS. Мы начнем с создания простой структуры проекта и HTML-файла с разными типами списков.

Во - первых, перейдите в директорию проекта:

cd ~/project

Создайте новую директорию для проекта по стилизации списков с использованием CSS:

mkdir css-list-styling
cd css-list-styling

Теперь создайте HTML-файл с именем index.html с использованием WebIDE:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
  </head>
  <body>
    <h1>My Favorite Programming Languages</h1>

    <h2>Ordered List (Numbered)</h2>
    <ol>
      <li>Python</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>C++</li>
    </ol>

    <h2>Unordered List (Bulleted)</h2>
    <ul>
      <li>Web Development</li>
      <li>Data Science</li>
      <li>Machine Learning</li>
      <li>Mobile Apps</li>
    </ul>

    <h2>Description List</h2>
    <dl>
      <dt>HTML</dt>
      <dd>Hypertext Markup Language for web structure</dd>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets for web design</dd>
    </dl>
  </body>
</html>

Этот HTML-файл демонстрирует три типа списков:

Ordered List (<ol>): Автоматически нумеруется
Unordered List (<ul>): Использует стандартные маркеры-disc
Description List (<dl>): Используется для пар "термин - описание"

Пример вывода при просмотре в браузере:

Ordered list будет отображать номера (1, 2, 3, 4)
Unordered list будет отображать маркеры-disc
Description list будет отображать термины и описания

Применить list-style-type для изменения маркера списка

В этом шаге вы узнаете, как использовать CSS-свойство list-style-type для настройки вида маркеров списков. Свойство list-style-type позволяет заменить стандартные маркеры-disc или номера на различные предопределенные стили.

Откройте файл index.html в WebIDE и добавьте секцию <style> в <head>, чтобы определить CSS-правила:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
    <style>
      /* Unordered List Styles */
      .square-list {
        list-style-type: square;
      }

      .circle-list {
        list-style-type: circle;
      }

      .disc-list {
        list-style-type: disc;
      }

      /* Ordered List Styles */
      .decimal-list {
        list-style-type: decimal;
      }

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

      .upper-roman-list {
        list-style-type: upper-roman;
      }
    </style>
  </head>
  <body>
    <h1>List Style Type Examples</h1>

    <h2>Unordered List Styles</h2>
    <ul class="square-list">
      <li>Square Markers</li>
      <li>Web Development</li>
      <li>Design Techniques</li>
    </ul>

    <ul class="circle-list">
      <li>Circle Markers</li>
      <li>Programming</li>
      <li>Software Engineering</li>
    </ul>

    <h2>Ordered List Styles</h2>
    <ol class="decimal-list">
      <li>Decimal Numbers</li>
      <li>Standard Numbering</li>
      <li>Default Style</li>
    </ol>

    <ol class="lower-alpha-list">
      <li>Lowercase Letters</li>
      <li>Alphabetical Ordering</li>
      <li>a, b, c Style</li>
    </ol>

    <ol class="upper-roman-list">
      <li>Uppercase Roman Numerals</li>
      <li>Classic Numbering</li>
      <li>I, II, III Style</li>
    </ol>
  </body>
</html>

Основные значения list-style-type:

Unordered Lists: disc (стандартный), circle, square
Ordered Lists: decimal, lower-alpha, upper-roman и другие

Пример вывода в браузере:

Квадратные маркеры для первого неупорядоченного списка
Круглые маркеры для второго неупорядоченного списка
Десятичные числа для первого упорядоченного списка
Маленькие буквы для второго упорядоченного списка
Большие римские цифры для третьего упорядоченного списка

Использовать list-style-image для замены стандартных маркеров

В этом шаге вы узнаете, как использовать list-style-image для замены стандартных маркеров списков на пользовательские изображения. Сначала вам нужно скачать несколько примеров иконок для использования в качестве маркеров списков.

Создайте директорию images в вашем проекте:

cd ~/project/css-list-styling
mkdir images

Скачайте примеры иконок с использованием curl:

curl -o images/check-icon.png https://labex.io/courses/icons/check-icon.png
curl -o images/star-icon.png https://labex.io/courses/icons/star-icon.png

Теперь обновите файл index.html, чтобы включить пользовательские изображения маркеров списков:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling with Images</title>
    <style>
      .check-list {
        list-style-image: url("images/check-icon.png");
      }

      .star-list {
        list-style-image: url("images/star-icon.png");
      }

      /* Adjust icon size if needed */
      .check-list li,
      .star-list li {
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Custom List Markers with Images</h1>

    <h2>Checklist</h2>
    <ul class="check-list">
      <li>Complete CSS Tutorial</li>
      <li>Practice List Styling</li>
      <li>Create Web Project</li>
    </ul>

    <h2>Favorite Topics</h2>
    <ul class="star-list">
      <li>Web Development</li>
      <li>Design Principles</li>
      <li>User Experience</li>
    </ul>
  </body>
</html>

Основные моменты о list-style-image:

Использует url() для указания пути к изображению
Заменяет стандартные маркеры списков на пользовательские изображения
Работает с как упорядоченными, так и неупорядоченными списками
Размер изображения можно контролировать с использованием CSS-padding

Пример вывода в браузере:

Список дел с маркерами в виде иконки галочки
Список любимых тем с маркерами в виде звездочки

Настроить list-style-position для размещения маркера

В этом шаге вы изучите CSS-свойство list-style-position, которое контролирует, как маркеры списков располагаются относительно содержимого списка. Это свойство имеет два основных значения: outside (стандартное) и inside.

Обновите файл index.html, чтобы продемонстрировать разные позиции маркеров списков:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>List Style Position</title>
    <style>
      .outside-list {
        list-style-position: outside;
        background-color: #f0f0f0;
        padding: 10px;
        width: 300px;
      }

      .inside-list {
        list-style-position: inside;
        background-color: #e0e0e0;
        padding: 10px;
        width: 300px;
      }

      /* Add some visual separation */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>List Style Position Demonstration</h1>

    <h2>Outside List Markers (Default)</h2>
    <ul class="outside-list">
      <li>Markers positioned outside the content area</li>
      <li>Default CSS behavior</li>
      <li>Markers align to the left of the text</li>
    </ul>

    <h2>Inside List Markers</h2>
    <ul class="inside-list">
      <li>Markers positioned inside the content area</li>
      <li>Markers are part of the list item text</li>
      <li>Content starts immediately after the marker</li>
    </ul>
  </body>
</html>

Основные моменты о list-style-position:

outside: Маркеры располагаются за пределами контентного блока (стандартно)
inside: Маркеры располагаются внутри контентного блока
Влияет на макет и выравнивание элементов списка
Полезно для создания компактных или визуально выделенных списков

Пример вывода в браузере:

Список с маркерами снаружи: Маркеры находятся слева от текста
Список с маркерами внутри: Маркеры находятся внутри области текста
Фоновые цвета помогают визуализировать разницу

Объединить стили списков с сокращенным свойством list-style

В этом шаге вы узнаете, как использовать сокращенное свойство list-style для объединения нескольких атрибутов стилизации списка в одном объявлении. Это свойство позволяет установить list-style-type, list-style-image и list-style-position в одной строке.

Обновите файл index.html, чтобы продемонстрировать сокращенное свойство list-style:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Shorthand List Styles</title>
    <style>
      /* Сокращенное объявление с типом и позицией */
      .todo-list {
        list-style: square inside;
      }

      /* Сокращенное объявление с изображением и позицией */
      .project-list {
        list-style: inside url("images/star-icon.png");
      }

      /* Полное сокращенное объявление с типом, изображением и позицией */
      .complete-list {
        list-style: lower-roman inside url("images/check-icon.png");
      }

      /* Сброс к стандартному стилю */
      .default-list {
        list-style: initial;
      }

      /* Удаление стилизации списка */
      .no-style-list {
        list-style: none;
      }

      /* Добавление отступов для лучшей читаемости */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Shorthand List Style Demonstration</h1>

    <h2>Список дел (квадратные маркеры)</h2>
    <ul class="todo-list">
      <li>Изучить стилизацию списков в CSS</li>
      <li>Практиковать сокращенные свойства</li>
      <li>Создать стильные списки</li>
    </ul>

    <h2>Список проектов (иконки звездочки)</h2>
    <ul class="project-list">
      <li>Проект по веб-разработке</li>
      <li>Система дизайна</li>
      <li>Взаимодейственные учебники</li>
    </ul>

    <h2>Завершенные проекты (иконки галочки)</h2>
    <ol class="complete-list">
      <li>Основы CSS</li>
      <li>Респонсивный дизайн</li>
      <li>Дополнительные техники стилизации</li>
    </ol>

    <h2>Список без стиля</h2>
    <ul class="no-style-list">
      <li>Удалены маркеры списка</li>
      <li>Чистый список без стиля</li>
      <li>Без визуальных индикаторов</li>
    </ul>
  </body>
</html>

Основные моменты о сокращенном свойстве list-style:

Объединяет list-style-type, list-style-image и list-style-position
Порядок не имеет особого значения для большинства значений
none удаляет всю стилизацию списка
initial сбрасывает стили до стандартных стилей браузера

Примеры сокращенных комбинаций:

list-style: square inside;
list-style: inside url('image.png');
list-style: lower-roman inside url('icon.png');

Резюме

В этом практическом занятии участники исследуют методы стилизации списков в CSS, создавая HTML-проект с различными типами списков, включая упорядоченные, неупорядоченные и списки описаний. Практическое занятие помогает ученикам настраивать внешний вид списков с использованием CSS-свойств, таких как list-style-type, list-style-image и list-style-position.

Практическое упражнение демонстрирует, как изменить стандартные маркеры списков, заменить стандартные точки на пользовательские изображения и настроить расположение маркеров, что позволяет приобрести навыки по улучшению дизайна веб-страниц и визуального представления списков с использованием CSS-атрибутов.