Назначение и возможности CSS
Любую веб-страницу можно разложить на три составляющие. Это ее непосредственное содержание, структура и представление.
Содержание — это, грубо говоря, тот текст, который видит перед глазами человек, просматривающий веб-страницу в окне браузера.
Структура — это логическое построение документа, описанное при помощи тегов разметки. Скажем, во многих текстах можно выделить заголовки, подзаголовки, абзацы, списки и их пункты, таблицы и их ячейки и другие структурные единицы.
Представление — это, главным образом, внешний вид тех или иных структурных единиц документа. Например, когда речь заходит о том, что шрифт заголовков должен быть более крупным, чем у основного текста страницы, да еще вдобавок и полужирным, мы говорим именно об особенностях представления документа. Один и тот же документ может иметь множество представлений: например, его внешний вид может различаться в зависимости от того, где документ отображается: на экране настольного компьютера или ноутбука, на экране карманного компьютера или же на листе бумаги при печати.
Тенденции развития языка разметки (CSS) нацелены на торжество принципа разделения содержания и представления на уровне конечного кода веб-страниц, передаваемого веб-сервером клиенту. При соблюдении этого принципа на HTML возлагается лишь задача структурирования контента, тогда как управление его представлениями полностью ложится на плечи CSS.
Так сегодня не рекомендованными к использованию признаны многие теги и атрибуты визуального форматирования, унаследованные от более ранних версий языка HTML. Примерами могут служить теги, аналогичные <font> и <center>, а также атрибуты вроде align, valign, color, bgcolor, size, width, height, border, cellspacing, cellpadding и т. д.
Когда HTML-документы содержат в себе только структурированный контент и ничего более, а описание внешнего облика страниц полностью отделено от HTML-документов и хранится во внешнем по отношению к ним листе стилей, мы можем, модифицировав единственный CSS-файл, изменить оформление всех страниц, связанных с ним. Количество страниц не имеет значения — таких документов может быть десять, сто, тысяча, да хоть миллион…
Отказываясь от визуальных средств HTML в пользу CSS, мы не меняем «шило на мыло», а приобретаем массу дополнительных преимуществ.
Во-первых, максимальное использование CSS дает возможность существенно сократить объем HTML-разметки. Разумеется, при этом возрастает объем CSS-кода, но CSS-файл, будучи внешним по отношению к группе HTML-документов, как правило, кэшируется браузером и не требует повторной загрузки с каждым вновь открываемым документом, связанным с этим файлом. Уменьшение объема HTML-кода положительно сказывается на скорости загрузки веб-страниц. (К слову, для крупных высоконагрузочных порталов, обслуживающих миллионы запросов к веб-серверу в сутки, критичен каждый байт информации, отправляемой клиенту — как с точки зрения нагрузки на сервер, так и с точки зрения экономии трафика.) Кроме того, уменьшение отношения объема служебной разметки к объему полезного содержания весьма благотворно сказывается на ранжировании страницы в выдаче поисковых систем.
Во-вторых, реализация принципа разделения содержания и представления на уровне конечного кода веб-страниц облегчает возможную дальнейшую автоматическую обработку содержимого этих страниц.
В-третьих, CSS позволяет управлять представлением данных, учитывая специфику среды или устройства вывода информации, включая, например, программы синтеза речи, дисплеи Брайля и т. д. CSS умеет работать с ними в режиме, совершенно прозрачном для пользователя. При условии, например, что разработчиком предусмотрены индивидуальные листы стилей (или правила в общем листе стилей) для представления содержимого страниц сайта не только на экране настольного компьютера или ноутбука, но и на экране карманного компьютера, а также на листе бумаги при печати, пользователю нет никакой нужды искать на странице кнопки или ссылки а-ля «Версия для КПК» или «Версия для печати». Ни о чем не задумываясь, пользователь может смело зайти на страницу с тем же самым URL с «наладонника», увидев ее в специально адаптированном оформлении. Точно так же пользователь может стандартными средствами браузера отправить необходимую страницу на печать и получить ее «твердую копию» без лишнего оформления, к примеру, без неактуальных в данном контексте навигационной панели и формы подписки на новости.
В-четвертых, возможности CSS по управлению визуальными представлениями документов гораздо богаче, нежели аналогичные возможности устаревших тегов и атрибутов визуального форматирования, предусмотренных в HTML. CSS, фактически, кроме того, что способен полностью заменить все без исключения визуальные элементы HTML, предоставляет огромное количество возможностей по управлению визуальным представлением, которых никогда не было в HTML. Иными словами, CSS позволяет контролировать любые аспекты визуального представления документов с точностью до последнего пикселя.
В-пятых, прогрессивные технологии предпочтительнее для устаревших браузеров. Ибо принцип разделения содержания и представления гарантирует текстуальную доступность контента везде и всюду. Судите сами — если вдруг агент пользователя по каким-то причинам не поддерживает CSS (или посетитель сайта самостоятельно запретил CSS в своем браузере), невелика беда. HTML-код страницы будет в любом случае обработан. Графический браузер отобразит такую страницу с оформлением, принятым по умолчанию. Что касается страниц, «напичканных» визуальными тегами и атрибутами HTML, отображению сайта в старых браузерах невозможно дать никаких гарантий.
Следовательно, управление визуальным представлением элементов страниц сайта нужно максимально возложить на CSS. Краткое руководство (англ.) по синтаксису файла таблиц каскадных стилей смотрите по ссылке:
www.design215.com/toolbox/css_guide.php
Справочник (рус.): css.softstore.by
Простой пример применения CSS:
Обтекание объектов текстом
|
Одна из задач, с которыми сталкиваются начинающие верстальщики Web-страниц – это проблема подписи под рисунком, который должен обтекаться текстом. Это задача решается с помощью:
1. Свойства CSS: float. При его применении текст может не только графические объекты, но и другой тест и таблицы, с одной из выбранных вами сторон: левой (float:left) или правой (float:right).
2. Заготовка таблицы в HTML-коде: caption и атрибута align. Заголовок может находиться сверху (align="top") или снизу (align="bottom") таблицы.
Все что нам необходимо - это вставить рисунок в таблицу, а комментарии к рисунку в заголовок таблицы. Далее задать свойство обтекания таблицы и требуемая цель на Web-странице. И код достаточно простой:
<table style="float:right"> <tr> <td> <img src="f1.jpg" width="150" height="125" alt=""> </td> </tr> <caption align="bottom"> Фото 1. Дуб искусственного морения </caption> </table>
Но почему рисунок мы заносим в таблицу? Все дело в том, что комментарий к рисунку может быть длинным. А таблица, которая облегает наш рисунок, просто не дает заголовку выходить на пределы своих «условно заданных» габаритов.
Не забудьте определить с помощью CSS объект caption. Например, так:
caption {
front-family: Tahoma;
front-size: 11px;
padding: 10px;
font-weight: bold;
}
Теперь подписи к рисункам и заголовки таблиц будут оформлены в одном стиле.
