Cascading Style Sheets или же css при переводе на русский язык означает «каскадные таблицы стилей». Согласно официальной документации W3C css представляет из себя механизм для добавления оформления в html документ.

О том почему эти таблицы стилей названы «каскадными», почему все оформление страниц сайта  следует делать используя именно css, а не те же атрибуты html, какие выгоды принесло веб-разработчикам внедрение каскадных таблиц стилей в обиход и пойдет речь в этой статье.

Что такое каскадные таблицы стилей?

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

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

В слове «каскадная» заключается главная особенность данного языка веб-разработки, позволившая ему стать настолько популярным среди веб-мастеров. Она заключается в том, что в css используется наследование правил оформления элементов (стилей) от старшего элемента (родителя) к младшему (потомку, элементу содержащемуся внутри родителя, вложенному тегу, если будет понятнее).

Подробнее о "родственных" связях html тегов можно почитать в статье: "Что такое дерево документа в HTML?"

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

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

Наследование стиля вместе с четкой расстановкой приоритетов наследования и образует собой в конечном итоге «каскад».

Пример использования css

#footer h3 {
   font-family: "Cuprum",Arial,sans-serif,Verdana;
   font-size: 21px;
   text-transform: uppercase;
   width: 300px;
   padding-bottom: 10px;
   background: url(/repeating-slash-bg.png) repeat-x bottom;
   color: #000;
   cursor: pointer;
}

Данный фрагмент кода взят из оформления заголовка на одном из сайтов. Он представляет собой одно обычное правило, которое в свою очередь состоит из:

• Селектора — часть кода сообщающая браузеру к какому именно элементу или же совокупности элементов применяется данное правило. В нашем примере селектор это «#footer h3». Подробнее правила построения селекторов и принципы наследования оформления будут рассмотрены в дальнейших уроках.
• Блока определений — набор стилей оформления для конкретного селектора. Он содержится между фигурных скобок после селектора. Стили написанные не блоком, а в одну строку являются признаком дурного тона в оформлении css кода.

Правила оформления кода могут располагаться как в пределах html страницы (вложенные и встроенные таблицы стилей) для которой они используются, так и прикрепляться к ней отдельным файлом (внутри css файла и в html файл). По этому признаку их разделяют на внутренние и внешние соответственно.

Зачем понадобилось разделять содержимое и оформление html страниц?

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

Пример кода с оформлением на чистом html:

<h1 align="center">Главный заголовок страницы</h1>
<font face"Cuprum",Arial,Verdana "  size="3" color="#060606">
	Текст страницы
</font>
<hr size="1px" width="980px"  color="#c8c8c8" align="left"/>

Теперь пройдемся подробнее по основным причинам перехода от чистого html к html + css:

• Слишком громоздкий код страницы значительно увеличивал размер файла, что ухудшало время загрузки страницы и увеличивало нагрузку на сервер.
• Смешивание «логической» и «визуальной» части оформления приводило к ухудшению индексации страниц поисковыми роботами.
• Адаптация внешнего вида сайта под различные типы браузеров и устройств становилась невозможна.
• Код становился «грязным» не читабельным, что усложняло его поддердку веб-разработчиками.
• Ограниченность функционала оформления тегами приводила к однообразному и пресному внешнему виду сайтов. При помощи одних только атрибутов невозможно настроить полноценное оформление сайта.
• Внесение изменений в дизайн становилось крайне трудоемкой задачей, поскольку оформление приходилось менять каждому конкретному элементу, без возможности задания его целой группе элементов в один прием.

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

Что изменилось с внедрением css?

• Разделение структуры документа на логическую разметку и оформление сделало код значительно «чище», тоесть читабельней, понятней для восприятия.
• Появилась возможность адаптации сайтов для различных устройств за счет подключения для них различных правил оформления.
• Один файл css может оформлять все страницы сайта, что позволяет значительно снизить трудоемкость веб-разработки, размер сайта в целом.
• Простота применения каскадных таблиц стилей значительно сократила время на веб-разработку.
• За счет кеширования файла с оформлением сайта на порядок ускорилось время загрузки страниц сайтов и снизилась нагрузка на сервера в целом.

Подводя итоги

CSS это революционная для своего времени технология перевернувшая мир веб-разработки с ног на голову много лет назад. На сегодняшний день это официальный стандарт повсеместно использующийся в веб-разработке для оформления логической части сайтов. Он достаточно прост в освоении и крайне гибок в использовании.