1
1
Fork 0
java-interview/css.md

155 lines
10 KiB
Markdown
Raw Normal View History

2017-10-21 06:14:08 +03:00
[Вопросы для собеседования](README.md)
2017-05-07 07:05:47 +03:00
2017-10-20 20:40:27 +03:00
# Основы CSS
2017-05-07 07:05:47 +03:00
+ [Что такое _«CSS»_?](#Что-такое-css)
+ [Как в CSS обозначаются комментарии?](#Как-в-css-обозначаются-комментарии)
+ [Что такое _«селектор»_?](#Что-такое-селектор)
+ [Перечислите основные виды селекторов.](#Перечислите-основные-виды-селекторов)
+ [Что такое псевдокласс?](#Что-такое-псевдокласс)
+ [Какие существуют селекторы аттрибутов?](#Какие-существуют-селекторы-аттрибутов)
+ [В чем разница между `#my` и `.my`?](#В-чем-разница-между-my-и-my)
+ [В чем разница между `margin` и `padding`?](#В-чем-разница-между-margin-и-padding)
+ [В чем заключается разница между значениями `0` и `auto` в свойстве `margin`?](#В-чем-заключается-разница-между-значениями-0-и-auto-в-свойстве-margin)
+ [Какое свойство задает цвет фона?](#Какое-свойство-задает-цвет-фона)
+ [Как убрать подчеркивание для всех ссылок на странице?](#Как-убрать-подчеркивание-для-всех-ссылок-на-странице)
+ [Для чего используется свойство `clear`?](#Для-чего-используется-свойство-clear)
+ [Как сделать жирным текст во всех элементах `<p>`?](#Как-сделать-жирным-текст-во-всех-элементах-p)
+ [Как задать красный цвет для всех элементов, имеющих класс `red`?](#Как-задать-красный-цвет-для-всех-элементов-имеющих-класс-red)
2017-10-20 20:40:27 +03:00
## Что такое _«CSS»_?
2017-05-07 07:05:47 +03:00
__CSS, Cascading Style Sheets (каскадные таблицы стилей)__ - формальный язык описания внешнего вида документа, написанного с использованием языка разметки, который применяется к элементам web-страницы для управления их видом и положением.
Основной целью разработки CSS являлось разделение описания логической структуры web-страницы, которое производится с помощью HTML или других языков разметки от описания внешнего вида этой web-страницы, которое производится с помощью CSS.
[к оглавлению](#Основы-css)
2017-10-20 20:40:27 +03:00
## Как в CSS обозначаются комментарии?
2017-05-07 07:05:47 +03:00
Чтобы пометить, что текст является комментарием, применяют конструкцию `/* ... */`
[к оглавлению](#Основы-css)
2017-10-20 20:40:27 +03:00
## Что такое _«селектор»_?
2017-05-07 07:05:47 +03:00
__Селектор__ это правило, на основании которого осуществляется выбор элементов в HTML документе для того, чтобы применить к ним определённые стили.
```css
p {
text-align: center;
font-size: 20px;
}
/* p это селектор, text-align и font-size это свойства, а center и 20px значения. */
```
[к оглавлению](#Основы-css)
2017-10-20 20:40:27 +03:00
## Перечислите основные виды селекторов.
2017-05-07 07:05:47 +03:00
+ __селектор `*`__ - выбор всех элементов;
+ __селектор элемента__ - выбор всех элементов в HTML документе, имеющих указанный тег (например: `div`);
+ __селектор класса__ - выбор всех элементов в HTML документе, имеющих указанный класс (например: `.center`);
+ __селектор идентификатора__ - выбор элемента в HTML документе, имеющего указанный идентификатор (например: `#footer`);
+ __селекторы псевдоклассов__ - выбор всех элементов в HTML документе, имеющих указанный псевдокласс (например: `p:first-of-type`);
+ __селекторы атрибутов__ - выбор элементов в зависимости от указанного атрибута элемента или его значения (например: `[href*="youtube"]`).
[к оглавлению](#Основы-css)
2017-10-20 20:40:27 +03:00
## Что такое псевдокласс?
2017-05-07 07:05:47 +03:00
Псевдокласс определяет динамическое состояние элементов, которое изменяется из-за действий пользователя, или же соответствует текущему положению в дереве документа. В отличие от настоящего класса, в явном виде псеводкласс в 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)
2017-10-20 20:40:27 +03:00
## Какие существуют селекторы аттрибутов?
2017-05-07 07:05:47 +03:00
+ __`[атрибут]`__ - все элементы, имеющие указанный `атрибут`;
+ __`[атрибут=значение]`__ - все элементы, имеющие `атрибут`, значение которого равно `"значение"`;
+ __`[атрибут^=занчение]`__ - все элементы, имеющие `атрибут`, значение которого начинается с `значение`;
+ __`[атрибут|=значение]`__ - все элементы, имеющие `атрибут`, значение которого равно `значение` или начинается с `значение` следующим образом `значение-*` (`значение` с обязательным дефисом, после которого идёт остальное содержимое значения);
+ __`[атрибут$=значение]`__ - все элементы, имеющие `атрибут`, значение которого заканчивается на `значение`;
+ __`[атрибут*=значение]`__ - все элементы, имеющие `атрибут`, значение которого содержит подстроку `значение`;
+ __`[атрибут~=значение]`__ - все элементы, имеющие `атрибут`, значение которого содержит `значение` как одно из значений через пробел.
[к оглавлению](#Основы-css)
2017-10-20 20:40:27 +03:00
## В чем разница между `#my` и `.my`?
2017-05-07 07:05:47 +03:00
`#my` — селектор идентификатора, а `.my` — селектор класса.
[к оглавлению](#Основы-css)
2017-10-20 20:40:27 +03:00
## В чем разница между `margin` и `padding`?
2017-05-07 07:05:47 +03:00
`margin` — внешний отступ, а `padding` — внутренний отступ.
[к оглавлению](#Основы-css)
2017-10-20 20:40:27 +03:00
## В чем заключается разница между значениями `0` и `auto` в свойстве `margin`?
2017-05-07 07:05:47 +03:00
В вертикальных полях — `auto` всегда означает `0`. В горизонтальных полях — `auto` означает `0` только тогда, когда свойство `width` также `auto`.
[к оглавлению](#Основы-css)
2017-10-20 20:40:27 +03:00
## Какое свойство задает цвет фона?
2017-05-07 07:05:47 +03:00
Цвет фона задает свойство `background-color`.
[к оглавлению](#Основы-css)
2017-10-20 20:40:27 +03:00
## Как убрать подчеркивание для всех ссылок на странице?
2017-05-07 07:05:47 +03:00
```css
a {
text-decoration: none;
}
```
[к оглавлению](#Основы-css)
2017-10-20 20:40:27 +03:00
## Для чего используется свойство `clear`?
2017-05-07 07:05:47 +03:00
`clear` устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.
[к оглавлению](#Основы-css)
2017-10-20 20:40:27 +03:00
## Как сделать жирным текст во всех элементах `<p>`?
2017-05-07 07:05:47 +03:00
```css
p {
font-weight: bold;
}
```
[к оглавлению](#Основы-css)
2017-10-20 20:40:27 +03:00
## Как задать красный цвет для всех элементов, имеющих класс `red`?
2017-05-07 07:05:47 +03:00
```css
.red {
color: red;
}
```
[к оглавлению](#Основы-css)
2017-10-21 06:14:08 +03:00
# Источники
2017-05-07 07:05:47 +03:00
+ [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)
2017-10-21 06:14:08 +03:00
[Вопросы для собеседования](README.md)