Решать задачиОтветы на вопросы про 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> будет иметь чёрный цвет текста.
Авторизуйтесь, чтобы просматривать следующий контентЧто такое блочные и строчные элементы?
Авторизуйтесь, чтобы получить доступРасскажите про единицу измерения px
Авторизуйтесь, чтобы получить доступРасскажите про единицу измерения em
Авторизуйтесь, чтобы получить доступРасскажите про единицу измерения rem
Авторизуйтесь, чтобы получить доступДля чего нужно свойство box-sizing?
Авторизуйтесь, чтобы получить доступДля чего нужно свойство margin?
Авторизуйтесь, чтобы получить доступДля чего нужно свойство padding?
Авторизуйтесь, чтобы получить доступДля чего нужно свойство transition?
Авторизуйтесь, чтобы получить доступДля чего нужно свойство transform?
Авторизуйтесь, чтобы получить доступДля чего нужно свойство float?
Авторизуйтесь, чтобы получить доступДля чего нужно свойство position?
Авторизуйтесь, чтобы получить доступЧто такое сброс и нормализация стилей?
Авторизуйтесь, чтобы получить доступТакже в этой категории
Вам может быть интересно
Топ тредов
: Задача в JavaScript "Числовая спираль"
: Задача в Python под названием "Кратчайший путь в матрице"
: Добавить чекбокс, который отвечает за показ ранее тронутых задач (черновик)
