Mdn руководство по css

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

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

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

Оглавление

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

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

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

“

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

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

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

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

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

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

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

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

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

Основные категории 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, внутри которого описываются свойства и значения.

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

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

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

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

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

<!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-документа.

<!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>

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

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

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

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

Базовая структура корневого 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. Глобальный селектор

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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;
}

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

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

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

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

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

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

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

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

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

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

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;
}

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

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

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

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

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

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

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

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

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

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

h1, header, section {
    color: seagreen;
}

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

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

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

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

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

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

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

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

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

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

<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>

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

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

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

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

<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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

p {
    background-color: cyan;
}

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

article p{
    background-color: red;
}

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

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

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

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.

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

article {
    border: tomato 10px solid;
}

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

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

article {
    border: tomato 10px solid;
}

article p {
    border: inherit;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

h1, h2 {
    display: inline;
}

a {
    display: block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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;.

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

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.

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

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

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

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

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

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

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

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

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

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

Вопросы

Задание

Задание

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

Решение

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

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

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

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

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

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

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

CSS — Каскадные Таблицы Стилей.

CSS экономит много времени. Он может управлять макетом нескольких веб страниц одновременно.

CSS = Стили и Цвета

Манипуляция Текстом

Цвета,
 Боксы

Пример

Попробуйте сами »

Пример

Попробуйте сами »

Пример

Попробуйте сами »

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

Пример

Попробуйте сами »

Пример

Использование свойства CSS border:

p {
    border: 1px solid powderblue;
}

Попробуйте сами »

Пример

Использование свойств CSS border и padding:

p {
    border: 1px solid powderblue;
    padding: 30px;
}

Попробуйте сами »

Пример

Использование свойств CSS border и margin:

p {
    border: 1px solid powderblue;
    margin: 50px;
}

Попробуйте сами »

Пример

В этом примере используется полный URL адрес для ссылки на таблицу стилей:

<link rel=»stylesheet» href=»https://schoolssw3.com/html/styles.css»>

Попробуйте сами »

Пример

Это пример ссылки на таблицу стилей находится в папке HTML на данном веб сайте:

<link rel=»stylesheet» href=»/html/styles.css»>

Попробуйте сами »

Пример

Это пример ссылки на таблицу стилей находится в одной папке на той же странице:

<link rel=»stylesheet» href=»styles.css»>

Попробуйте сами »