Содержание

Оглавление

courses / qa automation / web development

Урок 4. Современный CSS: Основные понятия, селекторы, блочная модель

Особенности применения и основные возможности современного CSS. Принципы каскадных таблиц стилей и типы селекторов. Понятие блочной и альтернативной моделей, описание их свойств.

Урок 4. Современный CSS: Основные понятия, селекторы, блочная модель

Предыдущий урок

Урок 3. HTML: Структура страницы, DOM-дерево, применение тэгов

Следующий урок

Урок 5. CSS: Типы данных и работа с HTML-элементами

Глобальный селектор
Селектор по элементу
Селектор по классу
Селектор по идентификатору
Селектор по атрибуту
Селектор по псевдоклассу
Селектор по псевдоэлементу
Групповые селекторы
Комбинированные селекторы

5. Принципы работы CSS

Каскадность (Cascade)
Специфичность (Specificity)
Наследование (Inheritance)

6. Блочные (Block) и строчные (inline) элементы
7. Стандартная и альтернативная блочные модели (Box models)

Стандартная модель
Альтернативная модель

Перейти

Практический блок

1. Вопросы
2. Задания
3. Ответы

Перейти

ТЕОРЕТИЧЕСКИЙ БЛОК

Каскадные таблицы стилей: определение и возможности

Стилизация элементов веб-страницы и задание внешнего вида документа достигается при помощи языка CSS (Cascading Style Sheets, Каскадные таблицы стилей). Он позволяет применять все современные возможности браузеров для «отрисовки» посещаемых сайтов.

“

Каскадные таблицы стилей – инструмент описания внешнего вида страниц web-ресурса, использующих в качестве конструктора язык разметки HTML или XML.

Сочетание CSS и HTML – неотъемлемая часть веб-разработки. Таблицы стилей как бы дополняют язык разметки, опосредованно расширяют его функционал.

Недостатки сайтов на «чистом» HTML:

Статичность (страницы не меняются, отсутствует динамика и анимации);
Непредсказуемость поведения в разных браузерах (хоть теги и понимаются практически всеми ими, тем не менее может визуально модифицироваться их отображение у пользователя с учетом его настроек);
Минималистичность, непривлекательность – сам по себе HTML практически не позволяет как-то настраивать внешний вид элементов (следовательно, приятных и эргономичных сайтов на нем не построишь).

CSS первой версии появились в далеком 1996 г и содержали не такой большой набор правил, как сегодня. Правда, уже тогда были заложены основные категории и понятия: селекторы, блочно-строчное форматирование, псевдоэлементы и т.п.

Вторая версия каскадных таблиц стилей пришла в 1998 г и принесла с собой комбинаторы, табличную модель, голосовые стили.

Сегодня мы говорим о CSS3, что функционирует с 2007 г. Он постоянно развивается и дополняется, хоть и не меняет версию. К сегодняшнему моменту CSS поддерживает практически все «фишки» современных браузеров и устройств и способен удовлетворить потребности разных групп пользователей, вплоть до тех, у кого имеются ограниченные возможности контакта с ПК.

Для наглядности понимания стека web-разработки HTML-CSS-JavaScript приведем аналогию. Представьте строящееся здание:

1. HTML – это каркас строения, крыша, полы, стены.
2. CSS – элементы декоративного свойства, украшательства (от обоев, линолеума до мебели и картин в помещении). Они созданы специально для человека: для удобства, эстетичности. Ведь ПК все равно видит лишь байты.
3. JavaScript – функциональные элементы (работа с освещением, водопроводом, регулирование температуры и т.п.).

Основные категории CSS

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

Структура CSS-блока

Как видно из картинки, задание CSS-свойств для HTML-элементов подразумевает объявление селектора, а внутри фигурных скобок через точку с запятой перечисляются свойства и их значения.

Охарактеризуем каждую категорию:

1. Ruleset (набор правил) – весь блок конкретного селектора со всеми изменяемыми параметрами. В нашем случае в качестве такового выступает тег <p> и его свойства: цвет и внутренние отступы.
2. Selector (селектор) – модифицируемая категория (тег <p>). В качестве селектора могут выступать не только теги, но и классы, идентификаторы, псевдоэлементы и псевдоклассы, конкретные атрибуты. Селекторы бывают сложными (с учетом наследования).
3. Declaration (декларация, объявление) – конкретная пара свойство: значение. Количество таких пар не ограничено. Пара обязательно должна заканчиваться точкой с запятой.
4. Property (свойство) – атрибут элемента, для которого мы планируем задать определенное значение. На рисунке в качестве таковых представлены цвет текста (color), внутренние отступы от границы блока со всех сторон (padding).
5. Value (значение) – конкретная величина атрибута. В примере цвет текста сделан зеленым, а отступы – 15 пикселей. Варианты значений свойств определяются документацией.

