HTML+CSS Fundamentals

HTML Fundamentals

ПОТОК ДОКУМЕНТА

Поток документа (flow) - порядок отображения элементов на странице.

Элементы, расположенные выше по коду, отображаются перед элементами, расположенными ниже. Это делает результат вывода элементов страницы предсказуемым и управляемым.

БЛОЧНЫЕ ЭЛЕМЕНТЫ

Блочные (block) элементы расположены один под другим
Такие элементы имеют ширину, высоту, отступы
Блоки занимают всю ширину родительского элемента. Например, если задать им фон, то фон будет виден по всей ширине родительского элемента
Так как блочный элемент занимает всю ширину, его внутренние элементы могут быть выровнены горизонтально, т.е. к левому, правому краю, посередине и по всей ширине

БЛОЧНЫЕ ЭЛЕМЕНТЫ

Блочный элемент может быть внутри другого блочного элемента
Свойства строчных элементов не предназначены для блочных элементов, например, вертикальное выравнивание (vertical-align)

СТРОЧНЫЕ ЭЛЕМЕНТЫ

В строчные (inline) элементы допускается вставлять текст и другие строчные элементы
В строчные элементы запрещено вставлять блочные
Высота строчных элементов не контролируется свойством height
Ширина пропорциональна ширине контента

СТРОЧНЫЕ ЭЛЕМЕНТЫ

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

СТРОЧНО-БЛОЧНЫЕ ЭЛЕМЕНТЫ

В строчно-блочных (inline-block) элементах возможно размещать текст или блочные элементы
Высота элемента рассчитывается автоматически браузером на основе контента
Ширина равна ширине контента с учетом отступов и границ

СТРОЧНО-БЛОЧНЫЕ ЭЛЕМЕНТЫ

Inline-block элементы расположены в одной строке и переносятся на следующую при необходимости
Могут быть выровнены по вертикали
Допускается установка ширины и высоты

СПЕЦСИМВОЛЫ

HTML интерпретирует символы <, >, &, " и др. как специальные. При необходимости их использования они заменяются на, соответственно, <, >, &, ".

КАСКАД

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

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

НВ CSS действует наследование. Но не все свойства могут наследоваться. Например, свойство text-size передается потомкам, а padding - нет.

СЕЛЕКТОРЫ

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

СЕЛЕКТОР ПО ТЕГУ

Классы определяют группу тегов.

СЕЛЕКТОР ПО КЛАССУ

Для выбора уникального элемента используются ID. На странице не должно быть более одного элемента с одинаковыми ID.

СЕЛЕКТОР ПО ID

Универсальный селектор *. Этот селектор позволяет выбрать абсолютно все элементы страницы.

УНИВЕРСАЛЬНЫЙ СЕЛЕКТОР

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

СЕЛЕКТОР ПОТОМКОВ

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

CHILD-СЕЛЕКТОР

General Sibling Combinator позволяет выбрать элементы, расположенные рядом, т.е. те, которые находятся на том же уровне вложенности после нужного элемента.

SIBLING-КОМБИНАТОР

Этот комбинатор аналогичен General Sibling Combinator, но позволяет выбрать только смежные элементы.

Adjacent Sibling Комбинатор

Данный селектор позволяет выбрать элементы с определенными атрибутами. Объявляется в квадратных скобках

СЕЛЕКТОР ПО АТРИБУТУ

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

ПСЕВДО-КЛАСС

Используется формула (an + b). Описание:

a - размер цикла,

n - счетчик (начинается с 0),

и b - шаг цикла.

Также в CSS можно определять псевдо-элементы с помощью ::

ПСЕВДО-ЭЛЕМЕНТ

СПЕЦИФИЧНОСТЬ CSS

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

Инлайновые стили
ID (# или ID селектора)
Классы, атрибуты, псевдо-классы
Элементы и псевдоэлементы, включая :before и :after.

w3.org/TR/ css3-selectors/#specificity

ВЕС СТИЛЕЙ

При использовании !important в объявлении свойства, оно перекрывает любое другое объявление.

Использование !important считается плохой практикой, его стоит избегать, т.к. оно затрудняет дебаггинг из-за нарушения естественного каскадирования ваших стилей.

!important

Универсальный селектор * обладает нулевым весом
Псевдо-элементы имеют вес (0, 0, 0, 1) в отличие от псевдо-классов (0, 0, 1, 0)
Псевдо-класс :not() не добавляет специфичности селектору
Значение !important может перекрыться только другим !important, определенным в CSS позже. Можно считать, что его вес составляет 1, 0, 0, 0, 0

ВАЖНЫЕ ЗАМЕЧАНИЯ

CSS Layout

СВОЙСТВО: DISPLAY

inline

Основные значения свойства display:

block

inline-block

http://htmlbook.ru/css/display

HTML-теги: <span>, <a>, <input> ...

HTML-теги: <div>, <p>, <h1> ...

HTML-теги: <button>, <select> ...

СВОЙСТВО: FLOAT

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

http://htmlbook.ru/css/float

CLEARING FLOATS

Чтобы запретить обтекание элемента с какой-либо стороны следует использовать cвойство clear. В этом случае блок будет под элементом. Основные значения: both, right, left.

Пример использования:

http://htmlbook.ru/css/clear

CLEARING FLOATS

Может возникнуть ситуация, при которой в контейнере расположены только "плавающие элементы". В этом случае он "схлопнется" по высоте

Overflow:hidden для контейнера может помочь в таком случае

FLOATS LAYOUT

FLEX

Text

Верстка флексами более эффективна. Она позволяет выравнивать элементы и распределять пространство между ними в контейнере, даже когда их размер не известен и/или может изменяться (flex = гибкий).
Свойство flex определяет, как элемент может расширяться или сжиматься в своем флекс-контейнере. Это свойство объединяет свойства flex-grow, flex-shrink иflex-basis.
CSS-columns не работают с флекс-боксами, как и float, clear и vertical-align.
Для выравнивания по вертикали используются align-content (для родителя) и align-items (для потомков)

https://css-tricks.com/snippets/css/a-guide-to-flexbox/