Веб-сайты состоят из нескольких отдельных частей, включая изображения, текст и различные документы. Эти документы включают не только те из них, которые могут быть связаны с различными страницами, например с файлами PDF, но также с документами, которые используются для создания самих страниц, например HTML-документов, для определения структуры страницы и документов CSS (каскадный стиль) диктовать внешний вид страницы. В этой статье мы рассмотрим CSS, расскажем о том, что это такое и где он используется на веб-сайтах сегодня.
Урок истории CSS
CSS был впервые разработан в 1997 году как способ для веб-разработчиков определить визуальный внешний вид веб-страниц, которые они создают. Предполагалось, что веб-профессионалы могут отделять контент и структуру кода веб-сайта от визуального дизайна, чего не было до этого.
Разделение структуры и стиля позволяет HTML выполнять большую часть функции, изначально основанной на ней, - разметку содержимого, не беспокоясь о дизайне и макете самой страницы, что обычно называют «внешним видом», страницы.
CSS не пользовался популярностью до 2000 года, когда веб-браузеры начали использовать больше, чем основные шрифтовые и цветовые аспекты этого языка разметки. Сегодня все современные браузеры поддерживают весь уровень CSS 1, большую часть уровня CSS 2 и даже большинство аспектов уровня CSS 3. По мере того, как 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, вы увидите, что использование стилей стилей даст вам невероятную гибкость в том, как вы размещаете веб-страницы и определяете их внешний вид. По пути вы соберете «мешок трюков» стилей и подходов, которые работали для вас в прошлом, и которые вы можете снова включить, когда будете строить новые веб-страницы в будущем.
Оригинальная статья Дженнифер Крынин. Отредактировано Джереми Жирардом 7/5/17