При нарушении синтаксиса набора правил в любом месте никаких ошибок на странице видно не будет, но сами правила не будут применены к выбранному селектору. Другими словами, если что-то не работает как задумано, требуется проверить синтаксис, валидность свойств и селекторов, допустимость значений.

Способы подключения стилей

Чтобы каскадные таблицы стилей отображались на странице необходимо не только правильно их задать, но и подключить. Для этого имеется 3 варианта.

1. Встроенные стили (inline styles)

Каждому тегу в HTML-документе можно задать атрибут style, внутри которого описываются свойства и значения.

Пример - HTML


<article style="color: darkgoldenrod; font-size: xx-large;">Параграф текста</article>

Страница Web-браузера

На практике принято задавать значения атрибутов внутри двойных кавычек (хотя можно использовать и одинарные). В представленном примере для тега <article> определен темно-золотистый цвет шрифта и увеличенный размер.

Такое применение стилизации элементов не рекомендуется, так как теряется смысл CSS, но в некоторых случаях допустимо (для получения максимального приоритета стиля).

2. Внутренние стили (internal styles)

Используются внутри HTML-страницы без вынесения в отдельный файл. Оправдано в случае небольшого количества модифицируемых элементов на компактных страничках. Определяются в теге <style>.

Пример - HTML


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Практика CSS</title>
    <link rel="stylesheet" href="style.css">
    <style>
        article {
            color: darkgoldenrod;
            font-size: xx-large;
        }
    </style>
</head>
<body>
    <article>Параграф текста</article>
</body>
</html>

Данный способ задания стилей декларируется, обычно, в теге <head>.

3. Внешние, подключаемые стили (external styles)

Наиболее часто встречаемый способ задания стилей на страницах. Для этого создается один или несколько файлов с расширением .css, путь к которым указывается в теге <link>, расположенном в заголовочной части HTML-документа.

Пример - HTML


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Практика CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <article>Параграф текста</article>
</body>
</html>

Пример – CSS


/* Файл style.css */
article {
    color: darkgoldenrod;
    font-size: xx-large;
}

К документу HTML мы подключили внешний файл с таблицами стилей style.css. К слову, у тега <link> атрибут type в данном случае можно не указывать, так как CSS на сегодня единственный язык таблиц стилей, применяемый в сети.

Так какой вариант лучше?
Три приведенных способа дают одинаковый результат. В современной web-разработке, когда стилизуемых элементов может быть огромное количество, наиболее оптимальным является третий способ. Для этого обычно в папке проекта создается директория css, внутри которой размещаются таблицы стилей (для больших проектов характерна их множественность).

В дальнейших примерах будет использоваться HTML-страница index.html, рядом с которой расположится папка css, где создадим текстовый документ style.css. Это хорошая практика.

Структура тестового проекта

Базовая структура корневого HTML-файла следующая:

Пример - HTML


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Практика CSS</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
</body>
</html>

В последующем она приводиться не будет. Внутри тега <body> при необходимости разместятся другие элементы (т.е. в примерах мы покажем лишь содержимое <body>).

Виды селекторов в CSS

Задание свойств элементам страницы через каскадные таблицы стилей предполагает первоначальную выборку селекторов. Вариантов осуществления такой операции не мало:

1. Глобальный селектор
2. Селектор по элементу
3. Селектор по классу
4. Селектор по идентификатору
5. Селектор по атрибуту
6. Селектор по псевдоклассу
7. Селектор по псевдоэлементу
8. Групповые селекторы
9. Комбинированные селекторы

9.1. Селектор потомков
9.2. Селектор дочерних элементов
9.3. Селектор «первого соседа»
9.4. Селектор «всех соседей»

Рассмотрим наиболее типичные, с которыми часто встречаются на практике.

4.1. Глобальный селектор

Объявляется звездочкой и подразумевает воздействие на все элементы страницы, где данное свойство имеется.

Пример - HTML


<h1>Главная страница сайта</h1>
<article>Как работать с CSS</article>

Пример – CSS


* {
    background-color: lightsalmon;
    font-size: 30px;
}

Каждому тегу на странице сайта будет присвоен цвет фона светло-розовый, а также размер шрифта в 30 пикселей.

Страница Web-браузера

Данный селектор используется не часто, но иногда требуется для сброса всех настроек (так как браузеры зачастую сами задают отступы у блочных тегов, например, а мы хотим их отключить). Позволяет добиться максимальной идентичности внешнего вида нашего ресурса на разных браузерах и устройствах.

4.2. Селектор по элементу

В качестве селектора выступает конкретный тег HTML. Новые настройки распространятся на все эти объекты, встречаемые в коде, независимо от вложенности.

