css

Question 1

Какие способы применения стилей существуют

Answer 1

Различают четыре способа применения стилей:


1. Inline Styles: Инлайновые стили добавляются в атрибут style непосредственно внутрь конкретного тега
2. Global Styles: Размещение стилей в head документа в элементе style. Недостаток этого способа в том, что CSS код применяется только к одной странице сайта, а не ко многим. Этот способ обычно применяется тогда, когда нужно написать CSS на конкретной странице сайта, не затрагивая остальных, и, в общем случае, к употреблению не рекомендуется.
3. External Styled: Размещение ссылки на css документ через элемент link.
4. Import inside css: Импорт описания стиля в документ.
   Подключение стилей при помощи CSS-файла, в котором директивы @import подключают другие файлы, может значительно увеличить время отрисовки страницы. Браузер узнает о существовании других CSS-файлов слишком поздно, а если и в них окажутся импорты, то всё будет ещё хуже.

Question 2

Какие css селекторы вы знаете?

Answer 2

1. Селекторы тега
   tag-name
2. Селекторы класса
   .class-name
3. Селекторы идентификатора (id)
   #id-name
4. Селекторы атрибута
   [attr] [attr=value] a[href="https://example.com"]
5. Псевдоклассы & Псевдоэлементы
   ::before ::after ::selection ::first-line ::first-letter

:hover :active :invalid :nth-child() :first-child :last-child :only-child

6. Комбинированные селекторы:

• селектор потомка
  body p
• дочерний селектор
  article > p
  При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору.
• Cоседний родственный комбинатор
  p + img
  Выберет элемент, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии.
• Общий родственный комбинатор
  p ~ img
  Выберет все родственные элементы, которые находятся в любом месте после элементов.

7. Универсальный селектор *

Question 3

Как работает каскад в CSS?

Answer 3

1. Сначала браузер анализирует и фильтрует значения, чтобы получить список объявленных значений.
2. Затем включается алгоритм каскада, и в результате для каждого свойства остаётся только одно каскадированное значение.
3. Если какое-то значение не было объявлено, оно получается с помощью наследования или начальных значений. Таким образом каждый элемент получает полный набор определённых значений.
4. Затем наступает первый этап вычислений, и браузер преобразует определённые значения в вычисленные. Именно они передаются по наследству потомкам элемента.
5. На втором этапе вычислений браузер разрешает те значения, которые зависят от устройства пользователя и относительного расположения элементов на странице, а также отбрасывает те значения, которые не нужны для отрисовки. В результате получаются используемые значения.
6. В конце концов к веб-странице применяются некоторые ограничения, и используемые значения становятся действительными.

Question 4

Как вычислить вес селектора?

Answer 4

1. Приоритет.
   У инлайн-стилей наивысший приоритет, их нельзя переопределить с помощью селекторов по идентификатору, классу или тегу во внешнем CSS. Единственный способ это сделать — добавить !important к значению свойства. Но этот приём считается плохой практикой.

Вес селекторов:
1. Стили указанные в элементе разметки – 1000

2. Селекторы по идентификатору #id-name – 0100
3. Селекторы по классу, селекторы по атрибуту и селекторы с псевдоклассами – 0010
4. Селекторы по тегу, селекторы с псевдоэлементами – 0001
5. Комбинаторы +, >, ~, универсальный селектор * и псевдокласс :where() веса не имеют.
6. Псевдоклассы :is(), :has() и :not() принимают вес наиболее специфичного селектора внутри скобок.

Вес записывается в виде a, b, c, d, где:
- a — встроенные стили,
- b — селектор по идентификатору,
- c — селектор классов, псевдоклассов и атрибутов,
- d — селектор по тегу и псевдоэлементу.

Если в цепочке есть один из этих селекторов, то на его место в строке a, b, c, d ставится единица. Если нет — нуль.

Посчитаем на примере ul .list-item.list-active

