CSS

Что такое CSS

CSS это аббревиатура от Cascading Style Sheets и переводится с английского как каскадные листы или таблицы стилей. Что это за листы и почему они каскадные, узнаем уже очень скоро, а пока стоит упомянуть истоки возникновения.

Принцип заложенный в CSS зародился уже как пол века назад, но в своем современном виде эта технология сформировалась в 1994-95 годах, на заре появления организации W3C, которая занимается стандартизацией многих технологий используемые при создании сайтов.

Теперь давайте разберем и расшифруем термин CSS по кусочкам. Почему стили? CSS это язык стилизации веб страниц и используется для оформления визуальной составляющей сайтов. Когда вы открываете в браузере любой современный веб сайт, то, что вы видите оформлено с помощью CSS, другими словами, эта технология позволяет создать стиль сайта: цвета, шрифты, расположение блоков информации, различные визуальные эффекты и т.д.

Почему листы или таблицы стилей? Дело в том, что CSS это не язык программирования в нем не описывается логика, а его код выглядит как некий список определенных конструкций и напоминает статичные табличные данные.

Почему каскадные листы стилей? Каскадные потому, что стиль одного и того же элемента может формироваться из различных источников, по определенному приоритету.

Возможности CSS

CSS наряду с HTML и JavaScript, это одна из базовых составляющих любого веб сайта. По большому счету, чтобы создать сайт вам нужен только HTML и CSS. Поэтому, любой веб разработчик начинает свою карьеру с изучением этих технологий.

На данный момент уровень развития CSS и широкая поддержка браузерами, открывает почти безграничные возможности для стилизации сайтов и веб приложений.

Как я упоминал выше CSS это не язык программирования, но все же в нем можно построить определенного типа простые логические конструкции. Например, можно применять разные стили в зависимости от разрешения экрана пользователя. На этом, кстати, и основывается принцип адаптивного дизайна или адаптивной верстки. Также можно подсчитать, например, высоту блока используя простые операции, но сложные математические расчеты CSS не позволит провести.

Синтаксис CSS

Листы или таблицы стилей состоят из набора записей или правил, которые могут быть не связанны и не взаимодействуют между собой напрямую, но их действие может перекрываться на целевом элементе.

Каждая запись или правило всегда имеет фиксированную структуру, а именно состоит из следующих элементов:

selector { property: value; }

selector определяет правило, по которому данная запись привязывается к конечному HTML элементу. За ним, заключенные в фигурные скобки один или несколько, разделенные между собой точкой с запятой, наборов property и value. property это название свойства элемента выбранного с помощью селектора, а value – его значение.

Например, в следующей записи задается гарнитура шрифта для всей веб страницы:

body {
    font-family: Arial, sans-serif;
}

Один и тот же элемент на странице можно выбрать несколькими селекторами и задать разные наборы свойств и значений, и все правила будут применятся к данному элементу. Если некоторые свойства будут перекрывать друг друга, то применится значение свойства с более приоритетным селектором. В этом суть каскадирования. Иногда после value используется «!important» это повысит приоритет данного свойства.

Технология CSS разрабатывается не один десяток лет и на сегодняшний день все еще не достигла конца своего развивается. Добавляются новые возможности и свойства. На текущий момент активно используется CSS3 и уже совсем скоро появится стандарт CSS4, который предоставит веб разработчикам новые инструменты для создания сайтов.