Перейти к основному содержимому

CSS

Приоритет селекторов​

  1. Стили в атрибуте тега (инлайновые стили)
  2. Стили по ID
  3. Стили по классу
  4. Стили по тегу

Приоритет стилей​

  1. Стили в атрибуте тега
  2. Стили в отдельном файле
  3. Стили браузера по-умолчанию

Свойства display​

  1. none
  2. flex
  3. grid
  4. block
  5. inline
  6. table

Методы position​

Static​

Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своём месте в документе. Свойства top, right, bottom, left и z-index не применяются к данному элементу. Это значение по умолчанию.

Relative​

Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top, right, bottom и left. Смещение не влияет на положение любых других элементов, то есть пространство, выделяемое для элемента в макете страницы, такое же, как если бы позиция была static. Это значение создаёт новый [контекст наложения](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context), когда значение z-index не auto. Его влияние на элементы table-*-group, table-row, table-column, table-cell и table-caption не определено.

Absolute​

Элемент удаляется из обычного потока документа, и для элемента в макете страницы не выделяется дополнительное пространство. Он располагается относительно своего ближайшего спозиционированного предка, если такой есть; в противном случае он помещается относительно исходного [содержащего блока](https://developer.mozilla.org/ru/docs/Web/CSS/Containing_block). Его конечная позиция определяется значениями top, right, bottom, и left. Это значение создаёт новый [контекст наложения](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context), когда значение z-index не auto. Внешние отступы абсолютно спозиционированных блоков не [схлопываются](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) с отступами других блоков.

Sticky​

Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и [содержащего блока](https://developer.mozilla.org/ru/docs/Web/CSS/Containing_block) (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top, right, bottom, и left.

Fixed​

Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство. Он позиционируется относительно исходного [содержащего блока](https://developer.mozilla.org/ru/docs/Web/CSS/Containing_block).

Его конечная позиция определяется значениями top, right, bottom и left. Это значение всегда создаёт новый [контекст наложения](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context). При печати fixed-элемент помещается в одно и то же место на каждой странице

Псевдоклассы css​

Это слово, которое добавляется к селектору и описывает его особое состояние, например поведение при наведение мыши. Пример псевдоклассов: hover (наведение мыши), focus (фокусировка на элементе, например клик на инпуте), active (в момент активации пользователем), visited (например, для ссылок, которые пользователь уже посетил)

Как отцентрировать div​

Первый способ через margin:auto, второй нужно создать див обертку и обертке прописать стили display: flex; justify-content: center; align-items: center;

Flex-shrink​

Это свойство, которое устанавливает, как быстро элемент будет уменьшаться в flex-контейнере относительно других элементов в нем, если будет мало места. 1 - значит будет уменьшаться с той же скоростью, как и другие, 0 - не будет уменьшаться.

Rem единица​

rem в CSS означает "root em". Он представляет собой единицу измерения, которая относится к размеру шрифта корневого элемента (root element) документа.

Значение 1rem равно текущему значению размера шрифта корневого элемента. Например, если размер шрифта корневого элемента равен 16 пикселей, то 1rem будет равен 16 пикселей. Если размер шрифта корневого элемента изменяется, то и значение 1rem также будет изменяться.

Использование rem может быть полезным для создания адаптивных и масштабируемых макетов, так как оно позволяет задавать размеры элементов относительно размера шрифта корневого элемента, который можно легко изменить с помощью медиа-запросов.

В чем отличие opacity и visiability в CSS?​

opacity и visibility - это два разных свойства CSS, которые используются для управления видимостью элементов на странице.

opacity определяет прозрачность элемента. Значение свойства opacity может быть от 0 до 1, где 0 означает полную прозрачность элемента, а 1 - полную непрозрачность. При использовании свойства opacity элемент остается на своем месте и занимает место на странице, но становится прозрачным.

visibility определяет видимость элемента. Значение свойства visibility может быть visible (видимый) или hidden (скрытый). При использовании свойства visibility элемент может быть скрыт или показан, но он всегда занимает место на странице.

Таким образом, отличие между opacity и visibility заключается в том, что первое свойство изменяет прозрачность элемента, а второе - его видимость.

Отличия Grid от Flex​

CSS Grid и Flexbox являются двумя разными модулями CSS для создания гибких и отзывчивых макетов на веб-страницах. Они предлагают различные подходы к расположению элементов.

Основные отличия между CSS Grid и Flexbox:

  1. Направленность: Flexbox предназначен для управления размещением элементов в одномерном пространстве - либо в строку, либо в столбец. Grid, с другой стороны, предоставляет более мощный двумерный подход, позволяющий управлять размещением элементов как в строках, так и в столбцах.
  2. Количество измерений: Flexbox является одномерным, что означает, что он работает только с одной осью (либо горизонтальной, либо вертикальной). Grid, с другой стороны, является двумерным, поэтому он может управлять размещением элементов как по горизонтали, так и по вертикали.
  3. Укладка элементов: Flexbox, по умолчанию, позволяет элементам изменять свою ширину и высоту для лучшего соответствия. Grid предлагает более гибкий и разнообразный контроль над позиционированием элементов, включая возможность создавать сетку с разной ширины и высотой ячеек.
  4. Порядок элементов: Flexbox позволяет изменять порядок элементов на основе их исходного порядка в коде HTML. Grid также предлагает управление порядком элементов, но с более гибкими возможностями - элементы могут быть размещены в любой ячейке в пределах сетки.
  5. Элементы-контейнеры: В Flexbox каждый дочерний элемент является элементом-контейнером, занимающим пространство внутри себя. В Grid главный контейнер является элементом-контейнером, внутри которого настраивается сетка и размещаются элементы.

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

SVG​

Одна из самых сильных сторон технологии SVG - возможность манипулировать стилями изображений через css