Веб-сайты состоят из нескольких отдельных частей, включая изображения, текст и различные документы. Эти документы включают в себя не только те, которые могут быть связаны с различными страницами, например, файлы PDF, но также и документы, которые используются для создания самих страниц, например, документы HTML для определения структуры страницы и документы CSS (каскадная таблица стилей), определяющие внешний вид страницы.
Эта статья позволит немного углубиться в понятие CSS, осветив, что это такое и где каскадные таблицы используются на современных веб-сайтах.
Урок истории CSS
CSS был впервые разработан в 1997 году как способ для веб-разработчиков определить внешний вид создаваемых ими веб-страниц. Он был предназначен для того, чтобы позволить веб-профессионалам отделить содержание и структуру кода веб-сайта от визуального дизайна, что значительно упрощает разработку и обслуживание ресурсов.
Разделение структуры и стиля позволяет HTML выполнять больше функций, на которых он изначально основывался – разметка контента, не беспокоясь о дизайне и макете самой страницы, что обычно называют «внешним видом» страницы.
CSS не имел популярности до 2000 года, когда веб-браузеры начали использовать не только основные шрифтовые и цветовые аспекты этого языка разметки. Сегодня все современные браузеры поддерживают все уровни CSS 1, большую часть уровня CSS 2 и большинство аспектов уровня 3 CSS. Поскольку CSS продолжает развиваться и появляются новые стили, веб-браузеры начали реализовывать модули, которые обеспечивают новую поддержку CSS и дают веб-дизайнерам новые мощные инструменты для работы с ними.
Что интересно, в течение многих лет встречались веб-дизайнеры, которые отказывались использовать CSS для проектирования и разработки веб-сайтов, но сегодня эта практика практически ушла из отрасли. В настоящее время CSS является широко используемым стандартом в веб-дизайне, и вам будет сложно найти кого-то, кто работает в отрасли сегодня, но не имеет хотя бы базового понимания этого языка.
CSS – это аббревиатура
Как уже упоминалось, термин CSS означает «каскадная таблица стилей». Давайте немного разберем эту фразу, чтобы более полно объяснить, что делают эти документы.
Слово «таблица стилей» относится к самому документу (подобно HTML, файлы CSS, на самом деле, являются просто текстовыми документами, которые можно редактировать с помощью различных программ). Таблицы стилей использовались для оформления документов в течение многих лет. Это технические характеристики макета, будь то печать или онлайн. Дизайнеры печати давно используют таблицы стилей, чтобы гарантировать, что их дизайны будут напечатаны точно по их спецификациям.
Таблица стилей для веб-страницы служит той же цели, но с дополнительной функциональностью также сообщает веб-браузеру, как визуализировать просматриваемый документ. Сегодня таблицы стилей CSS также могут использовать медиазапросы, чтобы изменить внешний вид страницы для разных устройств и размеров экрана. Это важно, поскольку позволяет отображать один HTML-документ по-разному в зависимости от экрана, используемого для доступа к нему.
Каскад – это особенная часть термина «каскадная таблица стилей». Веб-таблица стилей предназначена для каскадного прохождения ряда стилей на этом листе, как река над водопадом. Вода в реке протекает через все камни водопада, но только те, которые находятся внизу, определяют, куда будет течь вода. То же самое относится и к каскаду в таблицах стилей сайта.
На каждую веб-страницу влияет хотя бы одна таблица стилей, даже если веб-дизайнер не применяет никаких стилей. Эта таблица стилей является таблицей стилей агента пользователя – также известной как стили по умолчанию, которые веб-браузер будет использовать для отображения страницы, если не предоставлено никаких других инструкций. Например, по умолчанию гиперссылки выделены синим цветом и подчеркнуты. Эти стили взяты из таблицы стилей веб-браузера. Однако, если веб-дизайнер предоставляет другие инструкции, браузер должен знать, какие инструкции имеют приоритет. Все браузеры имеют свои собственные стили по умолчанию, но многие из этих значений по умолчанию (например, текстовые ссылки, выделенные синим цветом) доступны для всех или большинства основных браузеров и версий.
В качестве другого примера настройки браузера, по умолчанию в нашем веб-браузере используется шрифт «Times New Roman», отображаемый с размером 16. Однако, почти ни одна из страниц, которые мы посещаем, не отображается в этом семействе шрифтов и размере. Это связано с тем, что каскад определяет, что таблицы стилей, которые устанавливаются самими дизайнерами, переопределяют размер шрифта и семейство, переопределяя значения по умолчанию нашего веб-браузера.
Любые таблицы стилей, которые вы создаете для веб-страницы, будут более специфичными, чем стили браузера по умолчанию, поэтому эти значения по умолчанию будут применяться только в том случае, если ваша таблица стилей не переопределяет их. Если вы хотите, чтобы ссылки были голубыми и подчеркнутыми, вам не нужно ничего делать, так как это значение по умолчанию, но если в файле CSS вашего сайта написано, что ссылки должны быть зелеными, этот цвет заменит синий по умолчанию. Подчеркивание останется в этом примере, так как вы не указали иного.
Где используется CSS
CSS также можно использовать для определения того, как должны выглядеть веб-страницы при просмотре в других приложениях, помимо веб-браузера. Например, вы можете создать таблицу стилей печати, которая будет определять, как должна распечатываться веб-страница.
Поскольку элементы веб-страницы, такие как кнопки навигации или веб-формы, не будут иметь смысла на напечатанной странице, можно использовать таблицу стилей для печати, чтобы «отключить» эти области при печати страницы. Хотя это не совсем обычная практика на многих сайтах, возможность создания таблиц стилей для печати является мощной и привлекательной функцией.
Почему CSS важен
CSS является одним из самых мощных инструментов, который веб-дизайнер может освоить, потому что с его помощью вы можете влиять на весь внешний вид сайта. Хорошо написанные таблицы стилей могут быть быстро обновлены и позволяют сайтам визуально менять приоритеты на экране, что, в свою очередь, показывает ценность и ориентацию на посетителей, без каких-либо изменений в базовой разметке HTML.
Основная проблема CSS заключается в том, что нужно постоянно переучиваться – и с учетом того, что браузеры меняются каждый день, то, что хорошо работает сегодня, может не иметь смысла завтра, поскольку появляется поддержка новых стилей, а другие отбрасываются или перестают использоваться по той или иной причине.
Поскольку CSS может каскадно объединяться, и учитывая, как разные браузеры могут по-разному интерпретировать и реализовывать директивы, освоить CSS может быть сложнее, чем обычный HTML. Поведение CSS изменяется в браузерах, чего не делает HTML. Однако, как только вы начнете использовать CSS, вы увидите, что использование возможностей таблиц стилей даст вам невероятную гибкость при разметке веб-страниц и определении их внешнего вида. Попутно вы соберете «пакет с уловками» стилей и подходов, которые работали для вас в прошлом и к которым вы можете обратиться снова при создании новых веб-страниц в будущем.
