Аббревиатура CSS расшифровывается как Cascading Style Sheets — каскадные таблицы стилей. Если верить (а в таких вопросах именно им верить и надо), CSS это механизм добавления стиля в веб-документ. Под стилями понимаются правила, определяющие внешний вид, оформление документа — управление шрифтами, цветами на странице, расположением элементов.

Давай разберемся, что же это за таблицы такие, для чего они нужны и почему они вдруг «каскадные»?

Для чего нужно отделять содержимое от оформления

Классический принцип «разделяй и властвуй» известен еще со времен Древнего Рима. Он неоднократно позволял достигать успеха в военно-политических играх деятелям различных эпох. Поможет он и нам.

Изначально HTML использовался для структурирования текста (вот заголовок, вот абзац, а это — список). Отображение конкретных элементов определялось их атрибутами и во многом оставалось на совести браузера. Так как управлять внешним видом все-таки хотелось, стали появляться теги оформления, такие, например, как или . В результате содержимое документа и его оформление тесно переплелись между собой. Код стал громоздким, негибким, трудночитаемым. Например, таким:

Lorem ipsum

Очевидные минусы:

• много лишних конструкций, не относящихся непосредственно к разметке содержимого — большой размер файла, повышается траффик и время загрузки;
• затруднено изменение дизайна. Например, если нужно поменять цвет, придется искать все атрибуты ;
• существенные ограничения возможностей форматирования. Многие теги просто невозможно настроить должным образом с помощью одних только атрибутов;
• отсутствует возможность подстраивать оформление под различные типы отображающих устройств (монитор ПК, принтер, экран КПК, голосовой браузер и т.д.);
• код теряет свою логическую разметку (семантику), и как следствие:
  • плохо индексируется поисковыми роботами, ведь им приходится обрабатывать кучу «мусора»;
  • значительно ухудшается доступность для пользователей использующих невизуальные браузеры.

Выделение всех правил для оформления в отдельный блок (файл), позволяет решить эти проблемы. Код стает проще, работать с ним значительно легче. Сам HTML становится тем, чем он задумывался — языком смысловой разметки документа:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Плюсы использования CSS:

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

Каскадные таблицы стилей

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

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

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

Пример фрагмента CSS:

Правил может быть множество, каждое состоит из двух частей (можно представить, что колонок) — к чему применяем стили (селектор) и какие собственно стили применяем (блок определений). Поэтому всю конструкцию назвали «таблица». Итак «таблица стилей». Но почему вдруг «каскадная»?

Каскадное наследование

Дело в том, что CSS использует наследование от родителя к потомку, что позволяет определять стили, опираясь на уже описанные ранее для родителей. При этом возникает ситуация, когда для элемента подходят свойства из нескольких правил одновременно. Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, что делает результаты предсказуемыми. Такая модель называется «каскадом».

Итог

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

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

Определение

CSS является аббревиатурой от английского что в переводе на русский значит "каскадные таблицы стилей". Как таковым отдельным языком программирования CSS нельзя считать, так как он не имеет значения без документов, построенных на HTML или XHTML.

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

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

Сущность

CSS-стили устроены по предельно простому принципу. Здесь нет сложных правил и заумных терминов. Достаточно выбрать нужный элемент и назначить к нему необходимое свойство. То есть можно взять тег

И изменить шрифт и цвет символов, которые находятся внутри него. При этом каждому такому элементу документа будет присвоено данное свойство. Нет необходимости присваивать значение всем тегам отдельно. Можно использовать более широкомасштабные цели, например, сразу назначить свойство ко всему документу, определив свойство к элементу "body". Или стилизовать отдельный фрагмент через специальные id-идентификаторы или селекторы.

Применение

Использовать каскадные стили можно тремя способами:

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