Вопросы и ответы с собеседований по CSS
Вопросы и ответы по 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 и class?
#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> будет иметь чёрный цвет текста.