Встроенных стилей нет. Ставим нуль — 0, b, c, d.
Идентификатора тоже нет, добавляем на его место нуль — 0, 0, c, d.
Есть два класса, каждый весит единицу. Складываем их и подставляем в формулу: 0, 0, 2, d.
Тег один, ставим 1.
Получается, вес ul .list-item.list-active 0021

Question 5

Наследование в CSS

Answer 5

Некоторые значения свойства CSS, установленные для родительских элементов наследуются их дочерними элементами, а некоторые нет. Например свойства colorи font-familyнаследуются, а width и padding нет. Какие свойства наследуются по умолчанию, а какие нет, чаще всего определяется здравым смыслом.

Question 6

Какие способы контроля наследования в CSS вы знаете?

Answer 6

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

inherit
Устанавливает значение свойства, применённого к элементу, таким же, как у его родительского элемента. Фактически, это “включает наследование”.

initial
Устанавливает значение свойства, применённого к выбранному элементу, равным initial value этого свойства (в соответствии с настройками браузера по умолчанию. Если в таблице стилей браузера отсутствует значение этого свойства, оно наследуется естественным образом.)

unset
Возвращает свойству его естественное значение. По своему поведению unset чем-то похож на initial + inherit — если это свойство ненаследуемое от родителя — оно сбросится до начального значения, наследуемое — получит значение родителя.

revert
Это менее строгий режим сброса — он отменяет все установленные разработчиком значения для данного свойства до значения, которое считается браузером «значением по умолчанию».

all
Свойство принимает одно из четырёх значений (inherit, initial, unset, или revert). Это удобный способ для отмены изменений, внесённых в стили, для того, чтобы вы могли вернуться к стартовой точке перед внесением новых изменений.
Все наследуемые свойства для .widget и его потомков будут сброшены

.widget {
  all: revert;
}

Question 7

Значения свойства display

Answer 7

Свойство display определяет тип отображения (display type) элемента, имеющий два основных свойства, определяющих генерацию боксов — внешний тип отображения определяет расположение бокса в схеме потока (flow layout) и внутренний тип отображения определяет расположение дочерних элементов бокса (бокс - это прямоугольная область, являющаяся изображением элемента).

Часто встречающиеся значения:

1. block: Элемент отображается как блочный элемент и занимает всю доступную горизонтальную ширину. Новые элементы начинаются с новой строки.
2. inline: Элемент отображается как строчный элемент и не прерывает текущую строку текста. Он занимает только необходимое для своего содержимого пространство.
3. inline-block (legacy): Элемент отображается как строчный блок. Он занимает только необходимое пространство для своего содержимого, при этом его можно стилизовать, как блочный элемент.
4. none: Элемент не отображается на странице. Он полностью скрывается и не занимает места в макете страницы.
5. flex: Элемент отображается как флекс-контейнер, который позволяет управлять распределением элементов внутри него. Он позволяет использовать мощные функции построения адаптивных макетов.
6. grid: Элемент отображается как грид-контейнер. С помощью этого значения можно создавать сложные макеты с разделением на строки и столбцы.

Question 8

Что такое Box Model?

Answer 8

Блочная модель, она же box model — это алгоритм расчёта размеров каждого отдельного элемента на странице, которым браузеры пользуются при отрисовке.

Box model включает в себя четыре основных компонента, которые определяют размер и расположение элемента:

1. Размер содержимого определяется свойствами width (ширина) и height (высота).
2. Padding (внутренний отступ):
   
   • Внутренний отступ является пространством между содержимым элемента и его границей. Он создает отступ вокруг содержимого.
   • Величина внутреннего отступа определяется свойствами padding-top, padding-right, padding-bottom и padding-left.
3. Border (граница):
   
   • Граница представляет собой линию, окружающую содержимое и внутренний отступ элемента. Она разделяет элемент от соседних элементов.
   • Свойство border используется для задания ширины, стиля и цвета границы.
