Тема 4 Списки та лінії

Списки та лінії

Пояснення:

Маркерований та нумерований списки

Списком називається взаємопов'язаний набір окремих фраз або пропозицій, які починаються з маркера або цифри.

Будь-який список являє собою контейнер <ul>, який встановлює маркований список, або <ol>, що визначає список нумерований.
Кожен елемент списку повинен починатися з тега <li>.

Список всередині списку

Зараз напишемо список, в якому буде ще один список.

Атрибут type в списках - вид нумерування(маркування)

Є різні види маркування або нумерування списків, нижче показано які.

Задаємо фоновий колір(колір фону) для різних тегів з текстом

background-color - задає колір фону елемента(тега)
також можна використовувати просто background

Тег <hr> - одинарний, малює горизонтальну лінію

Малює горизонтальну лінію, яка за своїм виглядом залежить від використовуваних параметрів, а також браузера.

Список кольорів RGB та Hex

Список кольорів RGB та Hex, які вам пригодяться:

Hex (шістнадцятковий) формат	Формат RGB	Колір
#996633	rgb(153, 102, 51)	Brown
#8000FF	rgb(128, 0, 255)	Violet
#000000	rgb(0, 0, 0)	Black
#FF0000	rgb(255, 0, 0)	Red
#00FFFF	rgb(0, 255, 255)	Azure
#FF00FF	rgb(255, 0, 255)	Purple
#FF8000	rgb(255, 128, 0)	Orange
#A0A0A0	rgb(160, 160, 160)	Gray
#FFFFFF	rgb(255, 255, 255)	White
#00FF00	rgb(0, 255, 0)	Green
#0000FF	rgb(0, 0, 255)	Blue
#FFFF00	rgb(255, 255, 0)	Yellow

Таблиця:

№	Тема	Приклад коду	Підсумок
1	Марковані та нумеровані списки (ol, ul, li)	`<body> <ul> <li>Меч</li> <li>Щит</li> <li>Лук</li> </ul> <ol> <li>Золото</li> <li>Залізо</li> <li>Діаманти</li> </ol> </body>`	ul створює маркований список, ol – нумерований. Кожен пункт у списку записується через li.
2	Типи маркерів у списках (type) (Марковані списки)	`<body> <ul> <li>Заповнене коло (по замовчуванню)</li> <li type="disc">Ще одне заповнене коло</li> </ul> <ul> <li type="circle">Порожнє коло</li> <li type="square">Квадрат</li> </ul> </body>`	Для маркованих списків (ul) атрибут type задає форму маркера: – disc – заповнене коло (●, стандартний варіант); – circle – порожнє коло (○); – square – квадрат (■).
3	Типи маркерів у списках (type) (Нумеровані списки)	`<body> <ol> <li type="1">Звичайна нумерація (по замовчуванню)</li> <li type="A">АБЕТКОВА НУМЕРАЦІЯ</li> <li type="a">абеткова нумерація</li> <li type="I">РИМСЬКА НУМЕРАЦІЯ</li> <li type="i">Римська нумерація</li> </ol> </body>`	Для нумерованих списків (ol) атрибут type визначає стиль нумерації: – 1 – числа (1, 2, 3...); – A – великі літери (A, B, C...); – a – маленькі літери (a, b, c...); – I – римські цифри великі (I, II, III...); – i – римські цифри малі (i, ii, iii...).
4	Властивість list-style	`<head> <style> .no_marker { list-style: none; } </style> </head> <body> <ul class="no_marker"> <li>Cow</li> <li>Pig</li> <li>Sheep</li> </ul> </body>`	Властивість list-style визначає вигляд маркерів у списку. Можна задати значення none, щоб видалити маркери повністю.
5	Фон елементу (background-color, background)	`<head> <style> .grass { background-color: green; } .sky { background: lightblue; } body { background-color: lightyellow; } h1 { background-color: lightcoral; } p { background: lightgreen; } </style> </head> <body> <h3>Уся сторінка світло-жовта<h3> <h1>Заголовок із рожевим фоном</h1> <p>Абзац із зеленим фоном</p> <p class="grass">Трава</p> <p class="sky">Небо</p> </body>`	background-color задає колір фону. background може одночасно задавати колір, картинку та інші параметри.background-color задає колір фону елемента. Можна застосовувати до будь-якого тегу - наприклад, до body, h1, p і т.п.. background дозволяє одночасно задавати колір, зображення, позицію й повторення.
6	Ширина і висота (width, height)	`<head> <style> .box { width: 200px; height: 100px; background: yellow; } </style> </head> <body> <p class="box">Скриня з золотом</p> </body>`	width задає ширину, height – висоту елемента. Можна використовувати px, %, em тощо.
7	Горизонтальна лінія (hr)	`<body> <p>Скарби знайдено!</p> <hr> <p>Але це ще не кінець пригод...</p> </body>`	Тег hr створює горизонтальну лінію. Її можна змінювати: задати height (товщину), background / background-color (колір).

build info

compiler: 2.0.5.1 · 4054EF9BF6C4510A
built: 2026-11-08 14:31:25 UTC