Стили для текста и бэкграунды это понятно, про этажность тоже помним, но как собирать страницы-то?
Как мы помним из истории, ХТМЛ и ЦСС изначально использовались для вёрстки документов, но на самом деле ещё с первой версии CSS у нас есть концепт блочной модели. Что это?
В третьем уроке мы узнали, что элементы бывают трёх типов: блочными, инлайновыми и инлайн-блочными. Но какое поведение у блочных элементов, не считая того, что они занимают 100% ширины (по-умолчанию) и им можно задавать ширину-высоту?
Кстати, это управляется через свойство display: block, inline, inline-block или none
У элемента есть несколько свойств, которые влияют на его размер:
- ширина —
width, - высота —
height, - внутренние отступы —
padding, - бордеры —
border, - внешние отступы —
margin.
С шириной и высотой всё просто: блочный элемент занимает 100% ширины и высоту контента, если не указано другое через свойства width,
max-width,
min-width и
height,
max-height,
min-height.
Уточню, что при вложенности элемент занимает 100% ширины родителя, а не всей страницы.
синим выделен размер контента
Почему в этом примере у заголовка сверху есть пустое пространство контента? Потому что высота контента складывается из font-size + line-height.
Но почему между заголовком и текстом есть пустое пространство? Я решил дать тексту внутренний отступ (padding), а заголовку — внешний (margin).
- синим выделен размер контента
- оранжевым выделен
margin - зеленым выделен
padding
Как решить когда ставить паддинг, а когда — марджин?
У меня правило простое: если я хочу оттолкнуть элемент от другого — ставлю марджин. Если я хочу, чтобы элемент был больше — ставлю паддинг. В чём плюс? Бэкграунд распространяется на паддинг.
Полный код выглядит так:
Я сознательно опустил теги html, head, body и другие
Бордеры (border) — это границы внутреннего размера блока (включая паддинги).
Тут особо ничего не расскажешь: хотите поставить поребрики — пишите border: [size] [kind] [color], например, border: 1px solid black.
Свойство box-sizing
ЦСС — гибкий. По-умолчанию браузеры высчитывают фактические ширину и высоту элемента по его контенту (и свойствам width, height), а паддинги и бордеры не входят в эту ширину.
Чем это грозит? Если у вас есть родитель с фиксированной шириной, то ребенок при content-box вывалится как Новая Москва в Московскую область.
Пример взят с MDN
Как это исправить? Пол Ириш (разработчик Гугл Хрома) рекомендует ставить box-sizing: border-box всем элементам.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}Так, стоп, inherit? Что это?
Пришло время поговорить о том, почему ЦСС мощная, но иногда неудобная штука. Помните, как расшифровывается аббревиатура? Cascading Style Sheets.
ЦСС базируется на двух китах: каскаде и наследовании.
Если вкратце, то внутренние элементы могут наследовать значения родителя — помните, я давал тегу article стили, а параграфы отнаследовали значения шрифтов: font-size, line-height, color. Это потому что у них по-умолчанию стоят значения inherit!
Но их, конечно, можно переопределить. Возвращаясь к каскаду (грубо говоря, водопад), у нас есть правило номер один, порядок: каждое нижнее правило переопределяет предыдущее:
Каким цветом будет параграф? Зеленым.
Ок, но что будет, если мы поменяем местами правила? .paragraph {} поставим первым, а p {} — вторым? Ничего не будет, параграф всё равно будет зеленым.
Но почему? Потому что правило номер два, специфичность: селектор по айди мощнее селектора по класса, который мощнее селектора по тегам. #id {} > .class {} > tag {}. На самом деле селекторов очень много, подсмотреть можно на Cheetyr.
Каким будет будет параграф? Синим.
На селекторах дело не заканчивается, есть правило номер три, важность: через !important можно переопределить всё что угодно.
Каким будет будет параграф? Красным.
Но есть огромная опасность в использовании !important:
!important ломает предсказуемость
Вы больше не можете ручаться, что стили будут вести себя так, как вы их написали, поэтому за !important нужно пиздить ногами.
У разных браузеров свои дефолтные стили: так сложилось за годы их существования, а ломать старое поведение никто не хочет.
Поэтому мы пользуемся normalize.css: ЦСС-файл с готовыми свойствами, который нормализует (приводит к одному виду) разные стили в браузерах. Скачиваем, закидываем в проект, подключаем через <link rel="stylesheet">.
Раньше люди использовали reset.css — он в ноль скидывал дефолтные значения, но это не самый удобный путь: приходится всё заново писать, поэтому мы используем normalize.css.
Кстати, вам же нужно изучать, то что получилось? Для этого в браузерах есть инструменты разработчика — в Хроме это Chrome DevTools, в Сафари Web Development Tools, в Файрфоксе — Firefox Developer Tools.
Можно изучать получившееся дерево элементов (оно же DOM), стили, блочную модель.
Про блочную модель всё понятно, про box-sizing тоже, даже про каскад и наследование поговорили. Про нормалайз даже зацепили!
Задание у нас уже посложнее: сегодня нужно разобраться с блочной моделью.
Нужно:
- добавить отступов первому этажу,
- сблизить заголовок и подзаголовок,
- добавить внутреннего отступа второму этажу
Не забывайте задавать вопросы в чате — там обязательно помогут 💪🏻
Помните: нет глупых вопросов, есть лишь страх их задавать.
body {
font-size: 22px;
line-height: 34px;
}
header,
nav {
background-color: #fd739c;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
h1,
h2 {
font-family: Arial, Helvetica, sans-serif;
}- стили текста мы вешаем на
body, потому что параграфы их отнаследуют, - с
headerта же самая ситуация — тексты станут белыми и со шрифтом без засечек, header, navпотому что селекторы можно перечислять,- при
font-family: Arial, Helvetica, sans-serifбраузер берёт Arial, если его нет — Helvetica, если и её нет — системный шрифт без засечек.
Мы разобрались с блочной моделью, поняли про каскад и наследование: работу селекторов и правил, узнали чем плох !important, взяли в работу normalize.css и открыли для себя инструменты разработчика. Чудесно? Да.
Дальше — про флексбоксы и сетки.