Skip to content

Latest commit

 

History

History
154 lines (117 loc) · 10.1 KB

css.md

File metadata and controls

154 lines (117 loc) · 10.1 KB

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

Основы CSS

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

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

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

к оглавлению

Как в 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?

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

к оглавлению

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

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

к оглавлению

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

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

к оглавлению

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

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

к оглавлению

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

a {
    text-decoration: none;
}

к оглавлению

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

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

к оглавлению

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

p {
    font-weight: bold;
}

к оглавлению

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

.red {
    color: red;
}

к оглавлению

Источники

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