Что такое CSS

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

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

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

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

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

<h1 align="center">Lorem ipsum</h1>
<font face="Arial, Helvetica, sans-serif" color="#339900" size="2">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit
</font>
<hr width="935px" size="1px" color="#92aabd" noshade="noshade" align="left"/>

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

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

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

<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>

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

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

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

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

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

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

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

.main{
	min-height:100%;
	width: 960px;
	margin: 0 auto;
	text-align: left;
}

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

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

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

Итог

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

Материалы:

• Jeremy Keith. Behavioral Separation
• w3 :: CSS