Пример - HTML


<h1>Главная страница сайта</h1>
<q>Практика - основа мастерства</q>
<p>
    <q>Делай - и научишься</q>
</p>

Пример – CSS


q {
    color: maroon;
    font-size: 15px;
}

Все цитаты в документе приобрели бордовый оттенок и отображаются 15-ым шрифтом.

Страница Web-браузера

4.3. Селектор по классу

Каждому HTML-элементу можно присвоить класс, задав ему некоторое имя. Это позволяет группировать теги и выделять их особым образом в документе. В СSS к классу обращаются с селектором, начинающимся с точки.

Пример - HTML


<h1 class="blue-wave">Главная страница сайта</h1>
<q class="blue-wave">Практика - основа мастерства</q>
<p>
    <q>Делай - и научишься</q>
</p>

Пример – CSS


.blue-wave {
    text-decoration-style: wavy;
    text-decoration-color: blue;
    text-decoration-line: overline;
}

Нами создан класс blue-wave, который задан для заголовка <h1> и первой цитаты. Всем элементам этого класса присвоено верхнее подчеркивание синего цвета в виде волнистой линии.

Страница Web-браузера

4.4. Селектор по идентификатору

ID дает возможность уникализировать конкретный элемент документа. Идентификатор определенного имени может присутствовать на странице в единственном экземпляре (в отличие от имени класса). Зачастую применяется при обработке тегов и их содержимого через JavaScript.

Пример - HTML


  <h1 id="red-dots">Главная страница сайта</h1>
    <q class="blue-wave">Практика - основа мастерства</q>
    <p>
        <q>Делай - и научишься</q>
    </p>

Пример – CSS


.blue-wave {
    text-decoration-style: wavy;
    text-decoration-color: blue;
    text-decoration-line: overline;
}

#red-dots {
    text-decoration-style: dotted;
    text-decoration-color: red;
    text-decoration-line: underline;
}

Селектор идентификатора начинается со знака решетки. Теперь заголовок первого уровня подчеркнут снизу красной линией в виде точек.

Страница Web-браузера

4.5. Селектор по атрибуту

Выбрать элемент документа можно и по наличию у него определенного свойства и значения. Для этого в квадратных скобках указывается атрибут с или без значения.

Пример - HTML


<a href="https://yandex.ru/">Яндекс</a>
<br>
<a href="https://www.google.com/">Гугл</a>

Пример – CSS


a[href="https://yandex.ru/"] {
    font-size: 40px;
    text-decoration-line: line-through;
}

Ссылка, ведущая на Яндекс, существенно увеличилась в размере и стала перечеркнутой, тогда как с Google ничего не произошло.

Страница Web-браузера

4.6. Селектор по псевдоклассу

Псевдокласс определяет особое состояние HTML-элемента. Это позволяет стилизовать его не только на основании положения в DOM-дереве, но и с учетом ряда внешних факторов (история посещения, положение курсора мыши и др.). На сегодня их насчитывается около 40 штук. Применимы не ко всем элементам. Для правильной работы следует ознакомиться с документацией, так как возможны непредвиденные эффекты.

Задаются через двоеточие:

Пример - HTML


<a href="https://yandex.ru/">Яндекс</a>
<br>
<a href="https://www.google.com/">Гугл</a>

Пример – CSS


a:link {
    font-size: 15px;
    color: tomato;
}
a:visited {
    font-size: 20px;
    color: saddlebrown;
}

a:hover {
    font-size: 25px;
    color: seagreen;
}

a:active {
    font-size: 30px;
    color: violet;
}

Изначально все ссылки имеют небольшой размер шрифта и красноватый оттенок. Посещенные становятся коричневыми. При наведении мыши получаем зеленый цвет, а активная ссылка (при нажатии и удержании левой кнопки мыши) приобретает фиолетовый оттенок.

Страница Web-браузера до перехода по ссылкам

Страница Web-браузера после перехода по ссылкам (a:visited)

Это важно
Согласно документации, приведенный порядок объявления псевдоэлементов (a:link, a:visited, a:hover, a:active) является обязательным, в противном случае они не будут корректно работать.

4.7. Селектор по псевдоэлементу

Псевдоэлементы стилизуют некоторую часть элемента. Задаются через два двоеточия. Их пока не так много, тем не менее они довольно часто встречаются в коде верстальщиков.

Пример - HTML


<h1>Изучаем псевдоэлементы</h1>
<section>
    При помощи ::first-line мы преобразуем первую строку данного тега к верхнему регистру.
    <br>
    Остальные строки при этом остаются неизменными, такими, какими мы их задали изначально.
</section>

Пример – CSS


section::first-line {
    text-transform: uppercase;
}

