С момента своего зарождения в конце 1990-х годов CSS значительно расширил сферу применения. Теперь это зрелая, надежная технология, широко поддерживаемая настольными и мобильными браузерами, но есть много того, чему нужно научиться. Если вы отстали от последних разработок или хотите изучить CSS впервые, этот контрольный список должен помочь вам с практическими советами, общими рекомендациями и высококачественными ресурсами.
1. Сначала убедитесь, что вы знаете HTML
Первое, что вам следует знать, прежде чем начать изучать CSS, — это HTML. Это может показаться очевидным, но есть несколько важных концепций, которые нужно усвоить, прежде чем погрузиться в стилизацию своего контента.
Ваш учебный путь подчеркнет разделение между семантикой (HTML) и стилем (CSS). Убедитесь, что вы используете хорошую чистую разметку, и удалите любые стилистические HTML-теги, к которым вы, возможно, привыкли.
HTML-документация Mozilla превосходна (как и все ее материалы, охватывающие веб-платформу), поэтому начните с нее, если вы не уверены в своих знаниях HTML.
2 Начните с основ CSS
Оставайтесь на сайте Mozilla и погрузитесь в их введение в CSS.
На этом этапе нужно изучить две ключевые вещи: как писать базовый CSS и подключать его к вашим HTML-файлам. Документация Mozilla начинается с простого введения в CSS с использованием этого примера:
Даже если вы не умеете писать CSS, вы, вероятно, поймете, что делает этот отрывок: он делает элементы h1 красными и задает определенный размер шрифта.
Статья Mozilla Getting started with CSS описывает вторую часть головоломки, объясняя, как применять CSS, как указано выше, к вашим HTML-файлам. Внутренние таблицы стилей, вероятно, являются самым быстрым и простым способом начать, но внешние таблицы стилей имеют много преимуществ, поэтому хорошей идеей будет попробовать оба.
3. Поиграйте в некоторые игры
Хотя есть много отличных игр, которые помогут вам изучить CSS, они, как правило, охватывают более продвинутые методы, такие как макет сетки. CSS Diner больше подходит для новичков, и он должен помочь вам понять селекторы CSS, которые определяют определенные части вашего документа для стилизации. В примере выше показан простой селектор «h1», но они могут быть намного сложнее:
a#выбрано > .значок,
.box h2 + p {
шрифта: жирный;
}
CSS Speedrun — еще один хороший тест на ваши навыки селектора, хотя, как следует из названия, он может оказаться более напряженным!
4. Используйте инструменты разработчика Chrome/Safari/Firefox
Как только вы узнаете основы, вы будете почти готовы начать писать собственные таблицы стилей. Однако вы можете начать экспериментировать с CSS прямо в браузере, избежав необходимости открывать текстовый редактор и начинать возиться с файлами.
Например, инспектор элементов в инструментах разработчика Google позволяет просматривать CSS, который применяется к любому элементу на любой просматриваемой странице:
Более того, вы можете использовать панель «Стили» для редактирования любого CSS-кода или даже создания новых стилей и просматривать результаты в режиме реального времени.
Эти инструменты работают немного по-разному в каждом браузере, но вы должны быть в состоянии использовать их для закрепления своих знаний. Chrome имеет отличную поддержку автозаполнения, предлагающую как имена свойств, так и приемлемые значения. Экспериментируя, вы можете узнать о различных свойствах и узнать о них больше по прямым ссылкам на документацию Mozilla Developer Network (MDN):
5 Попробуйте онлайн-редактор
Прежде чем вы откроете этот текстовый редактор, есть еще один способ, которым вы можете попробовать свои навыки CSS, не имея дела с локальными файлами. Есть несколько веб-приложений, таких как CodePen или JSFiddle. Эти инструменты немного похожи на некоторые игры, которые вы видели ранее, за исключением игровой части. Они представляют текстовые поля, которые вы можете использовать для редактирования HTML и CSS, с предварительным просмотром, показывающим конечный результат.
Хотя эти инструменты обычно включают раздел JavaScript, чтобы вы могли отточить свои навыки кодирования, это совершенно необязательно. Просто проигнорируйте любые разделы «JS» или «JavaScript» и вместо этого сосредоточьтесь на HTML и CSS.
Эти редакторы включают полезные функции, такие как подсветка синтаксиса и форматирование кода. JSFiddle имеет хорошие отчеты об ошибках, обращая ваше внимание на недопустимые значения CSS, например. Они также позволяют вам сохранять вашу работу для дальнейшего использования, и вы всегда можете скопировать и вставить ваш HTML или CSS в локальный файл, если вы хотите использовать его в своих собственных проектах.
6. Используйте лучшие справочные материалы.
Как вы видели, многие из этих ресурсов ссылаются на MDN. Этот источник информации на веб-платформе является первоклассным и всеобъемлющим; он должен стать вашим первым портом вызова, когда вам нужно будет найти подробности о любой проблеме CSS:
Вы можете наткнуться на сайт W3Schools при поиске тем CSS или любых других тем, связанных с вебом. Название сайта звучит так, будто он связан с W3C, создателями стандартов для веб-технологий. Но это не так; это набор документации от третьей стороны. Хотя качество улучшилось, оно все еще далеко от совершенства, и MDN — гораздо более надежный источник.
На MDN есть множество материалов по CSS, от учебных пособий до интерактивных тестов. Охвачены все аспекты CSS, включая селекторы, модель блоков, цвета и отладку. Каждое свойство CSS имеет соответствующую справочную страницу, которая расскажет вам практически все, что вам нужно знать о нем:
Каждая страница со справочной информацией о свойствах содержит пояснения различных значений, примеры их использования и таблицу совместимости с браузерами. Последнее важно для различения хорошо поддерживаемых свойств и более экспериментальных, которые могут работать только в некоторых определенных браузерах.
Если вы ищете качественную альтернативу, то ресурсы CSS на W3C являются авторитетными. Однако будьте осторожны, они далеки от дружелюбного отношения к новичкам, и вам следует обращаться к ним только после того, как вы исчерпаете прекрасную информацию на MDN.
7. Будьте в курсе событий
Хотя это зрелая и стабильная технология, CSS все еще меняется. Члены различных организаций продолжают предлагать изменения, исправления и новые функции.
Как дизайнер, ваша задача часто выходит за рамки знания того, как что-то сделать, и вместо этого фокусируется на том, чего вы действительно можете достичь. Вы можете изменить цвет текста, но можете ли вы изменить его контур или можете ли вы использовать градиент вместо цвета?
Чтобы оставаться в курсе последних событий и отвечать на подобные вопросы, вам следует найти хороший источник новостей CSS, будь то подкаст, блог или особенно авторитетный аккаунт в социальной сети.
CSS-Tricks — один из лучших источников передовых новостей CSS. Он содержит статьи по всем аспектам CSS, а также имеет несколько превосходных справочных материалов, особенно по таким функциям, как Flexbox и grid.
Подкаст CSS — это сезонное шоу, которое существует уже пять лет. Его два соведущих достаточно интересны, чтобы погружаться в детали CSS, не делая тему слишком сухой или недоступной.
Доктор Ли Вероу, отраслевой эксперт, регулярно публикует на X посты о CSS и веб-платформе. Джен Симмонс работает в Apple над браузером Safari и публикует посты о проблемах CSS на Bluesky. Аккаунт рабочей группы CSS является настолько официальным, насколько это возможно. Он публикует посты только время от времени, чтобы продвигать обновления спецификаций и другие соответствующие статьи с w3.org, но подписка на него — отличный способ быть в курсе последних разработок.
8. Проверьте свой CSS
Теперь, когда вы создаете таблицы стилей дюжинами, разумно убедиться, что они не содержат ошибок. Ошибки в CSS могут легко остаться незамеченными и, как известно, их трудно отладить, поэтому убедитесь, что вы получили всю возможную помощь.
Валидатор W3C долгое время был золотым стандартом в проверке ошибок CSS. Вы можете предоставить URL, файл или текстовую копию ваших стилей, чтобы проверить их валидность.
Если ваши таблицы стилей не содержат ошибок, вы увидите дружелюбное сообщение с поздравлениями и значок, который вы можете использовать на своих веб-страницах, чтобы рекламировать их правильность. Теперь уже не обязательно показывать их, но вы можете это сделать, если хотите продемонстрировать свои навыки в портфолио или на личном веб-сайте.
Если же, с другой стороны, есть проблемы с вашим стилем, валидатор покажет подробные сообщения об ошибках, объясняющие их. Как и большинство ошибок, их может быть сложно понять, если вы с ними не знакомы, поэтому просмотрите затронутый код, чтобы определить, что с ним не так, прежде чем пытаться исправить это.
9. Проверьте совместимость браузера
Другим важным аспектом корректности таблиц стилей является совместимость с браузерами. Это уже не такая большая проблема, как раньше, но новые обновления CSS, включая экспериментальные функции, не всегда широко поддерживаются. К счастью, Caniuse точно скажет вам, какие свойства CSS будут работать в каждом браузере.
Информация здесь плотная, но представлена в удобном для восприятия виде. Вам нужно будет решить, какие браузеры вы готовы поддерживать, включая предыдущую жизнь Edge как Internet Explorer и различие мобильных/настольных устройств. Хорошая новость в том, что большая часть CSS необязательна, и вы можете спроектировать свои страницы так, чтобы они изящно деградировали при просмотре в неподдерживаемых браузерах.
10 основных CSS-типографик
Важный элемент всего дизайна, типографика не воспринималась всерьез в Интернете до появления шрифтов CSS. Язык всегда был гибким, поддерживая стек шрифтов, который позволяет вам выразить предпочтительный порядок шрифтов для использования в соответствии с тем, что доступно. Но настоящие веб-шрифты дают вам больше контроля над опытом и позволяют всем посетителям видеть ваш шрифт, даже если он у них не установлен.
Google Fonts — один из лучших поставщиков бесплатных шрифтов, и выбор его огромен: на момент написания статьи — около 2,000 семейств шрифтов.
Доступно множество вариаций и конфигураций, от разной толщины до поддержки нескольких языков и иконочных шрифтов. После настройки шрифта по своему вкусу просто скопируйте код вставки и добавьте его в свой HTML. Кроме того, вы можете загрузить файлы шрифтов и разместить их локально, если хотите.
