Pulse of Ukraine

Новини України

Як зробити позначки перед li елементом квадратними

HTML (Hypertext Markup Language) – основна мова розмітки для веб-сторінок. Однією з корисних ознак цієї мови є можливість створення списків. В HTML ви можете створювати ненумеровані списки, використовуючи елемент <ul> (unordered list) разом з <li> (list item). Цей підхід дає змогу створювати списки, що відображаються з позначками. У цій статті ми розглянемо, як налаштувати квадратні позначки для списків з елементами <li>.

Основи створення списків з <li>

Щоб створити ненумерований список у HTML, використовуйте базовий синтаксис:

<ul>

    <li>Перший елемент списку</li>

    <li>Другий елемент списку</li>

    <li>Третій елемент списку</li>

</ul>

Цей код створює простий ненумерований список з трьома пунктами. За замовчуванням, браузери відображають ненумеровані списки з круглими позначками.

Зміна стилю позначок на квадратні

HTML дозволяє змінювати стилі списків за допомогою CSS (Cascading Style Sheets). Щоб відобразити квадратні позначки, вам потрібно вказати стиль для списку. Це можна зробити, використовуючи властивість CSS list-style-type.

Використання CSS

Ось як можна змінити позначки на квадратні:

<!DOCTYPE html>

<html lang="uk">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Списки з квадратними позначками</title>

    <style>

        ul {

            list-style-type: square; /* Змінюємо стиль позначки на квадрат */

        }

    </style>

</head>



<body>

    <h1>Мій Список</h1>

    <ul>

        <li>Перший елемент списку</li>

        <li>Другий елемент списку</li>

        <li>Третій елемент списку</li>

    </ul>

</body>



</html>

У цьому прикладі ми застосували CSS до елемента <ul>, вказавши list-style-type: square;. Це призведе до того, що всі позначки в ненумерованому списку стануть квадратними.

Інші типи позначок

CSS дозволяє використовувати різні стилі позначок для списків. Ось кілька з них:

  • disc – круглі позначки (за замовчуванням).

  • circle – порожні круглі позначки.

  • square – квадратні позначки.

  • none – без позначок.

Ви можете експериментувати з цими значеннями, змінюючи стиль позначок у вашому списку.

Приклад використання

Давайте розглянемо приклад, у якому ми створимо список з квадратними позначками та додамо ще декілька стилів:

<!DOCTYPE html>

<html lang="uk">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Списки з квадратними позначками</title>

    <style>

        body {

            font-family: Arial, sans-serif;

        }



        ul {

            list-style-type: square;

            padding-left: 20px;

        }



        li {

            margin-bottom: 10px;

            color: #333;

        }

    </style>

</head>



<body>

    <h1>Переваги навчання HTML</h1>

    <ul>

        <li>Висока затребуваність на ринку праці</li>

        <li>Можливість створення власних веб-сайтів</li>

        <li>Легкість у вивченні</li>

        <li>Вивчення основи для прогресування у веб-розробці</li>

    </ul>

</body>



</html>

У цьому прикладі ми додали деякі стилі для списку та його елементів, які роблять текст більш читабельним і привабливим.

Висновок

HTML забезпечує велику гнучкість у створенні списків завдяки елементам <ul> та <li>. Налаштування квадратних позначок за допомогою CSS – це простий, але ефективний спосіб покращити вигляд списків на вашій веб-сторінці. Експериментуйте з різними стилями та налаштуваннями, щоб знайти те, що підходить саме вам!

Залишити відповідь