Как видим, первая строка полностью переведена в верхний регистр.

Страница Web-браузера

4.8. Групповые селекторы

При перечислении любых селекторов через запятую им можно задать одинаковые свойства.

Пример - HTML


<h1>Фанаты зеленого цвета</h1>
<article>
    <header>
        Говорят, зеленый цвет успокаивает глаза. 
    </header>
    <section>
        Дизайнеры считают, что применение зеленого цвета способствует отдыху глаз.
        Но это не доказано учеными, поэтому поверим на слово.
    </section>
    <footer>
        Исследование планируется к проведению в Швеции, тогда и проверим.
    </footer>
</article>

Пример – CSS


h1, header, section {
    color: seagreen;
}

Для трех тегов (h1, header, section) мы задали цвет шрифта светло-зеленого оттенка, что не привело к дублированию кода.

Страница Web-браузера

4.9. Комбинированные селекторы

Использование комбинаторов позволяет выбирать элементы на основании отношения между ними. Выделяют 4 типа комбинаторов:

4.9.1 Селектор потомков

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

Пример - HTML


<h1>Комбинаторы</h1>
<p>Что это и зачем</p>
<article>
    <header>
        <p>Первый параграф</p>
        <p>Второй параграф</p>
    </header>
    <section>
        <p>Третий параграф</p>
        <p>Четвертый параграф</p>
    </section>
    <footer>
        <p>Пятый параграф</p>
        <p>Шестой параграф</p>
    </footer>
</article>

Пример – CSS


article p {
    font-size: 25px;
    background-color: bisque;
}

Внутри тега <article> имеются теги <p>. Несмотря на то, что они не дочерние элементы, селектор воздействовал на них в соответствии с правилом.

Страница Web-браузера

4.9.2 Селектор дочерних элементов

Выбирает только первых потомков, игнорируя остальных на более глубоких уровнях вложенности. Определяется знаком >.

Пример - HTML


<body>
    <h1>Комбинаторы</h1>
    <p>Что это и зачем</p>
    <article>
        <header>
            <p>Первый параграф</p>
            <p>Второй параграф</p>
        </header>
        <section>
            <p>Третий параграф</p>
            <p>Четвертый параграф</p>
        </section>
        <footer>
            <p>Пятый параграф</p>
            <p>Шестой параграф</p>
        </footer>
    </article>
    <p>Конец</p>
</body>

Пример – CSS


body > p {
    font-size: 25px;
    background-color: bisque;
}

Воздействие селектора наблюдается только на те параграфы, которые непосредственно наследуются от <body> (с текстом Что это и зачем и Конец).

Страница Web-браузера

4.9.3 Селектор «первого соседа»

Когда 2 элемента на странице идут друг за другом на одном уровне DOM-дерева, можно применить комбинатор «первого соседа». Для этого используется знак +.

Пример - HTML


<h1>Комбинаторы</h1>
<p>Что это и зачем</p>
<article>
    <header>
        <p>Первый параграф</p>
        <p>Второй параграф</p>
    </header>
    <section>
        <p>Третий параграф</p>
        <p>Четвертый параграф</p>
    </section>
    <footer>
        <p>Пятый параграф</p>
        <p>Шестой параграф</p>
    </footer>
</article>
<p>Конец</p>

Пример – CSS


h1 + p {
    font-size: 25px;
    background-color: burlywood;
}

Цвет и шрифт поменялся только у первого параграфа, идущего после тега <h1> и находящегося с ним на одном уровне иерархии.

Страница Web-браузера

4.9.4 Селектор «всех соседей»

Выбираются все идущие далее соседи (т.е. находящиеся на одном уровне иерархии элементы). Задаются символом ~.

Пример - HTML


<h1>Комбинаторы</h1>
<p>Что это и зачем</p>
<article>
    <q>Какая-то цитата</q>
    <p>Первый параграф</p>
    <p>Второй параграф</p>
</article>
<p>Конец</p>

Пример – CSS


article ~ p, q ~ p {
    font-size: 25px;
    background-color: burlywood;
}

Как видно, изменены только параграфы с текстом Первый параграф, Второй параграф и Конец как соседние и идущие после начальных (q и article соответственно).

Страница Web-браузера

Подытожим
Применяя разные техники комбинирования селекторов, мы можем задавать уникальные свойства для разных частей веб-страницы при минимизации объемов кода и исключении дублирования.

Принципы работы CSS

При работе с каскадными таблицами стилей возникают ситуации, когда нам не понятно, какое же свойство будет в итоге у того или иного элемента. Например, мы задали размер текста для тега <body>, а потом и для тега <p>. Возникает вопрос: какого же размера будет содержимое параграфа? Таких ситуаций при формировании сложных таблиц стилей возможно громадное множество.

