Веб-сайты состоят из нескольких отдельных частей, включая изображения, текст и различные документы. Эти документы включают в себя не только те, которые могут быть связаны с различными страницами, например, файлы 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, вы увидите, что использование возможностей таблиц стилей даст вам невероятную гибкость при разметке веб-страниц и определении их внешнего вида. Попутно вы соберете «пакет с уловками» стилей и подходов, которые работали для вас в прошлом и к которым вы можете обратиться снова при создании новых веб-страниц в будущем.
Под редакцией Джереми Жирара