4. Margin (внешний отступ):
   
   • Внешний отступ представляет собой пространство вокруг элемента, разделяющее его с другими элементами на странице.
   • Размер внешнего отступа определяется свойствами margin-top, margin-right, margin-bottom и margin-left.

Свойство box-sizing
По умолчанию браузеры рассчитывают размеры элемента ровно так, как описано выше, прибавляя внутренние отступы и рамки к ширине и высоте. С этим могут быть связаны неприятные сюрпризы, когда элемент в вёрстке занимает больше места, чем вы ожидаете.

Мы можем поменять стандартное поведение и указать браузеру, что ширина и высота, заданные в CSS, должны включать в себя в том числе внутренние отступы и рамки. Делается это при помощи свойства box-sizing: border-box. Значение по умолчанию content-box

Question 9

Какие есть способы “прибить футер” к низу страницы?

Answer 9

1. Flexbox

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  margin-top: auto;
}

2. Grid

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Question 10

Какие относительные величины вы знаете?

Answer 10

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

Ниже перечислены некоторые распространенные относительные величины:

1. em:
   
   • Значение em определяет размеры элемента относительно размера шрифта его родителя.
   • Например, если размер шрифта родительского элемента равен 16 пикселям, и у дочернего элемента задан размер 2em, то размер дочернего элемента будет равен 32 пикселям (2 * 16).
2. rem:
   
   • Значение rem задает размеры элемента относительно размера шрифта корневого элемента (<html>).
   • Например, если размер шрифта корневого элемента равен 16 пикселям, и у элемента задан размер 2rem, то размер элемента будет равен 32 пикселям (2 * 16).
3. %:
   
   • Значение % позволяет задавать размер элемента в процентах от размеров родительского элемента.
     Ширина width - относительно ширины родительного элемента
     Высота height - относительно высоты родительного элемента, но только если у него задана высота либо это флекс или грид элемент.
     При относительном позиционировании (position: relative; + top left bottom right) нужны те же условия.
     Для абсолютно позиционированных объектов - относительно высоты родительского элемента. При этом, задавать высоту родителю не обязательно.
     Отступы padding \ margin - относительно ширины родительного элемента, даже если задаются вертикальные отступы.
     transform: translate(x, y) - относительно ширины \ высоты самого объекта к которому применено свойство.
     font-size и line-height - относительно размера свойства font-size
4. vw и vh:
   
   • Значения vw и vh определяют размер элемента в процентах от размеров видимой области окна браузера.
   • Значение 1vw равно 1% ширины видимой области, а 1vh равно 1% высоты видимой области.
5. vmin и vmax:
   
   • Значения vmin и vmax позволяют задавать размеры элемента в процентах от наименьшей или наибольшей размерности видимой области окна браузера.
   • vmin берет во внимание наименьшую размерность (ширину или высоту), а vmax - наибольшую.

Question 11

Разница между блочным и строчным элементом

Answer 11

Если элемент определён как блочный, то он будет вести себя следующим образом:

• Начнётся с новой строки.
• Будет расширяться вдоль строки таким образом, чтобы заполнить всё пространство, доступное в её контейнере. В большинстве случаев это означает, что блок станет такой же ширины, как и его контейнер, заполняя 100% доступного пространства.
• Будут применяться свойства width и height.
• Внешние и внутренние отступы, рамка будут отодвигать от него другие элементы.

Если элемент имеет тип отображения inline (строчный), то:

• Он не будет начинаться с новой строки.
• Свойства width и height не будут применяться.
• Вертикальные внешние и внутренние отступы, рамки будут применяться, но не будут отодвигать другие строчные элементы.
• Горизонтальные внешние и внутренние отступы, рамки будут применяться и будут отодвигать другие строчные элементы.

Question 12

Разница между псевдоклассом и псевдоэлементом

Answer 12

подсказка!!! псевдо-классы определяют поведение, а псевдо-элементы - внешность,

