Основные сведения о каскадных таблицах стилей CSS

Каскадные таблицы стилей, или Cascading Style Sheets (CSS), обеспечивают творческую свободу в разметке и дизайне веб-страниц. Пользуясь CSS, вы сможете украсить текст страниц привлекательными заголовками, буквицами, рамками, как в красочных глянцевых журналах. Можно точно разместить и позиционировать изображения, создать столбцы и баннеры, выделить ссылки динамическими эффектами. Кроме того, можно добиться постепенного появления и исчезновения элементов, перемещения объектов по странице или медленного изменения цвета кнопки при прохождении над ней указателя мыши. Вы думаете, что все это довольно сложно? Напротив! Каскадные таблицы стилей как раз и предназначены для упрощения процесса оформления веб-страниц.

Как работает CSS

CSS работает с HTML, но не имеет к HTML никакого отношения. Это совершенно другой язык. HTML структурирует документ, упорядочивая информацию в заголовки, абзацы, маркированные списки и?т.?д., в то время как CSS тесно взаимодействует с браузером, чтобы оформление HTML-документа имело совершенный вид. Например, вы могли бы использовать HTML, чтобы превратить фразу в заголовок, отделяя его от содержания страницы, но лучше применять CSS для форматирования заголовка, скажем, большим полужирным красным шрифтом с?позиционированием на 50?пикселов от левого края окна. В CSS это форматирование текста включает в себя стиль?— правило, описывающее внешний вид конкретной части веб-страницы. А таблица стилей (style sheet) является набором таких стилей.

Можно также создавать стили специально для работы с изображениями. Например, с?помощью стилей можно выровнять изображение по правому краю веб- страницы, поместить его в цветную рамку, отделить от окружающего текста на 50?пикселов. Создав стиль один раз, можно применять его к текстовым фрагментам, изображениям, заголовкам и любым другим элементам страницы сколько угодно. Например, вы можете выбрать абзац текста и применить к нему стиль, тут же изменяющий размер, цвет и шрифт текста. Можно также сделать стили для определенных HTML-тегов так, чтобы, например, все заголовки первого уровня (теги) на вашем сайте были отображены в одинаковом стиле, независимо от того, где они размещены.

Преимущества CSS

До появления CSS дизайнеры веб-страниц были ограничены возможностями разметки и оформления языка HTML. И если вы занимались серфингом в Интернете в 1995?году, то уясните разницу в возможностях CSS и HTML. Читая дальше эту книгу, вы поймете, что HTML все еще является основой создания страниц в Сети, но это отнюдь не средство формирования их дизайна. Безусловно, HTML обеспечивает простейшее форматирование текста, изображений, таблиц и других элементов страниц, и оформитель может придать им прекрасный внешний вид. Как правило, в результате веб-страницы получаются громоздкими и медленно загружаются. Таблицы стилей CSS, напротив, имеют следующие преимущества.

1. Больше возможностей форматирования, нежели в В CSS вы можете форматировать абзацы по мере их появления в тексте (например, с абзацным отступом и с произвольным интервалом между абзацами) и изменять межстрочный интервал (расстояние между двумя соседними строками текста в абзаце).
2. При использовании CSS вы решаете, каким образом добавить фоновое изображение на страницу. Оно может отображаться в виде неперекрывающейся мозаики, повторяться и?т.?д.
3. Еще более значимо то, что стили CSS занимают намного меньше места, чем форматирующие команды Например, тег. Применяя CSS, вы можете уменьшить размер веб-страниц. В результате они будут стильно выглядеть и быстрее загружаться.
4. Стилевые таблицы также облегчают обновление сайта. Можно собрать все стили в?единственный внешний файл и связать его со всеми страницами сайта. Когда вы редактируете стиль, изменения моментально затрагивают все элементы страниц сайта, где есть ссылка на описанный в таблице стиль. Вы можете полностью изменить внешний вид путем редактирования единственного файла таблицы стилей.

Разновидности CSS 

Как производители операционных систем, так и создатели CSS постоянно выпускают новые версии своих программных продуктов. CSS 1, появившийся в 1996 году, стал основой для дальнейшего совершенствования языка каскадных таблиц стилей.  В этой самой первой версии языка CSS были введены основные понятия и команды: Структура таблиц стилей, понятие идентификатора элемента (см. гл. 3) и большая часть свойств CSS. 

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

И все-таки CSS 2.1 мало чем отличается от CSS 2, и большинство браузеров давно адаптированы под эту версию. Исключение составляет lnternet Explorer 6, вследавие чего приходится искать обходные пути правильного отображения веб-страниц с использованием CSS 2.1 в различных версиях браузера.  К счастью, в версии браузера lnternet Explorer 7 исправлено большинство недостатков предыдущих версий, а версия lnternet Explorer 8 наконец обрабатывает практически все правила CSS 2.1 верно. 

Версия CSS 3 готовится к выпуску. Хотя Консорциум World Wide Web (WЗС) еще не утвердил стандарт, производители некоторых браузеров уже адаптируют свои программные продукты с учетом рекомендаций и особенностей нового стандарта. Технология Safari нового CSS 3 предоставляет возможность добавлять несколько изображений в фон одного элемента.  И вообще, очень много нововведений CSS 3 уже рабо тают в современных браузерах. Лучшим ресурсом, внимательно следящим за развитием нового стандарта CSS 3,  является сайт CSSЗ.iпfo (http://www.cssЗ.iпfo).