Для понимания приоритетов наследования стилей определены принципы работы CSS.

5.1. Каскадность (Cascade)

Каскадность подразумевает возможность применения стилей из разных источников к одному и тому же объекту. Браузеру необходимо разобраться с тем, каким образом отображать элемент.

Для этого выстраивается очередь приоритетов в следующем порядке (от самого низкого до максимально значимого):

Таблицы стилей браузера (у многих просмотрщиков для разных элементов определены стили по умолчанию – шрифты, отступы, границы, размеры);
Таблицы стилей пользователя (посетитель сайта может заранее настроить отображение тегов у себя в браузере. Если они не переопределены разработчиками, то будут использованы);
Таблицы стилей разработчика (автор сайта задает настройки элементам, которые по приоритету выше, чем два предыдущих типа. Это рассчитано на максимальную схожесть внешнего вида ресурса у пользователей);
Стили браузера !important (значение !important у любого свойства имеет повышенный приоритет);
Стили пользователя !important (пользователь также может принудительно вызвать определенный стиль, установив значение !important);
Стили разработчика !important (максимально высокий приоритет).

Приоритетность применения стилей

Значения !important устанавливать не рекомендуется, но в некоторых случаях могут использоваться для уверенности срабатывания стилизации.

Как видим, стили разработчика выше по приоритету, чем все остальные. Если они установлены, то будут отображаться. В противном случае «решение» принимает браузер или пользовательские настройки посетителя.

Пример - HTML


<h1>Основная страница</h1>
<article>
    <p>Важное содержимое статьи</p>
</article>
<footer>Сайт разработан специалистами Smartiqa Group</footer>

Пример – CSS


p {
    font-size: 24px;
    color: chocolate;
    background-color: lightblue;
}

Итак, для параграфа мы изменили фон, цвет и размер шрифта. Тем не менее, у него есть и другие свойства, унаследованные от браузера. Их можно посмотреть в консоли разработчика (Клавиша F12 -> Стили):

Пример – Консоль разработчика


p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

Инструменты разработчика - Стили

Если одно из них поменять, то сработает приоритет стиля разработчика.

Пример – CSS


p {
    font-size: 24px;
    color: chocolate;
    background-color: lightblue;
    margin-inline-start: 25px;
}

Пример – Консоль разработчика


p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

Теперь абзац получил отступ слева на 25 пикселей на первой строке.

Инструменты разработчика - Стили

5.2. Специфичность (Specificity)

Отвечает за приоритет применения стилей к элементам в зависимости от типа селектора.
Специфичность подразумевает задание весов конкретным правилам. Более высокая его величина определяет итоговое значение отображаемого свойства.

Цепочка приоритетов выглядит так (в порядке увеличения значимости):

Селекторы элементов и псевдоэлементов (выбирается конкретный тег или его часть);
Селекторы классов, атрибутов и псевдоклассов (выбор на основании класса, специфичного атрибута или состояния класса);
Селекторы идентификаторов (так как задаются в единственном экземпляре на странице, то имеют максимальный вес).

Приоритетность применения стилей к web-элементам

Комбинаторы, глобальный селектор (звездочка), псевдокласс отрицания :not() – не оказывают влияния на специфичность. Для задания максимального приоритета на любом уровне используют !important, что, опять же, не рекомендуется (за редкими исключениями).

Важно понимать, что независимо от порядка объявления селекторов в файле стилей, их приоритет не меняется (за исключением равноправных).

Пример - HTML


<h1>Основная страница</h1>
<article id="main-content">
    <p class="blue-paragraph">Важное содержимое статьи</p>
</article>

Пример – CSS


p {
    background-color: cyan;
}

#main-content p{
    background-color: yellow;
}

article p{
    background-color: red;
}

.blue-paragraph {
    background-color: darkolivegreen;
}

Так как идентификатор в данном случае максимально приоритетен, то цвет фона внутри параграфа станет желтым.

Страница web-браузера

Если же любому другому селектору присвоить !important, то сработает он.

Пример – CSS


p {
    background-color:cyan;
}

#main-content p{
    background-color:darkolivegreen;
}

article p{
    background-color:red !important;
}

.blue-paragraph {
    background-color:yellow;
}

Теперь цвет изменился на красный.

5.3. Наследование (Inheritance)

Еще один способ определения конечных свойств элемента – на основании наследования. Как известно, DOM-дерево представлено родителями и потомками, поэтому при вычислении свойств дочерних элементов используются параметры предков, если они не указаны для потомков.

Не все CSS свойства по умолчанию наследуются, о чем можно узнать из документации. К таковым, например, относят границы у элементов, их цвет и толщина, отступы. Тем не менее, если необходимо, можно принудительно задать наследование через значение inherit.

