16 CSS Уроков с помощью Post-it® заметок
Интересные уроки по CSS на бумаге для заметок. Никакой воды - все очень кратко и познавательно.
![Пссс... Еще больше полезностей у нас в Telegram](/assets/img/Bitmap.jpg)
![Telegram](/assets/img/telegram.png)
Каскадные Таблицы Стилей Действуют от Наследования
CSS имеет предко-потомственные отношения. Все ранние определения предка будут автоматически унаследованы одним из своих детей, если не указано иное.
![Каскадные Таблицы Стилей Действуют от Наследования](/images/uploads/originals/15/01.png)
Последние Выигрывают
Если элемент определен в более чем одном месте в CSS-стилях, последнее определение переопределяет предыдущие (если эти липучки представленных цветов соответствует нашим H1, то заголовки Н1 будут розовыми).
![Последние Выигрывают](/images/uploads/originals/15/02.png)
Пара Ключ-Значение
Для каждого HTML элемента, которому будет задан стиль, должен быть назначен соответствующий селектор CSS. Они всегда появляются в паре ключ-значение.
![Пара Ключ-Значение](/images/uploads/originals/15/03.png)
Макет
Сайты могут быть разбиты на компоненты или дивы для макетов. Это полезно - осмыслить общую структуру веб-сайта, прежде чем писать HTML или CSS.
![Макет](/images/uploads/originals/15/04.png)
Структура дерева
Аналогично, структурирование сайта также следует методологии дерева. Эта заметка иллюстрирует дерево с ветвями.
![Структура дерева](/images/uploads/originals/15/05.png)
Block vs. Inline
Элементы, которые простираются по всей ширине страницы, являются блочными (block) элементами. Несколько блочных элементов включают headers, footers, headings (h1, h2, h3 и т.д.), divs, абзацы (p). Встроенные (inline) элементы занимают столько места, сколько им нужно: span, ссылки (а) и изображения (img) являются лишь несколькими примерами.
![Block vs. Inline](/images/uploads/originals/15/06.png)
Inline-block
Существует также такое понятие, как установка display: inline-block, чтобы создать равномерную сетку. Inline-block элементы могут иметь высоту и ширину.
![Inline-block](/images/uploads/originals/15/07.png)
Box Model
Все элементы CSS основаны на этой модели. Внутренний ящик content (может быть что угодно), непосредственно окружает content его padding, потом border и наконец внешний ящик box–margin.
![Box Model](/images/uploads/originals/15/08.png)
Margins Снаружи
Margins выталкивают вокруг элемента. Margins считаются вне элемента, а края соседних элементов будут перекрываться.
![Margins Снаружи](/images/uploads/originals/15/09.png)
Padding Внутри
Padding толкает внутрь содержание. Используйте padding для перемещения содержимого от краев блока.
![Padding Внутри](/images/uploads/originals/15/10.png)
Auto Margins
Установка margins auto для право и лево - это удобный способ центрирования.
![Auto Margins](/images/uploads/originals/15/11.png)
Max-width
Max-width предотвращает значение ширины свойства от становления больше чем max-width. Это особенно полезно при проектировании для небольших экранов.
(например, мобильный!)
![Max-width](/images/uploads/originals/15/12.png)
Relative and Absolute
Установив родительский элемент в положение: relative, а его ребенка в положение: absolute, то позиционировать ребенка можно в пределах (или относительно) его родителя. Обратите внимание, что родитель по умолчанию всегда тело.
![Relative and Absolute](/images/uploads/originals/15/13.png)
Float
Установив элементу float, как это показано ниже на примере с картинкой, позволит текст обтекать картинку.
![Float](/images/uploads/originals/15/14.png)
Fixed
Фиксированные элементы всегда прикреплены на том же месте, независимо от позиции страницы (скроллинга).
![Fixed](/images/uploads/originals/15/15.png)
Ссылка на ваши стили
Если у вас нет ссылки на таблицу стилей в хедере вашего HTML, ваш сайт будет грустным и наверняка не привлекательным.
<link rel=”stylesheet” href=”./css/style.css”>
![Ссылка на ваши стили](/images/uploads/originals/15/16.png)
Оригинальная статья: 16 CSS Lessons via Post-it® Notes