Стилизация списков CSS

Введение

В этой лабораторной работе вы научитесь преобразовывать стандартный HTML-список без стилей в визуально привлекательное горизонтальное меню навигации с помощью CSS. По умолчанию HTML-списки (<ul>) отображаются вертикально с маркерами. Мы будем использовать несколько основных свойств CSS для удаления стандартных стилей и создания чистого, современного навигационного меню.

Вы научитесь использовать следующие свойства CSS:

• list-style-type
• padding
• display
• background-color
• margin

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

Установите list-style-type none для элемента ul

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

Сначала найдите файл styles.css в файловом проводнике слева от WebIDE и откройте его. Файл в настоящее время пуст.

Теперь добавьте следующее правило CSS в styles.css. Это правило нацелено на элемент <ul> и устанавливает его list-style-type в none, что скроет маркеры.

ul {
  list-style-type: none;
}

После добавления кода сохраните файл styles.css. Чтобы увидеть результат, нажмите на вкладку "Web 8080" в верхней части интерфейса LabEx. Вы должны увидеть список элементов без маркеров.

Примените padding 0 для удаления отступа по умолчанию

На этом шаге вы удалите отступ по умолчанию, который браузеры автоматически применяют к неупорядоченным спискам. Этот отступ на самом деле является padding с левой стороны элемента <ul>.

Чтобы удалить его, вы обновите существующее правило ul в вашем файле styles.css. Добавьте свойство padding: 0; к правилу. Это установит отступ со всех четырех сторон элемента в ноль, эффективно удалив левый отступ.

Обновите ваш файл styles.css следующим образом:

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

Сохраните файл и переключитесь на вкладку "Web 8080", чтобы просмотреть изменения. Вы заметите, что список теперь выровнен по левому краю своего контейнера.

Используйте display inline-block для горизонтального списка

На этом шаге вы измените расположение элементов списка с вертикального на горизонтальное. По умолчанию элементы списка (<li>) являются блочными элементами, что означает, что каждый из них занимает всю доступную ширину и начинается с новой строки.

Чтобы расположить их рядом, вы можете изменить их свойство display. Мы будем использовать значение inline-block, которое позволяет элементам располагаться рядом друг с другом, как строчные элементы, но сохранять свойства блочных элементов, такие как width, height и padding.

Добавьте новое правило CSS для элемента li в ваш файл styles.css.

li {
  display: inline-block;
}

Ваш полный файл styles.css теперь должен выглядеть так:

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

li {
  display: inline-block;
}

Сохраните файл и проверьте вкладку "Web 8080". Элементы списка теперь должны быть расположены в одну горизонтальную линию.

Добавьте background-color элементам li

На этом шаге вы добавите визуальное оформление элементам списка, чтобы они больше походили на кнопки навигации. Мы добавим цвет фона и внутренний отступ.

Свойство background-color устанавливает цвет фона элемента, а свойство padding добавляет пространство внутри границы элемента.

Измените существующее правило li в styles.css, чтобы включить эти новые свойства.

li {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 8px 16px;
}

Здесь background-color: #f2f2f2; устанавливает светло-серый фон. padding: 8px 16px; добавляет 8 пикселей отступа сверху и снизу, и 16 пикселей слева и справа от текста внутри каждого элемента списка.

Сохраните файл и обновите вкладку "Web 8080". Вы увидите, что каждый элемент списка теперь имеет серый фон и больше пространства вокруг текста, что делает их похожими на отдельные кнопки.

Реализуйте отступ между элементами li

На этом заключительном этапе стилизации вы добавите пространство между элементами списка, чтобы они не соприкасались. Свойство margin используется для создания пространства вокруг элемента, вне его границы.

Чтобы добавить пространство только между элементами, мы можем применить отступ справа к каждому элементу списка, используя свойство margin-right.

Обновите правило li в вашем файле styles.css в последний раз:

li {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 8px 16px;
  margin-right: 5px;
}

Это добавляет 5-пиксельный отступ справа к каждому элементу списка, отделяя их друг от друга. Последний элемент также будет иметь отступ, но он не будет виден, так как рядом с ним нет другого элемента.

Сохраните файл и просмотрите вкладку "Web 8080". Ваше горизонтальное меню навигации теперь завершено, с правильными отступами между каждой кнопкой.

Резюме

Поздравляем! Вы успешно завершили эту лабораторную работу по стилизации списков CSS.

Вы начали со стандартного вертикального HTML-списка и преобразовали его в стилизованное горизонтальное меню навигации. В процессе вы изучили и применили несколько основных свойств CSS:

• list-style-type для удаления стандартных маркеров списка.
• padding для удаления стандартного отступа списка.
• display: inline-block для расположения элементов списка горизонтально.
• background-color и padding для стилизации элементов в виде кнопок.
• margin-right для создания пространства между элементами.

Эти методы являются основополагающими для создания навигационных панелей и других компонентов на основе списков на современных веб-сайтах.