CSS (Cascading Style Sheets – каскадные таблицы стилей) – это свод стилевых описаний, тех или иных HTML тегов (элементов HTML). Он может быть применён как к отдельному тегу – элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта. CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.
История возникновения и развития CSS
CSS — одна из широкого спектра технологий, которые одобрены консорциумом W3C (World Wide Web Consortium), возглавляемым Тимати Джоном Бернерсом-Ли и получили общее название «стандарты Web». Необходимость стандартизирования Web, создания единых правил, по которым работали бы программисты и веб-дизайнеры, возникла еще в 1990-х годах. Тогда был разработан язык HTML 4.01 и XHTML. Позже был разработан и стандарт CSS.
В начале 90-х каждый браузер отображал веб-страницы в своем стиле, и потребности единого стилевого описания не возникало. Но зачастую HTML-документы, написанные с помощью новых тегов, служащих для оформления, попросту не отображались в некоторых браузерах. Тогда и возник стандарт CSS.
Термин Cascading Style Sheets в 1994 году предложил Хокон Виум Ли, нынешний главный инженер компании Opera. С того момента Виум Ли совместно с Бертом Босом, одним из разработчиков браузера Argo, занялись развитием стилевого языка CSS. Одним из отличия CSS стал принцип наследования, благодаря которому разработчик может определить стиль на основании более ранних. То есть, в CSS определенные раньше стили дают возможность определить последующие.
Консорциум Всемирной паутины (World Wide Web Consortium, W3C) обратил внимание на стилевой язык CSS уже через пару лет работы над ним. И в 1996 году технология CSS была ободрена. 17 декабря 1996 года также была издана соответствующая рекомендация CSS1, первые коррективы в которую были внесены 11 января 1996 года.
Уровень 1 (CSS1)
Возможности первой CSS, рекомендованной Консорциумом Всемирной паутины:
- Параметры шрифтов. Предоставлены возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
- Настройка цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
- Текстовые атрибуты. Существует возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы).
- Возможность выравнивания текста, изображений, таблиц и других элементов.
- Возможность настройки свойств блоков, таких как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки.
- Ограниченные средства по позиционированию элементов, такие как float и clear.
Уровень 2 (CSS2)
На основании CSS1 12 мая 1998 года Консорциум принял вторую рекомендацию – CSS2. Была сохранена обратная совместимость.
Добавленные возможности в CSS2:
- Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование: управление размещением элементов на странице без табличной вёрстки.
- Типы носителей. На данном уровне возможно устанавливать разные стили для разных носителей (например отдельно для монитора стационарного компьютера и отдельно – для КПК).
- Звуковые таблицы стилей. Ориентируются по голосу, громкость и т. д. для звуковых носителей (например, для посетителей сайта с плохим или вовсе отсутствующим зрением).
- Страничные носители. Предоставляют возможность установки различных стилей постранично (например, отдельно для четных и отдельно для нечетных страниц).
- Расширенный механизм селекторов.
- Указатели.
- Генерируемое содержимое. Позволяет добавлять содержимое, которого нет в исходном документе, до или после нужного элемента.
В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1
Уровень 2, ревизия 1 (CSS2.1)
Данная рекомендация W3C была принята 7 июня 2011 года.
CSS2.1 основана на CSS2. В ней были исправлены ошибки, а также изменены некоторые части спецификации, некоторые – удалены вовсе. Удаленные части могут в будущем быть добавлены в CSS3.
Уровень 3 (CSS3)
Сильно расширена по сравнению с предыдущими версиями. Нововведения касаются практически всего, начиная с малых, закругленных углов блоков, заканчивая трансформацией, анимацией и введением переменных (variables).
Уровень 4 (CSS4)
Разрабатывается W3C с 29 сентября 2011 года.
Для чего нужен CSS
Основной характеристикой CSS является то, что данный язык стилей определяет, как HTML-документы будут отображаться. Таким образом, именно CSS определяет, какими будут поля, цвет страницы, наличие фоновых изображений, расстояние между строками, шрифты, высоту-ширину, положение различных элементов на странице и многое другое. То есть, CSS непосредственно отвечает за оформление веб-страницы.
Безусловно, для оформления ресурса можно использовать и HTML. Однако гораздо больше возможностей предоставит CSS. И, кроме того, в нем все настройки можно выставить гораздо точнее. На сегодняшний день работа с CSS поддерживается всеми браузерами.
Немаловажное преимущество CSS – это то, что все настройки по оформлению и дизайну сайта можно единожды прописать в одном месте (а не делать отдельно для каждой страницы, как, допустим, пришлось бы в HTML). То есть, в CSS повторяющиеся стилевые описания одних и тех же элементов можно вынести в единый файл. Благодаря этому обеспечивается значительное «облегчение» HTML-документов. И, следовательно, экономится время, трафик, деньги, занимаемый объем и т. д., при этом код становится максимально простым и удобным как для чтения, так и для последующего редактирования.
CSS и HTML
Главное отличие состоит в том, что задача HTML – структурировать содержимое страницы, а задача CSS – форматирование уже структурированного содержимого.
Изначально язык HTML применялся исключительно для вывода структурированного текста. Текст можно было только размечать (заголовками, параграфами и т. д.) с помощью определенных тегов. Постепенно веб-дизайнеры перестали удовлетворяться этим нехитрым способом размещения текстов, и стали изобретать различные HTML-теги, которые отвечали уже не за структуру текста, а за его внешний вид (то есть, за то, какой видят страницу пользователи).
Такая дизайнерская деятельность в результате привела к тому, что и оригинальные теги, предназначенные для структурирования (такие как, например, <table>) стали применяться для дизайна. Однако возникла проблема – новые дизайнерские теги не поддерживались многими браузерами.
Тогда и был создан CSS с целью предоставления дизайнерам возможности оформления веб-страниц в любом браузере. Вместе с тем возникло разделение HTML, отвечающего за структуру страницы, и CSS, отвечающего за ее внешний вид, что заметно упростило процесс создания сайтов.
Преимущества CSS
Конкретные преимущества, которые дает веб-дизайнеру использование стандарта CSS:
- возможность управления отображением множества документов с помощью всего одной таблицы;
- точный и выверенный контроль внешнего вида веб-страниц;
- возможность настройки различного отображения для различных носителей информации (например, для отображения на мониторе и для печати);
- большое количество технических возможностей дизайна.
Внедрение CSS в HTML документ
Связать стилевое описание элемента непосредственно с самим элементом, то есть HTML-документом, можно тремя способами:
Написать стилевое описание непосредственно в самом элементе. Данный способ успешно применим лишь в том случае, когда в стилевом описании нуждается один-единственный элемент в HTML документе.
Написать одно стилевое описание для всех идентичных элементов HTML-документа. Успешно применяется в том случае, когда стиль описываемой страницы принципиально отличается от всего дизайна ресурса.
Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта, в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.
Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css, либо же обрамлена тегами <style> и размещена в «шапке» той веб-страницы, на которую она действует):
p {
font-family: Garamond, serif;
}
h2 {
font-size: 110 %;
color: red;
background: white;
}
.note {
color: red;
background: yellow;
font-weight: bold;
}
p#paragraph1 {
margin: 0;
}
a:hover {
text-decoration: none;
}
#news p {
color: blue;
}
[type="button"] {
background-color: green;
}
Здесь приведены семь правил CSS с селекторами p, h2, .note, p#paragraph1, a:hover, #news p и [type="button"].
- Первое правило присвоено HTML-элементу p (абзацу) — назначен стиль. Абзацы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»).
- Второе правило присвоено HTML-элементу h2 (заголовку второго уровня). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.
- Третье правило будет применено к любому элементу, атрибут class которого равен 'note'. Например, к параграфу: <p class="note">Этот абзац будет выведен полужирным шрифтом красного цвета на желтом фоне.</p>
- Четвёртое правило будет применяться только к элементу p, атрибут id которого равен paragraph1. Такой элемент не будет иметь внешних отступов (margin).
- Пятое правило определяет стиль hover для элементов a — гиперссылок. По умолчанию, в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.
- Шестое правило, применяется для элементов p, которые находятся внутри какого-либо элемента с атрибутом id, равным «news» (#news p — это типичный случай селектора потомков, см. 5-й пункт списка выше).
- Седьмое правило применяется для всех элементов, у которых атрибут type равен button. Например, это правило будет применено к элементу <input type="button"> (обычная кнопка), изменив его цвет фона на зеленый.
Поддержка CSS браузерами
Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на движках Gecko (такие как Mozilla Firefox), WebKit (такие как, например, Яндекс, Chrome, Safari, Arora) и Presto (браузер Opera).
Internet Explorer (шестая версия) поддерживает CSS далеко не полностью. Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS, но всё ещё содержит значительное количество ошибок.
В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3.
Для проверки поддержки браузером веб-стандартов (в том числе и различных частей стандарта CSS) был разработан тест Acid. Его вторая версия называется Acid2, а третья, соответственно, Acid3.
Расширения CSS
Часто при вёрстке страниц нужно использовать одно и то же значение много раз: один и тот же цвет, один и тот же шрифт. И если это значение нужно будет изменить, то придётся менять во многих местах. В стандартном CSS нет возможностей наследования стилей, вычисляемых значений и прочих зависимостей.
Для решения этих вопросов и ускорения разработки существует несколько расширений языка CSS. Расширений в том смысле, что код CSS является валидным кодом для расширения, но не наоборот. Чтобы из кода "расширенного CSS" получился обычный CSS-файл, воспринимаемый браузером, необходимо выполнить компиляцию. Компиляция может быть нескольких типов:
- во время запуска страницы на стороне клиента (средствами JavaScript);
- во время запуска страницы на стороне сервера;
- во время вёрстки сайта средствами специального компилятора.
Примеры расширений CSS:
- Sass (метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей);
- LESS (динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass и нового синтаксиса Sass «SCSS», в котором также использован синтаксис, являющийся расширением СSS);
- Stylus.