Пример - HTML


<h1>Основная страница</h1>
  <article>
      <p>Параграф первый</p>
      <p>Параграф второй</p>
  </article>

Пример – CSS


article {
    border: tomato 10px solid;
}

Вокруг тега <article> мы построили сплошную рамку толщиной 10 пикселей красного цвета. Теги параграфов, находящиеся внутри статьи, не получили это свойство, так как оно по умолчанию ненаследуемое.

Страница web-браузера

Мы можем «заставить» их наследоваться.

Пример – CSS


article {
    border: tomato 10px solid;
}

article p {
    border: inherit;
}

Теперь параграфы, находящиеся внутри тега <article>, имеют те же свойства границ.

Страница web-браузера

Подытожим
Таким образом, при формировании селекторов в CSS необходимо понимать принципы их наследования, специфичности, каскадности. Это позволит избежать ошибок при стилизации объектов и исключить излишние строки кода (когда не понятно, почему не работает то или иное свойство, «ленивые разработчики» балуются использованием !important).

Блочные (Block) и строчные (inline) элементы

Перейдем к особенностям отображения элементов на странице. Каждый верстальщик рассматривает структуру страницы как набор неких коробок, блоков. Такое видение сайта позволяет понять специфику отображения объектов. Любой макет будущего ресурса представляет собой набор прямоугольников с определенным контентом. Если это усвоить, то верстка макета не составит никаких проблем.

Если упрощенно, то при разработке все элементы сайта условно делят на 2 типа: блочные и строчные (как говорилось в уроках по HTML). Опишем эти «коробки».

1. Блочная (block) структура имеет особенности:

Каждый элемент такого типа начинается с новой строки (например, теги <div> или <article>. Другими словами, независимо от того, насколько велико содержимое объектов, каждый из них начнется с новой строчки);
Данная коробка стремится к полному заполнению доступного ей пространства (расширение на всю область страницы или родительского элемента);
Ей можно задавать ширину и высоту (т.е. свойства width и height);
Задание параметров отступов (внутренних или внешних) или границ отодвинут другие объекты от текущего.

2. Строчная (inline) структура характеризуется:

Перенос на новую строчку не произойдет, если остается доступное пространство на текущей;
Задание ширины и высоты не имеет смысла, так как эти параметры связаны только лишь с контентом и его объемом (другими словами, если строчному элементу задать ширину в 500 пикселей, то нет никакой гарантии, что это произойдет, особенно в случае, если вы внутрь того же тега <strong> поместили только число 2021);
Применение отступов и границ оправдано, но они не отодвинут другие объекты, а лишь скажутся на содержимом самой строки;

Блочные и строчные web-элементы

Определение строчности или блочности элемента связано, в первую очередь, со спецификой используемого тега (о чем сказано в документации). Благодаря CSS имеется возможность изменить тип объекта на тот, который нам подходит исходя из целей. Проще говоря, блочный элемент легко превратить в строчный, и наоборот. Для этого применяется свойство display.

Пример - HTML


<h1>Основная страница</h1>
<h2>Часть 1: Мои сайты для поиска</h2>
<a href="https://www.yahoo.com/">Главная страница Yahoo</a>
<a href="https://mail.ru/">Главная страница mail.ru</a>

Если не использовать стили, то отображение элементов на странице будет носить дефолтный характер: <h1> и <h2> – это блоки, а ссылки – строки.

Страница web-браузера. Дефолтное поведение элементов.

Изменим это поведение.

Пример - HTML


<h1>Основная страница</h1>
<h2>Часть 1: Мои сайты для поиска</h2>
<a href="https://www.yahoo.com/">Главная страница Yahoo</a>
<a href="https://mail.ru/">Главная страница mail.ru</a>

Пример – CSS


h1, h2 {
    display: inline;
}

a {
    display: block;
}

Проведенные манипуляции превратили заголовки в inline-элементы (они теперь отрисовываются на одной строке), а ссылки – в блоки.

Страница web-браузера. Измененное поведение элементов.

Также необходимо отметить, что помимо блочных и строчных элементов возможно присутствие и других типов: флексы (flex), сетки (grid), таблицы (table), строчные блоки (inline-block) и другие. Более того, прямые наследники таких элементов могут приобрести особое поведение (например, все дочерние объекты flex-типа станут гибкими и будут вести себя в соответствии с правилами. О них мы поговорим в одноименном разделе).

Стандартная и альтернативная блочные модели
(Box models)

Как упоминалось выше, все объекты страницы ведут себя либо как блок, либо как строка (в общем случае). Так или иначе, они характеризуются набором параметров, о которых не следует забывать при формировании макета страницы.

