Xiper

Что такое 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