Вопросы и ответы с собеседований по CSS

Селектор - это часть CSS-стиля, идентифицирующая HTML-элемент или группу HTML-элементов, по отношению к которым будет применён этот стиль. Например, в следующем коде h1 является селектором тега <h1>: h1 { color: #fff; font-family: Arial; }

Селекторы атрибутов - это механизм, позволяющий применять стили по отношению к элементам, имеющим определенные HTML-атрибуты. Например, следующий код обрамит жёлтой рамкой все элементы класса .photo, имеющие атрибут title: .photo[title] { border: 1px solid yellow; } Возможна даже более детальная выборка: a[href="http://www.cafesoylentgreen.com"]{ color: green; font-weight: bold; }

Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента. Например, псевдоэлемент ::first-line может быть использован для изменения шрифта первой строки абзаца: /* Первая строка каждого элемента <p>. */ p::first-line { color: blue; text-transform: uppercase; } Стандартные псевдоэлементы: - ::after - ::before - ::cue - ::first-letter - ::first-line - ::selection - ::slotted - ::backdrop Экспериментальная возможность - ::placeholder Экспериментальная возможность - ::marker Экспериментальная возможность - ::spelling-error (en-US) Экспериментальная возможность - ::grammar-error Экспериментальная возможность

Псевдокласс в CSS — это ключевое слово, добавленное к селектору, которое определяет его особое состояние. Например, :hover может быть использован для изменения цвета кнопки при наведении курсора на неё: div:hover { background-color: #F89B4D; } Псевдоклассов много, вот буквально пара из них: :focus, :active, :last-of-type, :disabled, :last-child.

Наследование — это прием, с помощью которого CSS-свойства, относящиеся к одному элементу веб-страницы, распространяются и на его вложенные элементы. Например, абзац p всегда находится внутри тела страницы body. Так, атрибуты, применяемые к элементу body, наследуются p. Допустим, вы создали селектор тега для элемента body, который устанавливает color: red. Производные элементы, являющиеся потомками body, то есть расположенные внутри него, наследуют атрибут. Это означает, что любой текст, заключенный в теги элементов h1, h2, p и т. д., будет отображен тем же красным цветом. Механизм наследования многоуровневый, то есть его эффект не только распространяется на прямых потомков (дочерние элементы), но и переносится на все вложенные элементы.

#id - это селектор, позволяющий применить стиль по отношению к элементу, имеющему определённый #id (идентификатор). id может быть только в единственном экземпляре на странице и не должен повторяться. .class - это селектор, позволяющий применить стиль по отношению к группе элементов, имеющих определённый .class (класс). Элементов с одинаковым class может быть сколько угодно много на одной странице.

CSS устроен так, что одинаковые CSS-свойства с разным значением, применяемым к элементу, не могут быть применены к нему одновременно. Например: h1 { color: red; } .h1 { color: blue; } #h1 { color: yellow; } и <h1 style="color: black">Header</h1> Какое-то из свойств должно "победить". Побеждает (имеет преимущество) свойство самого близкого по отношению к форматируемому элементу стиля. Или, правильнее выразиться, самого специфичного стиля. Вот упрощенная, но наглядная модель специфичности селекторов в условных единицах: - Селектор тегов имеет специфичность, равную 1 условной единице. - Класс — 10 условных единиц. - Идентификатор — 100 условных единиц. - Строчный стиль — 1000 условных единиц В приведённом примере <h1> будет иметь чёрный цвет текста.

В CSS существует два различных типа элементов: блочные и строчные. В блочных элементах создается разрыв строки перед элементом и после него. Примеры блочных элементов: <div>, <h1>, <main>. Строчные элементы не создают разрывов строк ни до, ни после себя. Они отображаются на одной строке с содержимым рядом стоящих элементов. Примеры строчных элементов: <em>, <span>, <b>. Примечания: 1. Свойства width и height применяются только по отношению к блочным элементам. 2. У блочного элемента margin, padding и border отодвигают от него другие элементы. 3. У строчного элемента только горизонтальные margin, padding и border отодвигают другие (только строчные) элементы . display: block позволяет сделать элемент блочным. display: inline позволяет сделать элемент строчным. display: inline-block позволяет оставить элемент строчным, но позволить css-свойствам (width, height, margin) влиять на него, как на блочный.

Физические пиксели — привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость. Плотность экрана (Screen density) — это количество физических пикселей дисплея. Обычно измеряется в пикселях-на-дюйм (PPI: pixels per inch). Apple, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить бо′льшую плотность. CSS-пиксели — абстрактная величина, используемая браузерами для точного отображения контента на страницах вне зависимости от экрана. Средствами JavaScript можно узнать плотность пикселей экрана, на котором отображается страница: window.devicePixelRatio

em - это единица измерения в CSS, базирующаяся на размере шрифта текущего контекста. То-есть, если для <h1> задан font-size: 40px, то можно задать для него margin: 1em и это будет равняться margin: 40px. em "смотрит" на размер шрифта (свой или унаследованный) элемента, по отношению к которому применяется.

rem - это единица измерения в CSS, которая базируется на размере шрифта элемента <html>. То-есть, в следующем случае: html { font-size: 100px; } h1 { font-size: 10px; margin: 0.5rem; } margin у <h1> будет равняться 50px, что является половиной от размера шрифта элемента <html>.

CSS свойство box-sizing определяет формулу вычисления общей ширины и высоты элемента.. box-sizing: content-box (значение по умолчанию) считает шириной и высотой элемента только ширину и высоту его контента. box-sizing: border-box считает шириной и высотой элемента ширину и высоту его контента, его внутренних отступов (padding) и суммарную ширину и высоту границ (border). Например: div { width: 100px; padding: 10px; border: 1px solid black; box-sizing: content-box; } Здесь, например, у <div> получится итоговая ширина в размере 100 + (10 * 2) + (1 * 2) = 122, потому что при box-sizing: content-box ширина устанавливается только для контента внутри элемента, а всё остальное добавляется "сверху" (padding, border). Однако, если установить для примера выше box-sizing: border-box, то итоговая ширина <div> будет равной 100px, потому что border и padding заставят контент в элементе сжаться, чтобы обеспечить соблюдение заданной ширины.

Свойство margin задаёт внешние отступы вокруг элемента. Эти отступы не являются частью ширины/высоты элемента при любом значении box-sizing. Схлопывание Вертикальные отступы схлопываются друг с другом, горизонтальные – нет. То-есть, если два <div> расположить в колонку (один под другим) и задать каждому margin: 20px 0, то расстояние между ними будет равняться 20px, а не 40px. При этом, если бы у верхнего элемента был задан отступ в 40px, а у нижнего - в 30px, то автоматически выбрался бы больший из них - 40px. Горизонтальные отступы при этом не схлопываются, а суммируются. Отрицательные значения Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места. В CSS есть другой способ добиться похожего эффекта – а именно position:relative. Но между ними есть одно принципиальное различие: при сдвиге через margin соседние элементы занимают освободившееся пространство в отличие от position: relative, при котором элемент визуально сдвигается, но место, где он был, остаётся «занятым».

Свойство padding устанавливает внутренние отступы/поля со всех сторон элемента. Область отступов - это пространство между содержимым элемента и его границей. Отрицательные значения не допускаются.

transition позволяет определять переходное состояние между двумя состояниями элемента. Различные состояния могут быть определены с помощью псевдоклассов, таких как :hover или :active или установлены динамически с помощью JavaScript. Свойство transition - это сокращённое свойство для transition-property, transition-duration, transition-timing-function, и transition-delay. Например, в следующем примере кода благодаря свойству transition прозрачность кнопки при наведении на неё будет изменяться плавно. button { transition: opacity 0.2s ease-in-out; } button:hover { opacity: 0.8; } Антипаттерном является запись вида transition: all, заставляющая браузер прибегать к излишним вычислениям. В особых случаях это может давать заметный негативный эффект в производительности.

Свойство transform применяется для поворота, масштабирования, наклона или сдвига элемента. При этом, в потоке элемент остаётся на прежней позиции. То-есть, увеличение картинки с помощью transform: scale(2) не раздвинет соседние элементы картинки, а заставит её частично их перекрывать. Это является минусом transform. Плюсом же можно назвать высокую производительность этого решения. Например, благодаря наличию transform считается антипаттерном анимирование width и height. Некоторые функции transform: - matrix(); - perspective(); - rotate(); - translate(); - scale(); - skew(). В transform можно передавать сразу несколько функций: transform: translateX(10px) rotate(10deg) translateY(5px);

CSS-свойство float указывает, что текущий элемент должен быть изъят из обычного flow (потока) и прижат к левой или правой стороне родительского элемента. Текст и inline-элементы будут обтекать такой элемент. До поддержки браузерами флексбоксов и CSS Grid в основном использовался float-подход для вёрстки макетов. Ещё прежде, до прихода float, все верстали на таблицах.

Свойство position позволяет сдвигать элемент со своего обычного места и изменять его положение в потоке. 1. position: static - это значение любого элемента по умолчанию. При нём элемент находится в потоке, раздвигая элементы вокруг себя. 2. position: relative - это значение позволяет элементу позиционироваться относительно его обычного положения с помощью свойств top, right, bottom, left. 3. position: absolute - это значение позволяет элементу позиционироваться по координатам внутри его ближайшего родителя, имеющего position, отличный от static (или относительно всего документа). Абсолютно позиционированный элемент считается блочным и выносится из потока. Ширина элемента устанавливается по содержимому. 4. position: fixed - это подвид абсолютного позиционирования. Работает аналогично position: absolute с тем отличием, что позиционирование происходит всегда относительно window, а не от какого-либо родительского элемента.

Сброс CSS и нормализация CSS — это два разных подхода к обнулению стилей веб-страницы. Сброс CSS — это процесс обнуления стилей, чтобы убрать браузерные стили по умолчанию, которые могут отличаться от одного браузера к другому. Цель сброса CSS — создать «чистую» страницу, на которой все элементы имеют одинаковый вид в разных браузерах. Пример кода: /* сброс CSS */ * { margin: 0; padding: 0; box-sizing: border-box; } Нормализация CSS — это процесс создания единообразных стилей для разных элементов, чтобы веб-страница выглядела одинаково во всех браузерах. В отличие от сброса CSS, нормализация CSS сохраняет некоторые стили по умолчанию браузера, но при этом пытается сделать их единообразными. Пример: /* нормализация CSS */ html { font-size: 62.5%; } body { font-size: 1.6rem; line-height: 1.5; font-family: Arial, sans-serif; } Оба подхода могут использоваться в зависимости от нужд проекта. Если вы хотите создать полностью уникальный дизайн, то возможно вам нужен сброс CSS. Если же вы хотите сохранить некоторые стили браузера, но при этом сделать веб-страницу более единообразной, то нормализация CSS может быть более подходящим вариантом.