---
title: CSS Syntax and Selectors
localeTitle: Синтаксис и селектор CSS
---
## Синтаксис и селектор CSS
Когда мы говорим о синтаксисе CSS, мы говорим о том, как все складывается. Существуют правила о том, что происходит там, где вы можете писать CSS последовательно, и программа (например, браузер) может интерпретировать ее и правильно применять на странице.
Существует два основных способа написания CSS.
### Встроенный CSS
Специфические особенности CSS: [CSS-трюки](https://css-tricks.com/specifics-on-css-specificity/)
Inline CSS применяет стилирование к одному элементу и его дочерним элементам, пока не встретится другой стиль, переопределяющий первый.
Чтобы применить встроенный CSS, добавьте атрибут «style» к HTML-элементу, который вы хотите изменить. Внутри кавычек включается список пар ключ / значение с разделителями с запятой (каждый по очереди разделяется двоеточием), указывающий стили для установки.
Вот пример встроенного CSS. Слова «Один» и «Два» будут иметь цвет фона желтого и красного цветов. Слово «три» имеет новый стиль, который переопределяет первый и будет иметь цвет фона зеленого и цветного голубого цвета. В примере мы применяем стили к тегам `
` , но вы можете применить стиль к любому элементу HTML.
```html
```
### Внутренний CSS
При написании встроенного стиля это быстрый способ изменить один элемент, есть более эффективный способ одновременного применения одного и того же стиля ко многим элементам страницы.
Внутренний CSS имеет свои стили, указанные в `
```
Селекторы, показанные выше, чрезвычайно просты, но они могут стать довольно сложными. Например, можно применять стили только к вложенным элементам; то есть элемент, который является дочерним элементом другого элемента.
Вот пример, где мы указываем стиль, который должен применяться только к элементам `div` которые являются прямым дочерним элементом других элементов `div` . В результате «Два» и «Три» появятся в виде красного текста на желтом фоне, но «Один» и «Четыре» останутся незатронутыми (и, скорее всего, черный текст на белом фоне).
```html
Four
```
### Внешний CSS
У всех стилей есть свой собственный документ, который связан в `` . Расширением связанного файла является `.css`
#### Дополнительная информация:
* [Синтаксис CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax) @ MDN
* [Селекторы CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) @ MDN
* [Ссылка на селектор CSS](https://www.w3schools.com/cssref/css_selectors.asp)
* [Спецификация селекторов CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)