Вопросы на собеседовании по CSS
CSS [ 7 ]
Что такое CSS?
CSS ( Cascading Style Sheets ) или же каскадные таблицы стилей —
это язык стилей, используемый для описания внешнего вида документа,
написанного на языке разметки HTML.
С помощью CSS можно определить цвета, шрифты, отступы, размеры и другие атрибуты элементов на веб-странице.
Он позволяет разделить содержимое и представление документа, что делает его более гибким и легко изменяемым.
CSS — используется для создания стильных и эстетически приятных веб-сайтов.
С помощью CSS можно определить цвета, шрифты, отступы, размеры и другие атрибуты элементов на веб-странице.
Он позволяет разделить содержимое и представление документа, что делает его более гибким и легко изменяемым.
CSS — используется для создания стильных и эстетически приятных веб-сайтов.
Свойство «Display»
Основные значения свой свойства Display:
block — элемент отображается как блочный элемент, занимает всю доступную ширину экрана и начинает новую строку.
inline — элемент отображается как строчный элемент, не начинает новую строку и занимает только необходимое пространство.
inline-block — элемент отображается как строчный элемент, но может иметь ширину и высоту, а также другие блочные свойства.
none — полностью скрывает элемент со страницы, не удаляя его при этом из HTML-разметки.
flex — элемент отображается как гибкий контейнер, который может изменять размеры и расположение дочерних элементов.
grid — элемент отображается как контейнер сетки, который позволяет управлять расположением и размерами дочерних элементов в двумерной сетке.
Существует и другие значения, такие как «table», «table-cell», «table-row» и другие, которые используются для создания таблиц или других сложных структур.
block — элемент отображается как блочный элемент, занимает всю доступную ширину экрана и начинает новую строку.
inline — элемент отображается как строчный элемент, не начинает новую строку и занимает только необходимое пространство.
inline-block — элемент отображается как строчный элемент, но может иметь ширину и высоту, а также другие блочные свойства.
none — полностью скрывает элемент со страницы, не удаляя его при этом из HTML-разметки.
flex — элемент отображается как гибкий контейнер, который может изменять размеры и расположение дочерних элементов.
grid — элемент отображается как контейнер сетки, который позволяет управлять расположением и размерами дочерних элементов в двумерной сетке.
Существует и другие значения, такие как «table», «table-cell», «table-row» и другие, которые используются для создания таблиц или других сложных структур.
Свойство «Position»
Основные значения свойства Position:
static — элементы отображаются как обычно. Использование свойств позиционирования (left, right, top, bottom) работать не будут.
relative — позиционирование элемента происходит относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его от первоначального расположения, при этом элемент не пропадает из общего потока.
absolute — позиционирование элемента происходит относительно его ближайшего родительского элемента с позиционированием (relative, absolute, fixed), если родительского элемента нету, то элемент позиционируется относительно body, при этом элемент пропадает из общего потока.
fixed — задает фиксированное позиционирование элемента, позиционирование происходит относительно окна браузера, а не родительского элемента, в таком случае элемент пропадает из общего потока и остается фиксированным, это позволяет создать элемент, который остается на месте при прокрутке страницы.
sticky — задает липкое позиционирование элемента, элемент позиционируется относительно родительского элемента с нестандартным значением position (не static). Это значит, что элемент будет вести себя как обычный элемент до тех пор, пока его верхняя граница не достигнет верхней границы родительского элемента, после чего он «прилипнет» к нему и останется на месте при прокрутке страницы до конца родительского блока.
inherit — наследует значение родителя.
static — элементы отображаются как обычно. Использование свойств позиционирования (left, right, top, bottom) работать не будут.
relative — позиционирование элемента происходит относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его от первоначального расположения, при этом элемент не пропадает из общего потока.
absolute — позиционирование элемента происходит относительно его ближайшего родительского элемента с позиционированием (relative, absolute, fixed), если родительского элемента нету, то элемент позиционируется относительно body, при этом элемент пропадает из общего потока.
fixed — задает фиксированное позиционирование элемента, позиционирование происходит относительно окна браузера, а не родительского элемента, в таком случае элемент пропадает из общего потока и остается фиксированным, это позволяет создать элемент, который остается на месте при прокрутке страницы.
sticky — задает липкое позиционирование элемента, элемент позиционируется относительно родительского элемента с нестандартным значением position (не static). Это значит, что элемент будет вести себя как обычный элемент до тех пор, пока его верхняя граница не достигнет верхней границы родительского элемента, после чего он «прилипнет» к нему и останется на месте при прокрутке страницы до конца родительского блока.
inherit — наследует значение родителя.
Блочные и строчные элементы
Разница между блочными и строчными элементами.
Строчные элементы:
Занимают только ту ширину, которая необходима для отображения их содержимого.
Не могут быть выровнены по горизонтали или вертикали с помощью свойств margin и padding.
Игнорируют свойства width и height.
Примеры строчных элементов: span, a, strong, em, img, input, button.
Блочные элементы:
Занимают всю доступную им ширину.
Могут иметь фиксированную ширину и высоту.
Могут быть выровнены по горизонтали и вертикали с помощью свойств margin и padding.
Примеры блочных элементов: div, p, h1- h6, ul, ol, li, header, footer, section.
Строчные элементы:
Занимают только ту ширину, которая необходима для отображения их содержимого.
Не могут быть выровнены по горизонтали или вертикали с помощью свойств margin и padding.
Игнорируют свойства width и height.
Примеры строчных элементов: span, a, strong, em, img, input, button.
Блочные элементы:
Занимают всю доступную им ширину.
Могут иметь фиксированную ширину и высоту.
Могут быть выровнены по горизонтали и вертикали с помощью свойств margin и padding.
Примеры блочных элементов: div, p, h1- h6, ul, ol, li, header, footer, section.
Размер элемента в CSS
Размер элемента в CSS строится из следующего:
Ширина и высота может зависеть от содержимого, которое он содержит. Например, если у элемента есть текст, то его ширина будет определяться длиной этого текста.
padding (внутренний отступ) — добавляет пустое пространство вокруг содержимого элемента и может повлиять на размер элемента.
border — добавляет пустое пространство вокруг элемента и может повлиять на размер элемента.
margin (внешний отступ) — устанавливает внешние отступы вокруг элемента и может повлиять на размер элемента.
width и height — могут задавать фиксированный размер элемента.
Если они указаны, то размер элемента будет соответствовать заданным значениям.
box-sizing — это свойство определяет, каким образом размер элемента рассчитывается, учитывая его содержимое, паддинги и границы.
content-box — значение, которое учитывает только содержимое, паддинги и границы добавляются к размеру элемента.
border-box — значение, которое включает содержимое, паддинги и границы внутрь размера элемента.
Некоторые значения свойства display могут влиять на размер элемента, например, значение «inline» может игнорировать заданные значения ширины и высоты.
Ширина и высота может зависеть от содержимого, которое он содержит. Например, если у элемента есть текст, то его ширина будет определяться длиной этого текста.
padding (внутренний отступ) — добавляет пустое пространство вокруг содержимого элемента и может повлиять на размер элемента.
border — добавляет пустое пространство вокруг элемента и может повлиять на размер элемента.
margin (внешний отступ) — устанавливает внешние отступы вокруг элемента и может повлиять на размер элемента.
width и height — могут задавать фиксированный размер элемента.
Если они указаны, то размер элемента будет соответствовать заданным значениям.
box-sizing — это свойство определяет, каким образом размер элемента рассчитывается, учитывая его содержимое, паддинги и границы.
content-box — значение, которое учитывает только содержимое, паддинги и границы добавляются к размеру элемента.
border-box — значение, которое включает содержимое, паддинги и границы внутрь размера элемента.
Некоторые значения свойства display могут влиять на размер элемента, например, значение «inline» может игнорировать заданные значения ширины и высоты.
Псевдоклассы и псевдоэлементы
Псевдоклассы — это ключевые слова, добавленные к селектору, которые определяют его особое состояние.
Примером будет — изменение цвета при наведении у текста :hover и :active который применяется к элементу, когда он активен или выбран пользователем.
Псевдоклассы — обозначаются одним двоеточием (:) после имени селектора.
Список популярных псевдоклассов — :hover, :active, :checked, :first-child, :last-child, :focus, :disabled, :not.
Псевдоэлементы — это ключевые слова, добавленные к селектору, которые позволяют стилизовать определенные части элемента.
Они представляют собой виртуальные элементы, которые не существуют в DOM (объектной модели документа), но могут быть стилизованы с помощью CSS.
Псевдоэлементы — обозначаются двумя двоеточиями (::) после селектора.
Основное значение заключается в возможности добавления дополнительных стилей и контента к элементам без необходимости изменения HTML-кода.
Они позволяют создавать декоративные элементы, такие как стрелки или линии, а также добавлять контент, например, иконки или текст, перед или после содержимого элемента.
Список популярных псевдоэлементов — ::first -letter, ::after, ::before, ::placeholder, ::selection.
Примером будет — изменение цвета при наведении у текста :hover и :active который применяется к элементу, когда он активен или выбран пользователем.
Псевдоклассы — обозначаются одним двоеточием (:) после имени селектора.
Список популярных псевдоклассов — :hover, :active, :checked, :first-child, :last-child, :focus, :disabled, :not.
Псевдоэлементы — это ключевые слова, добавленные к селектору, которые позволяют стилизовать определенные части элемента.
Они представляют собой виртуальные элементы, которые не существуют в DOM (объектной модели документа), но могут быть стилизованы с помощью CSS.
Псевдоэлементы — обозначаются двумя двоеточиями (::) после селектора.
Основное значение заключается в возможности добавления дополнительных стилей и контента к элементам без необходимости изменения HTML-кода.
Они позволяют создавать декоративные элементы, такие как стрелки или линии, а также добавлять контент, например, иконки или текст, перед или после содержимого элемента.
Список популярных псевдоэлементов — ::first -letter, ::after, ::before, ::placeholder, ::selection.
Специфичность селекторов
Специфичность — это способ с помощью, которого
браузеры определяют какие значения CSS свойств будут применены к элементу.
Если к одному и тому же элементу применяются стили с разным весом, в результате браузер отобразит стиль с наибольшим весом. В случае, если к одному элементу применяются несколько стилей с одинаковым весом, в итоге браузер отобразит тот стиль, который идет последним (то есть находится ближе к концу таблицы стилей). Это связано с «каскадным» эффектом CSS.
Ключевое слово «!important» в CSS используется для придания стилю наивысшего приоритета. Это означает, что стиль, помеченный как «!important», будет иметь большую специфичность, чем любой другой селектор, независимо от его веса. Это позволяет переопределить любые стили, даже если они имеют более специфичные селекторы.
Таблица специфичности селекторов:
Если к одному и тому же элементу применяются стили с разным весом, в результате браузер отобразит стиль с наибольшим весом. В случае, если к одному элементу применяются несколько стилей с одинаковым весом, в итоге браузер отобразит тот стиль, который идет последним (то есть находится ближе к концу таблицы стилей). Это связано с «каскадным» эффектом CSS.
Ключевое слово «!important» в CSS используется для придания стилю наивысшего приоритета. Это означает, что стиль, помеченный как «!important», будет иметь большую специфичность, чем любой другой селектор, независимо от его веса. Это позволяет переопределить любые стили, даже если они имеют более специфичные селекторы.
Таблица специфичности селекторов:
Название
Специфичность
inline selector
1000
id
100
Class / Attribute / Pseudo-class
10
Element / Pseudo-element
1