Сьогодні розберемося, як створюються списки на веб-сторінці, які маркери використовуються і протестуємо різні стилі для зміни зовнішнього вигляду.
Нагадаю, як підключаються стилі до Html сторінці:
Існують маркований, або ненумерований список css і нумерований.
Маркери списку представляють собою зображення різних фігур: кружечки, квадратики, галки тощо. Їх ще називають кульками. В якості маркерів для списку використовуються і власні малюнки.
Нумерований список являє собою висновок інформації під номерами 1, 2, 3 і т.д.
Зазвичай маркери являють собою прості чорні кружечки, що звично для користувача, але з іншого боку не привертають особливої уваги до тексту.
Якщо ви вирішили замінити ці гуртки на дизайнерські, то потрібно освоїти оформлення списку за допомогою css. Чим ми сьогодні і займаємося.
Основа будь-якого списку складається з наступного коду веб-сторінки:
- Перший елемент списку
- Другий елемент списку
- Останній елемент списку
Виглядає цей блок так:
- Перший елемент списку
- Другий елемент списку
- Останній елемент списку
Css оформлення маркерів списку
Зовнішній висновок будемо прописувати в файлі стилів style.css. Він може називатися і по-іншому, але мати розширення .css.
Стандартні маркери CSS: гурток (circle) - не зафарбований кружок, точка (disk) - зафарбований кружок, квадрат (square) - зафарбований квадрат.
Формує список в css код ul - з його допомогою ми задаємо, який зі стандартних маркерів буде виводитися на сторінці.
Наприклад, виведемо списки з використанням гуртка (circle). Запис в css файлі буде така:
Наприклад, один з варіантів зміни зовнішнього вигляду списку в постах на стандартний гурток, якщо для блоку контенту немає ul:
Або інший приклад:
Повний курс «Css практика»
Знання CSS необхідно кожному веб-майстру, бо це універсальний спосіб зробити якісний дизайн без перевантаження коду сторінки.
Для тих, хто хоче дуже швидко навчитися трюкам css стилів. рекомендую розширений курс "CSS практика" Євгенія Попова.
Графічні маркери для списку.
Відступ списку css.
Як поміняти css колір маркера списку, щоб його колір був відмінним від кольору тексту.
Вкладені списки. Як в css зробити горизонтальний список. Зміна стилю нумерованих списків.
Завантажити красиві маркери для списків сайту.