• Псевдоклассы - это ключевые слова, добавляемые к селекторам, чтобы указать определенное состояние элемента или его позицию в документе. Например, :hover указывает на элемент, когда курсор наводится на него. Примеры псевдоклассов: :hover, :active, :focus и :nth-child.
  
  • Псевдоэлементы - это части элементов, которые могут быть выбраны и стилизованы независимо от содержимого элемента. Они указываются с помощью двойного двоеточия (::). Примеры псевдоэлементов: ::before, ::after, ::first-letter и ::first-line.

Псевдоклассы:
1. :hover - Применяет стили, когда курсор находится над элементом.
2. :active - Применяет стили, когда элемент активен (нажатие кнопки мыши).
3. :focus - Применяет стили, когда элемент получает фокус (например, при нажатии на поле ввода).
4. :visited - Применяет стили к посещенным ссылкам.
5. :first-child - Применяет стили к первому дочернему элементу родителя.
6. :last-child - Применяет стили к последнему дочернему элементу родителя.
7. :nth-child(n) - Применяет стили к элементу, который является n-м дочерним элементом родителя (можно использовать различные формулы, например, :nth-child(2n) для выбора каждого второго элемента).
8. :nth-of-type(n) - Применяет стили к элементу, который является n-м элементом выбранного типа (например, :nth-of-type(3) выберет третий элемент типа).
9. :checked
10. :disabled, :enabled
11. :first-of-type — первый;
12. :nth-of-type(n-число) — каждый n-й элемент;
13. :last-of-type — последний;
14. :nth-last-of-type(n-число) — каждый n-й элемент с отсчётом «с конца».

Псевдоэлементы:
1. ::before - Вставляет псевдоэлемент перед содержимым выбранного элемента.
2. ::after - Вставляет псевдоэлемент после содержимого выбранного элемента.
3. ::first-letter - Применяет стили к первой букве содержимого элемента.
4. ::first-line - Применяет стили к первой строке содержимого элемента.
5. ::selection - Применяет стили к выделенному пользователем тексту.

Question 13

Основные концепции и свойства Flexbox

Answer 13

1. Flex-контейнер (Flex Container):
   
   • Это родительский элемент, display со значением flex или inline-flex
2. Flex-элементы (Flex Items):
   
   • Это дочерние элементы,
3. Основные свойства Flexbox:
   
   • flex-direction: Определяет, будет ли контейнер располагать элементы в строку или в столбец.
   • justify-content: Определяет выравнивание элементов вдоль основной оси.
   • align-items: Определяет выравнивание элементов вдоль поперечной оси (cross axis).
   • flex-wrap: Определяет, должны ли элементы переноситься на новую строку или оставаться в одной строке при нехватке места.
   • align-content: Определяет выравнивание строк Flex-элементов вдоль поперечной оси, если они занимают несколько строк.
4. Дополнительные свойства Flexbox:
   
   • flex-grow: Определяет, насколько элемент может растягиваться внутри контейнера, если есть свободное пространство.
   • flex-shrink: Определяет, насколько элемент может сжиматься внутри контейнера, если места недостаточно.
   • flex-basis: Определяет исходный размер элемента до распределения свободного пространства или сжатия.
   • order: Определяет порядок отображения Flex-элементов внутри контейнера.

Question 14

Основные концепции и свойства Grid

Answer 14

1. Grid-контейнер (Grid Container):
   
   • Это родительский элемент, display со значением grid или inline-grid.
2. Grid-ячейки (Grid Items):
   
   • Это дочерние элементы,
3. Основные свойства Grid:
   
   • grid-template-rows и grid-template-columns: Определяют размеры и количество ячеек в строках и столбцах сетки.
   • grid-gap или gap: Устанавливают промежутки между ячейками.
   • justify-items: Определяет горизонтальное выравнивание Grid-ячеек внутри их ячейки.
   • align-items: Определяет вертикальное выравнивание Grid-ячеек внутри их ячейки.
   • justify-content: Определяет горизонтальное выравнивание Grid-ячеек внутри Grid-контейнера.
   • align-content: Определяет вертикальное выравнивание Grid-ячеек внутри Grid-контейнера.
