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