Вопросы для собеседования

• Что такое «CSS»?
• Как в CSS обозначаются комментарии?
• Что такое «селектор»?
• Перечислите основные виды селекторов.
• Что такое псевдокласс?
• Какие существуют селекторы аттрибутов?
• В чем разница между #my и .my?
• В чем разница между margin и padding?
• В чем заключается разница между значениями 0 и auto в свойстве margin?
• Какое свойство задает цвет фона?
• Как убрать подчеркивание для всех ссылок на странице?
• Для чего используется свойство clear?
• Как сделать жирным текст во всех элементах <p>?
• Как задать красный цвет для всех элементов, имеющих класс red?

CSS, Cascading Style Sheets (каскадные таблицы стилей) - формальный язык описания внешнего вида документа, написанного с использованием языка разметки, который применяется к элементам web-страницы для управления их видом и положением.

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

к оглавлению

Чтобы пометить, что текст является комментарием, применяют конструкцию /* ... */

к оглавлению

Селектор – это правило, на основании которого осуществляется выбор элементов в HTML документе для того, чтобы применить к ним определённые стили.

p {
text-align: center;
font-size: 20px;
}
/* p – это селектор, text-align и font-size – это свойства, а center и 20px – значения. */

к оглавлению

• селектор * - выбор всех элементов;
• селектор элемента - выбор всех элементов в HTML документе, имеющих указанный тег (например: div);
• селектор класса - выбор всех элементов в HTML документе, имеющих указанный класс (например: .center);
• селектор идентификатора - выбор элемента в HTML документе, имеющего указанный идентификатор (например: #footer);
• селекторы псевдоклассов - выбор всех элементов в HTML документе, имеющих указанный псевдокласс (например: p:first-of-type);
• селекторы атрибутов - выбор элементов в зависимости от указанного атрибута элемента или его значения (например: [href*="youtube"]).

к оглавлению

Псевдокласс определяет динамическое состояние элементов, которое изменяется из-за действий пользователя, или же соответствует текущему положению в дереве документа. В отличие от настоящего класса, в явном виде псеводкласс в HTML не указывается, а в CSS указывается через : непосредственно после селектора.

Наиболее известные псевдоклассы:

• :link применяется к непосещенным ссылкам;
• :visited применяется к посещенным ссылкам;
• :hover применяется, когда курсор мыши находится в пределах элемента, но не активирует его;
• :active применяется при активации элемента;
• :focus применяется к элементу при получении им фокуса;
• :first-child применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа.

a.snowman:link {
    color: blue;
}
a.snowman:visited {
    color: purple;
}
a.snowman:active {
    color: red;
}
a.snowman:hover {
    text-decoration: none;
    color: blue;
    background-color: yellow;
}

к оглавлению

• [атрибут] - все элементы, имеющие указанный атрибут;
• [атрибут=значение] - все элементы, имеющие атрибут, значение которого равно "значение";
• [атрибут^=занчение] - все элементы, имеющие атрибут, значение которого начинается с значение;
• [атрибут|=значение] - все элементы, имеющие атрибут, значение которого равно значение или начинается с значение следующим образом значение-* (значение с обязательным дефисом, после которого идёт остальное содержимое значения);
• [атрибут$=значение] - все элементы, имеющие атрибут, значение которого заканчивается на значение;
• [атрибут*=значение] - все элементы, имеющие атрибут, значение которого содержит подстроку значение;
• [атрибут~=значение] - все элементы, имеющие атрибут, значение которого содержит значение как одно из значений через пробел.

к оглавлению

#my — селектор идентификатора, а .my — селектор класса.

к оглавлению

margin — внешний отступ, а padding — внутренний отступ.

к оглавлению

В вертикальных полях — auto всегда означает 0. В горизонтальных полях — auto означает 0 только тогда, когда свойство width также auto.

к оглавлению

Цвет фона задает свойство background-color.

к оглавлению

a {
    text-decoration: none;
}

к оглавлению

clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.

к оглавлению

p {
    font-weight: bold;
}

к оглавлению

.red {
    color: red;
}

к оглавлению

• myway-blog.ru
• htmlbook.ru
• itchief.ru

Вопросы для собеседования