4. Дополнительные свойства Grid:
   
   • grid-template-areas: Определяет расположение и имена областей сетки, позволяя группировать ячейки внутри них.
   • grid-auto-rows и grid-auto-columns: Определяют размеры и количество ячеек, которые будут созданы автоматически, если их не хватает в явно определенной сетке.
   • grid-auto-flow: Определяет порядок автоматического размещения Grid-ячеек, когда они не помещаются в явно определенную сетку.

Question 15

Позиционироварие элемента в CSS

Answer 15

Позиционирование в CSS позволяет контролировать расположение элементов на веб-странице. С помощью свойства position и связанных с ним свойств можно задавать различные способы позиционирования элементов. Вот некоторые из них:

1. Поток документа (static):
   
   • Это значение по умолчанию для свойства position. Элементы позиционируются в соответствии с обычным потоком документа, их расположение определяется в порядке их появления в HTML-коде.
   • Для элементов с position: static игнорируются свойства top, right, bottom и left.
2. Относительное позиционирование (relative):
   
   • Элементы с position: relative позиционируются относительно своего нормального местоположения.
   • Можно использовать свойства top, right, bottom и left, чтобы сдвигать элемент относительно его исходной позиции.
3. Абсолютное позиционирование (absolute):
   
   • Элементы с position: absolute позиционируются относительно ближайшего родительского элемента с позиционированием, отличным от position: static.
   • Можно использовать свойства top, right, bottom и left, чтобы точно указать позицию элемента.
4. Фиксированное позиционирование (fixed):
   
   • Элементы с position: fixed позиционируются относительно окна браузера и остаются на своем месте при прокрутке страницы.
   • Можно использовать свойства top, right, bottom и left, чтобы задать фиксированную позицию элемента.
5. Закрепленное позиционирование (sticky):
   
   • Элементы с position: sticky позиционируются относительно своего ближайшего контейнера прокрутки или родительского элемента с прокруткой.
   • Элемент будет прилипать к определенной позиции, когда пользователь прокручивает страницу.

Question 16

Что такое CSS? Для чего он нужен?

Answer 16

CSS (Cascading Style Sheets) — это язык разметки, используемый для описания внешнего вида веб-страниц. Он определяет стилизацию элементов HTML (HyperText Markup Language), таких как цвет текста, размер и шрифт, расположение элементов на странице, отступы, границы и многое другое. CSS позволяет разработчикам создавать красивые и современные веб-сайты, обеспечивая разделение между содержанием веб-страницы и её представлением. Это упрощает поддержку и обслуживание веб-сайтов, а также повышает их гибкость и масштабируемость.

Question 17

Что такое CSS правило?

Answer 17

selector {
declaration
property: value;
}

