Техника оформление текста с помощью CSS

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

Структура страницы — это взаимосвязь ее логических элементов: заголовков, обычного текста, перечней, гиперссылок и т. д. Пользователю удобнее воспринимать содержание, если оно организовано в стройную и логичную структуру. В самом деле, подумайте, как вы пользовались бы словарем, если бы слова в нем шли не по алфавиту, а в случайном порядке? Алфавитный порядок — один из типичных примеров того, как содержанию придается определенная структура. На веб-страницах для структурной организации используются элементы HTML.
Наконец, представление страницы — это та форма, в которой пользователь ее воспринимает. Большинство пользователей просматривают страницы на экранах компьютеров и других устройств. Значит, для них представление страницы — это то же самое, что ее внешний вид, оформление.Если пользователь прослушивает веб-страницу с помощью речевого браузера или «прощупывает» ее браузером Брайля — значит, представлением является ровно то, что он слышит или нащупывает.

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

Многие разработчики сайтов любят говорить о таких вещах, как «концепция», «стиль», «дизайн», «креатив» и т. д. Конечно, оригинальная концепция и великолепный стиль могут существенно улучшить эффективность сайта и его привлекательность для пользователя — но только при условии, что сайт предоставляет нужное и интересное содержание. В самом деле, первый вопрос, который должен задавать себе разработчик, - «Зачем пользователи будут заходить на мой сайт?» Если вовремя не задуматься над этим — может получиться красивый, но никому не нужный сайт.

CSS (каскадные таблицы стилей) приобрели популярность в конце 1996 года. Не смотря на относительно долгое существование этой технологии, ее практическое применение для Web-дизайна ограничивалось управлением шрифтами и цветом, по крайней мере, до недавнего времени.

Данное ограничение возникло из-за отсутствия совместимой поддержки таблиц стилей браузерами. Поскольку не все браузеры одинаково обрабатывали инструкции языка CSS (если вообще обрабатывали), дизайнеры не могли в полной мере воспользоваться реальными преимуществами таблиц стилей. Вместо этого, ответственность за отображение информации возлагалась на язык HTML.

Теперь, когда поддержка языка CSS реализована гораздо лучше, и, благодаря этому, можно воспользоваться множеством ценных возможностей языка, Web-дизайнеры переходят от использования языка HTML, как средства стилизации и создания макетов страниц, к настоящему дизайну с применением языка CSS.

Почему это так важно? Причин тому - множество:

  • Раздельное хранение представления и документа позволяет стилизовать этот документ для различных устройств, включая, монитор принтер, проектор и даже портативные устройства.

  • Раздельное хранение представления и документа означает уменьшение размера документа, что, в свою очередь, ускоряет загрузку и отображение страницы, доставляя удовольствие посетителям.

  • Язык CSS позволяет управлять как одним документом, так и миллионами документов. Для внесения изменения потребуется модифицировать необходимый стиль в одном CSS-файле, и это изменение автоматически отразится на всех связанных документах. В языке HTML это сделать невозможно.

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

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

Очевидно, что язык CSS предоставляет множество возможностей.

Каскадные таблицы стилей (CSS) стали невероятно популярными в последние годы, прежде всего, благодаря широко распространенной поддержке браузерами большинства их директив.

Люди часто интересуются, почему стили называются каскадными? Каскад - это иерархия применения - красивое название для системы применения правил. Если внимательно посмотреть на ниже перечисленные типы таблиц стилей, то станут очевидными различные способы применения стиля к одному и тому же документу.

Что же получится в результате, если у нас будет встроенный стиль, внедренная таблица стилей и связанная таблица стилей?

Каскад определяет способ применения правил, в случае с типами таблиц стилей:

  • Пользовательский стиль переопределяет все остальные стили;

  • Встроенный стиль превосходит внедренный, связанный и импортированный стили;

  • Внедренный стиль имеет преимущественное значение перед встроенным стилем;

  • Связанные и импортированные стили рассматриваются, как равные по значимости, и применяются везде, где не были применены другие типы таблиц стилей.

Стиль браузера используется только в том случае, когда для данного элемента не было предоставлено ни одного стиля.

Существует шесть типов таблиц стилей:

  • Стиль браузера - это стандартная таблица стилей, используемая браузером. Если никакие правила стиля не объявлены, применяются эти стандартные стили.

  • Стиль пользователя - пользователь может написать свою таблицу стилей и переопределить любые стили, созданные вами, изменив настройки браузера. Такой подход используется редко, но может оказаться полезным для людей с ограниченными возможностями, например с плохим зрением. В данном случае пользователь создаст стили с высококонтрастными шрифтами больших размеров, которые переопределят ваши стили.

  • Встроенный стиль - стиль, который определяется непосредственно в элементе и применяется с использованием атрибута style. Такой подход полезен для стилей, единовременно применяемых к одному элементу, однако он не считается идеальным.

  • Внедренный стиль - этот стиль управляет представлением одного документа и размещается внутри элемента style HTML-документа.

  • Связанный стиль - это таблица стилей, которая связана с HTML-документом при помощи элемента link, размещенного в разделе документа head. Любой документ, связанный с данным типом таблицы стилей, получает все стили, определенные в ней, в чем и заключается преимущество управления языка CSS.

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

Каскад также относится к порядку применения нескольких таблиц стилей. Если существуют три связанные таблицы стилей, применена будет та из них, которая интерпретируется браузером при наличии конфликтов между ними.

CSS помогает исключить физическую разметку внешнего вида из HTML или XHTML, добавить дизайну эффекты и визуальную интригу, а также облегчить рабочий процесс дизайнеров.

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