Язык CSS: основы

@davidobryakov

Что такое CSS?

CSS — язык для описания стилей документа, он как и HTML является декларативным. Для CSS существуют расширения: препроцессоры (SASS, LESS, Stylus) и постпроцессоры (PostCSS), но у современного CSS есть всё необходимое для того, чтобы можно было не использовать препроцессоры.

Декларативность

Так же, как и в HTML — мы формально описываем желаемый результат. Например, если мы хотим получить непрерывную красного цвета рамку вокруг элемента шириной 2 пикселя мы прямо так и напишем:

Языковые конструкции

Основной языковой конструкцией в CSS являются именно стили, которые мы задаём тем или иным элементам. А для привязки к этим элементам используются селекторы. В примере выше — наш селектор будет искать любой элемент с классом "border". Существует несколько разных видов селекторов.

Селекторы

Базовые селекторы:

• Селектор по тегу (пишется так: div)
• Селектор по классу (пишется так: .border)
• Селектор по id (пишется так: #id)

​

Так же существуют специфичные селекторы, которые могут заглядывать в атрибуты, например селектор input[type="email"] будет искать на странице все поля ввода с типом email.

Селекторы

Более сложные селекторы:

• * (выбирает ВООБЩЕ ВСЕ ЭЛЕМЕНТЫ на странице)
• > (выбирает дочерний элемент по отношению к родительскому)
• ~ (выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем)
• + (выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель)
• : (селектор по псевдоклассу, например: ::after, :hover)

Например...

Например...

Например...

Например...

Например...

Например...

Например...

Например...

Например...

Что почитать?

1. Селекторы MDN (https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Selectors)
2. Руководство по CSS MDN (https://developer.mozilla.org/ru/docs/Web/CSS/Reference)
3. Лекция в текстовом формате (https://blog.kantegory.me/frontend-css-basics)