Предзагрузка страницы

16 CSS Уроков с помощью Post-it® заметок

  1. Каскадные Таблицы Стилей Действуют от Наследования

    CSS имеет предко-потомственные отношения. Все ранее определения предка будут автоматически унаследованы одним из своих детей, если не указано иное.

    Каскадные Таблицы Стилей Действуют от Наследования

  2. Последние Выигрывают

    Если элемент определен в более чем одном месте в CSS-стилях, последнее определение переопределяет предыдущие. (Если эти липучки представленных цветов соответствует нашим H1, то заголовки Н1 будут розовыми.)

    Последние Выигрывают

  3. Пара Ключ-Значение

    Для каждого HTML элемента которому будет задан стиль, должен быть назначен соответствующий селектор CSS. Они всегда появляются в паре ключ-значение.

    Пара Ключ-Значение

  4. Макет

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

    Макет

  5. Структура дерева

    Аналогично, структурирование сайта также следует методологии дерева. Эта заметка иллюстрирует дерево с ветвями.

    Структура дерева

  6. Block vs. Inline

    Элементы которые простираются по всей ширине страницы являются блочными (block) элементами. Несколько блочных элементов включают headers, footers, headings (h1, h2, h3 и т.д.), divs, абзацы (p). Встроенные (inline) элементы занимают столько места, сколько им нужно: span, ссылки (а) и изображения (img) являются лишь несколькими примерами.

    Block vs. Inline

  7. Inline-block

    Существует также такое понятие, как установка display: inline-block, чтобы создать равномерную сетку. Inline-block элементы могут иметь высоту и ширину.

    Inline-block

  8. Box Model

    Все элементы CSS основаны на этой модели. Внутренний ящик content (может быть что угодно), непосредственно окружает content его padding, потом border и наконец внешний ящик box–margin.

    Box Model

  9. Margins Снаружи

    Margins выталкивают вокруг элемента. Margins считаются вне элемента, а края соседних элементов будут перекрываться.

    Margins Снаружи

  10. Padding Внутри

    Padding толкает внутрь содержание. Используйте padding для перемещения содержимого от краев блока.

    Padding Внутри

  11. Auto Margins

    Установка margins auto для права и лева - это удобный способ центрирования.

    Auto Margins

  12. Max-width

    Max-width предотвращает значение ширины свойства от становления больше чем max-width. Это особенно полезно при проектировании для небольших экранов.

    (например, мобильный!)

    Max-width

  13. Relative and Absolute

    Установив родительский элемент в положение: relative а его ребенка в положение: absolute, то позиционировать ребенка можно в пределах (или относительно) его родителя. Обратите внимание, что родитель по умолчанию всегда тело.

    Relative and Absolute

  14. Float

    Установив элементу float, как это показано ниже на примере с картинкой, позволит текст обтекать картинку.

    Float

  15. Fixed

    Фиксированные элементы, всегда прикреплены на том же месте, независимо от позиции страницы (скроллинга).

    Fixed

  16. Ссылка на ваши стили

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

    <link rel=”stylesheet” href=”./css/style.css”>

    Ссылка на ваши стили

Оригинальная статья: 16 CSS Lessons via Post-it® Notes