CSS-списки

Управление типами маркеров
list-style-type
Данное свойство меняет стиль маркера. Для каждого стиля списка существуют
свои маркеры. Задавать можно как элементам-контейнерам, так и тегам <li>
Чаще всего вы будете вообще убирать маркер у списка, для этого списку
задаём правило - list-style-type: none

3.

list-style-image
Можно также использовать в качестве маркеров подгружаемые вручную
изображения. В качестве значения данного свойства задаётся url
изображения:
list-style-image: url(https://img.icons8.com/pastel-glyph/64/briefcase--v1.png)

4.

Задание
Создайте список по образцу, используя картинки вместо обычных
маркеров.
Условия задачи:
• Название списка "Планы на год" поместите в заголовок второго
уровня;
• Все списки должны быть маркированными;
• Первому подсписку задайте класс .paint;
• Второму подсписку задайте класс .work;
• В CSS элементу-контейнеру задайте маркер-картинку размером
15px (https://img.icons8.com/emoji/50/check-mark-emoji.png);
• Подсписку с классом .paint задайте маркер-картинку размером
15px (https://img.icons8.com/emoji/48/artist-palette.png);
• Подсписку с классом .work задайте маркер-картинку размером
12px (https://img.icons8.com/office/50/briefcase.png);
• Всему документу задайте цвет фона - #ced и семейство шрифта без засечек;

5.

Меню из списка
Списки часто используются для создания меню. Вертикальное
меню делать даже проще, чем подсписки - достаточно убрать
маркеры и задать псевдокласс :hover.
Создадим такое меню, с нижним подчёркиванием у каждой
кнопки, кроме последней, шириной элементов списка 80%.

6.

7.

Теперь давайте добавим иконки.

8.

:nth-child()
Этот элемент сочетает в себе псевдокласс и функцию. :nth-child() позволяет
точечно обратиться к элементу(ам) в группе
:nth-child(2) - обратится ко всем вторым элементам, у которых есть родитель.
li:nth-child(2) - обратится ко всем вторым элементам <li> (не к каждому
второму!).

9.

Как видите, код выше добавил иконку второй кнопке. Но появилась и ещё одна
иконка. К какому элементу она относится?
:nth-child() имеет 2 ключевых слова:
• odd - все нечётные номера элементов;
• even - все чётные номера элементов.
Также принимаются аргументы вида An±B, где:
• A - множитель. Если опустить, то будет равен единице. Если он равен нулю, то An не
указывается. Может быть отрицательным.
• n - счётчик. Он принимает значения от 0 с шагом 1 (0, 1, 2, 3...).
• B - вспомогательное число. Если не указывается, то равно нулю.
Примеры:
• li:nth-child(2n+1) - все нечётные номера списков;
• div p:nth-child(3n) - каждый третий элемент , вложенный в элемент <div>. В
данном случае не важен уровень вложенности. Даже если у нас будет структура
div>p*9+section>p*9, то к каждому третьему внутри <section> правила будут
применяться

10.

Горизонтальное меню
Чтобы наше меню сделать горизонтальным, есть 2 распространённых способа.
Один из них вы уже знаете - это правило display:inline-block, которое нужно
задать элементам списка.
Но если мы захотим, чтобы меню растянулось на весь
экран, то нужно задавать ширину в относительных
единицах либо для <ul> - 100% и настраивать отступы для
элементов, либо для <li> - делить 100% на количество
кнопок/элементов меню с помощью calc().

11.

Вы можете видеть, что между каждым элементом образовалось небольшое
пространство. Это не что иное, как переводы строки и пробелы между самими
тегами в документе <html>. Чтобы не убирать их вручную, можно контейнеру
задать размер шрифта 0.
Так как у нас есть padding'и, то необходимо, чтобы они входили
в свойство width, поэтому задаём box-sizing: border-box. Для
центрирования надписей задаём text-align: center

12.

Задание «Дочерние обращения»
Условие
HTML
Каждому второму элементу , который
является (строго) дочерним элементом
<div>, задайте цвет шрифта - green.
каждому третьему элементу ,
который является дочерним элементом
<section>, задайте цвет шрифта - red.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
Абзац в div №1
Абзац в div №2
Абзац в div №3
Абзац в div №4
Абзац в div №5
Абзац в div №6
Абзац в div №7
Абзац в div №8
Абзац в div №9
<section>
Абзац в section, который в div №1
Абзац в section, который в div №2
Абзац в section, который в div №3
Абзац в section, который в div №4
Абзац в section, который в div №5
Абзац в section, который в div №6
Абзац в section, который в div №7
Абзац в section, который в div №8
Абзац в section, который в div №9
</section>
</div>
</body>
</html>

13.

Задание «Горизонтальное меню»
Условие
HTML
CSS
Используйте маркированный список;
Через универсальный селектор обнулите отступы и задайте
правило box-sizing: border-box;
Элементу-контейнеру задайте шрифт Montserrat без задания
семейства; уберите маркеры; обеспечьте прилегание
элементов друг к другу;
Цвет фона контейнера - #adc;
Для элементов-списков:
Размер шрифта - 1.8 ширины экрана;
Центрирование текста;
Отображение в качестве строчно-блочного элемента;
Ширину задайте с помощью calc() по примеру из предыдущего
шага.
Задайте общий внутренний отступ 20px;
Курсор при наведении в виде указателя (cursor: pointer);
Каждой второй кнопке задайте стили:
Вес шрифта - жирный (ключевым словом);
Цвет шрифта - #133;
Первым трём кнопкам (

English Русский Правила