Предположим, нам требуется создать блок <article> размером 450 на 250 пикселей с отступами и границами. Эти дополнительные свойства по умолчанию будут учитываться, что может расширить реальные размеры коробки. С другой стороны, CSS не запрещает задать точные размеры элемента с включением всех его свойств.

Вначале посмотрим на все свойства блока с учетом параметров размеров (показаны на рисунке ниже).

Области блочного элемента

Вычисление размера блока осуществляется по атрибутам:

Параметры контента (свойства width и height);
Внутренние отступы (свойство padding);
Граница, рамка (свойство border);
Внешние отступы (свойство margin).

Общий размер элемента, в итоге, будет определяться на основании стандартной или альтернативной блочной модели.

7.1. Стандартная модель

Вычисляет размер блока как сумму всех означенных выше параметров. Так, если задать ширину блока, то к ней прибавится размер внутренних и внешних отступов по конкретной оси, а также величина границы.

Пример - HTML


<h1>Основы CSS - стандартная модель</h1>

Пример – CSS


h1 {
    width: 650px;
    height: 300px;
    padding: 10px;
    margin: 20px;
    border: 5px solid black;
}

На что обратить внимание?
1. Свойство padding при передаче одного значения определяет внутренние отступы от содержимого по всем четырем направлениям (внизу, вверху, слева, справа).
2. Свойство border характеризует толщину рамки, ее вид (в нашем случае – сплошная линия), цвет.
3. Свойство margin задает отступы от других блоков страницы по тем же четырем направлениям.
4. На основании стандартной модели итоговый размер блока будет не 650 на 300 пикселей, а следующим:
– ширина: 650 + 10 +10 + 5 + 5 + 20 + 20 = 720 px;
– высота: 300 + 10 +10 + 5 + 5 + 20 + 20 = 370 px.

В ряде случае это неудобно, так как заказчик требует размер блока с учетом всех отступов и границ.

7.2. Альтернативная модель

В такой ситуации удобна альтернативная блочная модель, которая определяет размер коробки с учетом дополнительных свойств. Для этого задается box-sizing: border-box;.

Пример - HTML


<h1>Основы CSS - стандартная модель</h1>

Пример – CSS


h1 {
    width: 650px;
    height: 300px;
    padding: 10px;
    margin: 20px;
    border: 5px solid black;
    box-sizing: border-box;
}

В результате параметры заголовка будут включать в себя внутренние отступы и границы, но не внешние отступы. Их включение в CSS не предусмотрено, но даже при таких обстоятельствах вычислять размеры блока значительно проще:
– ширина: 650 + 20 + 20 = 690 px;
– высота: 300 + 20 + 20 = 340 px.

Блочная модель CSS: Стандартная и альтернативная модели

Если же свойство margin строго не определено, то конечные размеры элемента можно считать такими, какими они были определены изначально на основании ширины и высоты.

При работе со строчными элементами часть свойств не будет работать. В частности, ширина и высота не возымеют никакого эффекта. Отступы и границы отображаются, но с некоторыми недочетами: они будут перекрывать содержимое других объектов.

Самое простое решение проблемы – inline-block. Мы показываем содержимое элемента как блок, но он не будет занимать всю ширину родителя. Получается микс строки и блока. В этом случае никаких проблем с отображением объекта в соответствии с нашей задумкой не будет.

Пример - HTML


<strong>Немало в мире умных фраз</strong>
<q>Не думай  - размышляй</q>
<i>Но есть и не совсем умные</i>

Пример – CSS


q {
    width: 450px;
    height: 200px;
    padding: 20px;
    margin: 10px;
    border: 4px solid black;
    display: inline-block;
}

Элемент <q> имеет высоту и ширину, отступы внутренние и внешние, а также границу в 4 пикселя. Хоть он и не занимает всю ширину родителя (тега <body>), но вполне соответствует заданным параметрам.

Элемент со свойством display: inline-block;

Элемент <q> со свойством display: inline-block;

Если не использовать декларацию display: inline-block;, то поведение текста с цитатой будет не столь очевидным, а параметры ширины и высоты полностью проигнорируются.

Элемент БЕЗ свойства display: inline-block;

Элемент <q> БЕЗ свойства display: inline-block;

Для более детального ознакомления с CSS рекомендуется изучать официальную документацию (с сайта World Wide Web консорциума). Детальное описание свойств и их возможных значений, а также примеры применения доступны на сайте Mozilla (в том числе и на русском языке). Ссылки приведены ниже.

Дополнительные ресурсы по теме CSS


1. Спецификации и их описание: "https://www.w3.org/Style/CSS/specs.en.html#translations"
2. Руководство от Mozilla: "https://developer.mozilla.org/ru/docs/Web/CSS/Reference"

