java-interview/css.md

[Вопросы для собеседования](README.md)

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

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

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

[к оглавлению](#Основы-css)

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

[к оглавлению](#Основы-css)

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

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

[к оглавлению](#Основы-css)

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

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

[к оглавлению](#Основы-css)

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

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

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

```css
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;
}
```

[к оглавлению](#Основы-css)

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

[к оглавлению](#Основы-css)

## В чем разница между `#my` и `.my`?
`#my` — селектор идентификатора, а `.my` — селектор класса.

[к оглавлению](#Основы-css)

## В чем разница между `margin` и `padding`?
`margin` — внешний отступ, а `padding` — внутренний отступ.

[к оглавлению](#Основы-css)

## В чем заключается разница между значениями `0` и `auto` в свойстве `margin`?
В вертикальных полях — `auto` всегда означает `0`. В горизонтальных полях — `auto` означает `0` только тогда, когда свойство `width` также `auto`.

[к оглавлению](#Основы-css)

## Какое свойство задает цвет фона?
Цвет фона задает свойство `background-color`.

[к оглавлению](#Основы-css)

## Как убрать подчеркивание для всех ссылок на странице?
```css
a {
    text-decoration: none;
}
```

[к оглавлению](#Основы-css)

## Для чего используется свойство `clear`?
`clear` устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.

[к оглавлению](#Основы-css)

## Как сделать жирным текст во всех элементах `<p>`?
```css
p {
    font-weight: bold;
}
```

[к оглавлению](#Основы-css)

## Как задать красный цвет для всех элементов, имеющих класс `red`?
```css
.red {
    color: red;
}
```

[к оглавлению](#Основы-css)

# Источники
+ [myway-blog.ru](http://myway-blog.ru/interview-frontend-web-programmer/)
+ [htmlbook.ru](http://stepbystep.htmlbook.ru/?id=43)
+ [itchief.ru](https://itchief.ru/lessons/html-and-css/css-selectors)

[Вопросы для собеседования](README.md)