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

Введение

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

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

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

.border {
  border-style: solid;
  border-width: 2px;
  border-color: red;
}

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

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

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

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

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

Пример работы с селекторами

a:hover {/* ссылка в состоянии hover */}

ul + li {/* 
  выберет любой <li> элемент,
  который находится непосредственно
  после элемента <ul>
*/}

* {/* выберет любой элемент */}

#navbar {/* выберет элемент с id="navbar" */}

.navbar {/* выберет элемент с class="navbar" */}

ul > li {/*
  выберет только дочерние элементы <li>,
  которые находятся внутри, на первом уровне
  вложенности по отношению к элементу <ul>
*/}

p ~ span {/*
  выберет все элементы <span>, которые
  находятся после элемента <p> внутри одного родителя
*/}

p span {/*
  выберет все элементы <span>,
  которые лежат внутри элемента <p>
*/}

p, span {/*
  выберет все элементы <p> и <span>
*/}

a.link:not(.link-visited) {/*
  выберет все элементы <a> с классом "link",
  у которых отсутствует класс "link-visited"
*/}

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

• Селекторы MDN (https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Selectors)
• Руководство по CSS MDN (https://developer.mozilla.org/ru/docs/Web/CSS/Reference)

Ссылка на презентацию: https://docs.google.com/presentation/d/12XGe0u1SJu7PkGuYCl_V_sIpYhhs3iZ2OYAdd07Or3o/edit?usp=sharing