155 lines
10 KiB
Markdown
155 lines
10 KiB
Markdown
[Вопросы для собеседования](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)
|