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

Для рассказа об истории CSS нужно погрузится в начало 90х годов, когда язык HTML только что был создан. Поначалу в нём вообще не было стилей. Всё украшение, которое можно было сделать - это расположить текст по центру, справа или слева, т.е. отформатировать его и добавить список, известный сегодня как теги li и ul. Потом возможности украшения в HTML расширились, но создателей языка это не устраивало. Они задумывали гипертекст именно как язык разметки, он не предполагал работы с цветами. Поэтому, начиная с 3 версии CSS был вынесен из HTML в отдельную сущность.

Если вы уже начали изучать CSS или планируете это сделать, то рекомендую сразу ознакомиться с примерным списком вопросов для собеседования, например тут. Это поможет вам изучать сразу то, что нужно для реальных проектов.

Работа с CSS

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

Существуют различные типы селекторов, которые облегчают работу с применением стилей для элементов html. Например, некоторые из них позволяют изменять значение свойств лишь у определенных объектов, выделенных в отдельный класс. Другие селекторы позволяют обращаться к элементу по идентификатору. Также есть универсальный селектор, меняющий значения свойств для всех элементов html кода.

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

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

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