Контейнеры и стили - IsuiGit/borodaedu GitHub Wiki

Контейнеры

Контейнер - блок (<div>, <section>, <span>) не имеющий стилей по умолчанию и необходим для разграничения логических блоков в HTML документе.

<html>
    <head>
        <title>Моя первая web-страница</title>
    </head>
    <body>
        <div> <!-- Создаем контейнер для текста -->
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Nostrum ab sapiente magni totam. 
                Provident quos iste consequatur culpa quaerat cum! 
                Ad architecto vel asperiores quod commodi error, 
                reprehenderit sequi harum!
            </p>
        </div>
    </body>

</html>

Стили

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

Стили можно добавлять как отдельным документом (например style.css), так и вписывать стили в HTML документ в специальном теге <style></style>

<html>
    <head>
        <title>Моя первая web-страница</title>
    </head>
    <body>
        <div class="dark-background"> <!-- Создаем контейнер для текста -->
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Nostrum ab sapiente magni totam. 
                Provident quos iste consequatur culpa quaerat cum! 
                Ad architecto vel asperiores quod commodi error, 
                reprehenderit sequi harum!
            </p>
        </div>
        <!-- Тег style позволяет описывать внутри себя стили элементов на языке таблиц стилей -->
        <style>
            /* Стиль будет применен для ВСЕХ блоков, у которых class="dark-background" */
            .dark-background{
                background-color: black; /* Цвет фона блока */
                color: white; /* Цвет текста в блоке */
                font-size: 24px; /* Размер шрифта */
                padding: 10px; /* Внутренние отступы блока */
                margin: 20px; /* Внешние отступы блока */
            }
        </style>
    </body>
</html>

Применение стилей

Чтобы применить созданный стиль (класс) необходимо указать ВНУТРИ открывающего тега свойство class="style-name"

...
    <div class="dark-background"> <!-- Создаем контейнер для текста -->
         ...
    </div>
    <style>
        /* Стиль будет применен для ВСЕХ блоков, у которых параметр class="dark-background" */
        .dark-background{
            background-color: black; /* Цвет фона блока */
            color: white; /* Цвет текста в блоке */
            font-size: 24px; /* Размер шрифта */
            padding: 10px; /* Внутренние отступы блока */
            margin: 20px; /* Внешние отступы блока */
        }
    </style>
...

Useful additions

  1. Имена стилей, обычно, состоят из строчных букв и знаков -
  • Хорошо: .my-class{ ... }
  • Плохо: .M1_CL4ss{ ... }
  1. Имена стилей придумываются самостоятельно
  2. Стили можно добавлять не только контейнерам, но и любым элементам

sitemap | Веб-разработка

Карта Wiki: Щёлк

Главная (Home): Щёлк

⚠️ **GitHub.com Fallback** ⚠️