ПОДЫТОЖИМ
Подведем промежуточные итоги. Каскадные таблицы стилей существенно упрощают модифицирование HTML-элементов, позволяя делать сайты современными, эргономичными. Чтобы ресурс не выглядел как сплошной набор текстового полотна, CSS дает возможность выделять требуемые блоки, делать отступы, менять размеры шрифта и блоков, применять цветовое оформление.

ПРАКТИЧЕСКИЙ БЛОК

Вопросы

Задание

Создайте 3 ссылки (на любые поисковые системы), каждая из которых будет начинаться с новой строки, иметь сплошную зеленую границу толщиной 7 пикселей и суммарный размер 300 на 200 пикселей. Вертикальный отступ между ссылками составит 10 пикселей.

Решение

Наша задача – минимизация строк кода. Поэтому применять всякие разрывы строк (при помощи тега <br>) будет не логичным.

Оптимальное решение – присвоение всем ссылкам режима отображения block. Также следует учесть, что внешние отступы между объектами суммируются (так как у одного объекта есть, например отступ снизу, а у следующего за ним - отступ сверху).

Пример- HTML


<a href="https://www.yahoo.com/">Yahoo</a>
<a href="https://yandex.ru/">Яндекс</a>
<a href="https://www.google.com/">Google</a>

Пример – CSS


a {
    width: 300px;
    height: 200px;
    margin: 5px;
    border: 7px solid green;
    display: block;
    box-sizing: border-box;
}

Так как ссылки – строчные элементы, их следует преобразовать в блочные. А чтобы не высчитывать из ширины и высоты размеры границы, удобно воспользоваться декларацией box-sizing: border-box;.

С учетом суммирования внешних отступов нужно задать их величину в размере 5 пикселей (что приведет к нужным десяти, если просуммировать margin ссылки и ее соседа).

Предыдущий урок

Урок 3. HTML: Структура страницы, DOM-дерево, применение тэгов

Следующий урок

Урок 5. CSS: Типы данных и работа с HTML-элементами

Как вам материал?

ПОКАЗАТЬ КОММЕНТАРИИ

Курс. Автоматизация тестирования Web-приложений на Python.

[ Web ] Урок 1. Web-приложение: понятие, компоненты и принципы работы.

[ Web ] Урок 2. HTML: Понятие, стандарты, тэги и атрибуты

[ Web ] Урок 3. HTML: Структура страницы, DOM-дерево, применение тэгов

[Web] Урок 4. CSS: Основные понятия, селекторы, блочная модель

Donation сайту smartiqa.ru

Все материалы проекта Smartiqa были и остаются бесплатными. Пожертвованные деньги пойдут на оплату хостинга, продление доменного имени, администрирование и развитие сайта.

Доступны 2 способа осуществления пожертвования:
1. Оплата через сайт сервиса "ЮMoney", что гарантирует корректность и безопасность процедуры оплаты.
2. Перевод напрямую на карту Тинькофф.

Обратите внимание, что в обоих случаях перевод осуществляется физическому лицу.

Оплата через ЮMoney

Перевод на карту Тинькофф

Donation сайту smartiqa.ru

Оплата через ЮMoney

Перевод на карту Тинькофф

Урок 4. Современный CSS: Основные понятия, селекторы, блочная модель

Урок 4. Современный CSS: Основные понятия, селекторы, блочная модель

Оглавление

ТЕОРЕТИЧЕСКИЙ БЛОК

Каскадные таблицы стилей: определение и возможности

Основные категории CSS

Способы подключения стилей

1. Встроенные стили (inline styles)

2. Внутренние стили (internal styles)

3. Внешние, подключаемые стили (external styles)

Виды селекторов в CSS

4.1. Глобальный селектор

4.2. Селектор по элементу

4.3. Селектор по классу

4.4. Селектор по идентификатору

4.5. Селектор по атрибуту

4.6. Селектор по псевдоклассу

4.7. Селектор по псевдоэлементу

4.8. Групповые селекторы

4.9. Комбинированные селекторы

4.9.1 Селектор потомков

4.9.2 Селектор дочерних элементов

4.9.3 Селектор «первого соседа»

4.9.4 Селектор «всех соседей»

Принципы работы CSS

5.1. Каскадность (Cascade)

5.2. Специфичность (Specificity)

5.3. Наследование (Inheritance)

Блочные (Block) и строчные (inline) элементы

Стандартная и альтернативная блочные модели
(Box models)

7.1. Стандартная модель

7.2. Альтернативная модель

ПРАКТИЧЕСКИЙ БЛОК

Вопросы

Задание

Решение

Читайте также

Donation сайту smartiqa.ru

Donation сайту smartiqa.ru

Мы можем оповещать вас о важных статьях и новостях.