1. Что такое «CSS»?

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

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

2. Как в CSS обозначаются комментарии?

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

3. Что такое «селектор»?

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

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

4. Перечислите основные виды селекторов.

  • селектор * - выбор всех элементов;

  • селектор элемента - выбор всех элементов в HTML документе, имеющих указанный тег (например: div);

  • селектор класса - выбор всех элементов в HTML документе, имеющих указанный класс (например: .center);

  • селектор идентификатора - выбор элемента в HTML документе, имеющего указанный идентификатор (например: #footer);

  • селекторы псевдоклассов - выбор всех элементов в HTML документе, имеющих указанный псевдокласс (например: p:first-of-type);

  • селекторы атрибутов - выбор элементов в зависимости от указанного атрибута элемента или его значения (например: [href*="youtube"]).

5. Что такое псевдокласс?

Псевдокласс определяет динамическое состояние элементов, которое изменяется из-за действий пользователя, или же соответствует текущему положению в дереве документа. В отличие от настоящего класса, в явном виде псеводкласс в 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;
}

6. Какие существуют селекторы аттрибутов?

  • [атрибут] - все элементы, имеющие указанный атрибут;

  • [атрибут=значение] - все элементы, имеющие атрибут, значение которого равно "значение";

  • [атрибут^=занчение] - все элементы, имеющие атрибут, значение которого начинается с значение;

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

  • [атрибут$=значение] - все элементы, имеющие атрибут, значение которого заканчивается на значение;

  • [атрибут=значение]* - все элементы, имеющие атрибут, значение которого содержит подстроку значение;

  • [атрибут~=значение] - все элементы, имеющие атрибут, значение которого содержит значение как одно из значений через пробел.

7. В чем разница между #my и .my?

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

8. В чем разница между margin и padding?

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

9. В чем заключается разница между значениями 0 и auto в свойстве margin?

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

10. Какое свойство задает цвет фона?

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

11. Как убрать подчеркивание для всех ссылок на странице?

a {
    text-decoration: none;
}

12. Для чего используется свойство clear?

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

13. Как сделать жирным текст во всех элементах <p>?

p {
    font-weight: bold;
}

14. Как задать красный цвет для всех элементов, имеющих класс red?

.red {
    color: red;
}

15. Источники