Консорциум Всемирной паутины (World Wide Web Consortium, W3C) рекомендовал технологию CSS (Cascading Style Sheets) в 1996 году. С тех пор веб-разработчики используют каскадные таблицы стилей для создания уникального оформления сайтов.
Двадцать лет назад разработчики играли с параметрами шрифтов, атрибутами текста и цветами элементов страницы. Сейчас в ходу анимации, тени, градиенты, сглаживания и многие другие продвинутые вещи.
Установите, например, расширение Web Developer для Chrome, чтобы полюбоваться любимыми сайтами без каскадных таблиц стилей.
Изменения будут разительными, хотя и не всегда. Например, новостной агрегатор Drudge Report почти не изменится: он прост как дважды два. Тем не менее ежемесячно ресурс просматривают свыше 150 миллионов раз.
Где научиться тонкостям CSS
1. HTMLbook
Будем последовательны и начнём с крепкой теоретической базы. За ней обратимся к Владу Мержевичу, автору книг и веб-разработчику, который поддерживает несколько качественных ресурсов о вёрстке и стилизации веб-страниц.
На HTMLbook вы найдёте понятный самоучитель и ответы на популярные вопросы о каскадных таблицах стилей. Здесь же представлены обучающие статьи об актуальной третьей спецификации CSS.
2. WebReference
WebReference предлагает алфавитный справочник по CSS. Каждое свойство имеет краткое описание, синтаксис и живой пример. Не стесняйтесь задавать вопросы — авторы проекта выходят на связь и охотно обсуждают детали.
3. CSS Reference
В дополнение к русскоязычным самоучителям добавим зарубежные сайты. Некоторым студентам с их помощью проще вникать в профессию и принимать её терминологию. Поэтому всё внимание на CSS Reference. На сайте нет ничего лишнего: свойства CSS, пояснения и действие. Из приятных мелочей отметим быстрый поиск и копирование свойства в буфер обмена по щелчку мыши.
4. CSS Design Awards
Обучение — дело долгое и порой скучное. Неплохо бы найти мотивацию, чтобы она помогала в трудные минуты. Вдохновляться будем у других веб-дизайнеров, а точнее на сайте CSS Design Awards. Здесь каждый день представляют качественный проект, который служит образцом того, к чему стоит стремиться. Многие из победителей действительно удивляют. Не забывайте заглядывать и голосовать за понравившихся номинантов.
5. CSS Zen Garden
Заручившись знаниями и маяком, пора испытать свои силы в деле. И чтобы долго не выбирать дорогу, направим вас на страницу CSS Zen Garden. На ней выложен неизменный HTML-файл, которому пользователи со всего света пытаются придать неординарный дизайн с помощью каскадных таблиц стилей.
Загрузите эталонный HTML, добавьте своё оформление и отправьте всё это обратно. Возможно, ваш подход окажется самым лучшим. К слову, можно скачать чужой вариант и посмотреть, как же он реализован.
6. CSSPlay
Понятное дело, что вам захочется применить нечто эдакое, что привлечёт всеобщее внимание. Не знаем, есть ли такое на CSSPlay, но десятки и сотни любопытных приёмов там точно завалялись.
Скачать код напрямую не получится. Вам придётся залезть в меню разработчиков — такова политика местной партии. При этом подавляющее большинство CSS-стилей можно использовать без разрешения автора.
7. CSS Lint
Зачем нам чужое, если у самих руки прямо растут? Так ли оно на самом деле покажет CSS Lint. Помимо базовой проверки синтаксиса CSS, веб-сервис выполняет проверку на соответствие правилам, которые влияют на скорость загрузки страниц. На выходе получаем хороший, милый для браузеров CSS-код.
А какие ресурсы о каскадных таблицах стилей можете посоветовать вы?
*Деятельность Meta Platforms Inc. и принадлежащих ей социальных сетей Facebook и Instagram запрещена на территории РФ.
Экстренная контрацепция: что о ней важно знать, а во что стоит перестать верить
Команда Лайфхакера попробовала нового ИИ-агента в «Битрикс24». 5 возможностей, которые нас удивили
РекламаКак в кино, только дома: устраиваем атмосферный просмотр фильмов с Samsung Микро RGB
РекламаСъезжаем со съёмной квартиры: чек-лист уборки, которая поможет вернуть депозит