Селектор: это часть CSS-правила, которая указывает, на какие элементы HTML будет применяться стиль. Селектор может быть элементом HTML (например, <p> для абзацев), классом (например, .my-class), идентификатором (например, #my-id), псевдоклассом (например, :hover для стилизации при наведении курсора) или комбинацией этих селекторов.

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

Question 18

Что такое схлопывание границ (margin collapsing)?

Answer 18

Схлопывание границ (margin collapsing) - это особенность работы CSS, при которой верхние и нижние внешние отступы (margins) некоторых элементов могут сливаться между собой в определенных ситуациях.

Процесс схлопывания границ происходит, когда у элементов находятся вертикальные внешние отступы (margins) и они находятся рядом друг с другом или один внутри другого. В этом случае браузер выбирает наибольшее значение из отступов (margin), а не суммирует их. Это может приводить к тому, что отступы элементов могут выглядеть как один общий отступ, что называется схлопыванием границ.

Question 19

Что такое z-index? Как формируется контекст наложения?

Answer 19

z-index в CSS - это свойство, которое определяет порядок наложения элементов на веб-странице по оси Z (ось, направленная от вас вглубь экрана). Это позволяет управлять тем, какие элементы должны находиться поверх других элементов, когда они перекрываются.

Значение z-index может быть положительным, отрицательным или нулевым. Чем выше значение z-index, тем ближе элемент к вас по оси Z, и тем выше он находится на странице. Если у нескольких элементов задано одинаковое значение z-index, порядок их наложения будет определяться порядком, в котором они встречаются в HTML-коде (позднее идущие элементы будут выше).

Когда элементы на странице находятся внутри других элементов, формируется контекст наложения. Это означает, что z-index элементов может быть влияние только внутри своего контекста наложения. Это важно помнить при управлении порядком наложения, особенно при использовании позиционирования (position).

Если у элемента установлено значение z-index, а у его родительского элемента нет, то элемент будет находиться в контексте наложения родительского элемента. Если оба элемента имеют z-index, то дочерний элемент будет находиться выше или ниже в зависимости от соотношения их z-index и их местоположения в HTML-дереве.

Если элементы находятся вне контекста наложения, они могут перекрывать элементы внутри других контекстов наложения независимо от их z-index.

Question 20

Для чего используется ключевое слово currentColor в CSS?

Answer 20

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

Обычно currentColor используется в свойствах, которые принимают значения цвета, таких как border-color, outline-color и box-shadow. Установка таких свойств значением currentColor позволяет автоматически наследовать цвет текста родительского элемента для данных свойств.

<p style="color: blue; border: 1px solid currentColor;">Пример текста</p>

Question 21

Способы задания цвета в CSS

Answer 21

• Именование цвета: color: red
• Шестнадцатеричные значения: hex код Цвет можно задать с использованием шестнадцатеричной записи, где каждый канал (красный, зеленый, синий) кодируется двумя символами.
• RGB Цвет можно задать с использованием значения в формате RGB (красный, зеленый, синий), где каждый канал может быть в диапазоне от 0 до 255.
• RGBA: Также можно использовать значение в формате RGBA, где последний параметр задает прозрачность (альфа-канал).
• HSL: CSS поддерживает формат HSL (оттенок, насыщенность, светлота), который предоставляет более интуитивное представление цвета.
• HSLA: Аналогично RGB, но с дополнительным альфа-каналом для задания прозрачности.
• transparent: ключевое слово обозначающее прозрачный цвет
• currentColor: текущий цвет который наследуется от родителя

Question 22

Какие CSS-свойства используются для создания анимаций и плавных переходов?

Answer 22

Transform
Transition
Animation
@keyframes

Question 23

Расскажите о функции-псевдоклассе :has()?

Answer 23

Функция-псевдокласс :has()позволяет уточнить основной селектор дополнительным. Это единственный способ выбрать элемент на основе дочернего или соседнего элемента посредством CSS.

До появления псевдокласса :has() единственной возможностью управлять проверкой вложенного селектора был JavaScript.

Question 24

Что такое специфичность?

Answer 24

Специфичность — это алгоритм, благодаря которому браузер определяет, какие именно стили из всего набора применить к элементу. В вычислениях участвуют CSS-селекторы. Если одному и тому же элементу подходит сразу несколько CSS-правил с разными селекторами, то браузер применяет те стили, вес селектора которых больше. Правило каскада «кто ниже, тот и выигрывает» при этом может нарушаться.

Специфичность — это одно из базовых понятий в CSS.

Question 25

Разница специфичности между :where() и :is()

Answer 25

Не забываем про разницу в специфичности :where() и :is(). Несмотря на то, что :where() расположен ниже, текст ссылок будет окрашен в красный цвет за счёт специфичности селекторов, переданных в псевдокласс :is():

\:is(header, main, footer) a {
  color: red;
}

\:where(header, main, footer) a {
  color: blue;
}