Лайфхакер
Лайфхакер
Лучшее
Новости
Жизнь
Рецепты
Здоровье
Кино
Технологии
Покупки
Лучшее
Новости
Жизнь
Рецепты
Здоровье
Кино
Технологии
Покупки
Куда поехать на выходные
Добрые новости
Стыдные вопросы
Есть мнение
Норм или стрём
Личный опыт
Объясняем за минуту
Сервисы
ОбразованиеТехнологии
12 декабря 2016

7 полезных ресурсов для тех, кто изучает CSS

Каскадные таблицы стилей делают скучный HTML привлекательным. Лайфхакер подобрал русскоязычные и англоязычные сайты, а также веб-энциклопедии, которые помогут лучше понять CSS.
Фото автора Пётр Глухов
Пётр Глухов

7 полезных ресурсов для тех, кто изучает CSS

Консорциум Всемирной паутины (World Wide Web Consortium, W3C) рекомендовал технологию CSS (Cascading Style Sheets) в 1996 году. С тех пор веб-разработчики используют каскадные таблицы стилей для создания уникального оформления сайтов.

⚡ Новости из мира гаджетов, обзоры, гайды и не только — в телеграм-канале «Технологии | Лайфхакер».

Двадцать лет назад разработчики играли с параметрами шрифтов, атрибутами текста и цветами элементов страницы. Сейчас в ходу анимации, тени, градиенты, сглаживания и многие другие продвинутые вещи.

Установите, например, расширение Web Developer для Chrome, чтобы полюбоваться любимыми сайтами без каскадных таблиц стилей.

каскадные таблицы стилей: лайфхакер без CSS

Изменения будут разительными, хотя и не всегда. Например, новостной агрегатор Drudge Report почти не изменится: он прост как дважды два. Тем не менее ежемесячно ресурс просматривают свыше 150 миллионов раз.

Где научиться тонкостям CSS

1. HTMLbook

каскадные таблицы стилей: HTMLbook

Будем последовательны и начнём с крепкой теоретической базы. За ней обратимся к Владу Мержевичу, автору книг и веб-разработчику, который поддерживает несколько качественных ресурсов о вёрстке и стилизации веб-страниц.

На HTMLbook вы найдёте понятный самоучитель и ответы на популярные вопросы о каскадных таблицах стилей. Здесь же представлены обучающие статьи об актуальной третьей спецификации CSS.

2. WebReference

каскадные таблицы стилей: WebReference

WebReference предлагает алфавитный справочник по CSS. Каждое свойство имеет краткое описание, синтаксис и живой пример. Не стесняйтесь задавать вопросы — авторы проекта выходят на связь и охотно обсуждают детали.

3. CSS Reference

каскадные таблицы стилей: CSS Reference

В дополнение к русскоязычным самоучителям добавим зарубежные сайты. Некоторым студентам с их помощью проще вникать в профессию и принимать её терминологию. Поэтому всё внимание на CSS Reference. На сайте нет ничего лишнего: свойства CSS, пояснения и действие. Из приятных мелочей отметим быстрый поиск и копирование свойства в буфер обмена по щелчку мыши.

4. CSS Design Awards

каскадные таблицы стилей: CSS Design Awards

Обучение — дело долгое и порой скучное. Неплохо бы найти мотивацию, чтобы она помогала в трудные минуты. Вдохновляться будем у других веб-дизайнеров, а точнее на сайте CSS Design Awards. Здесь каждый день представляют качественный проект, который служит образцом того, к чему стоит стремиться. Многие из победителей действительно удивляют. Не забывайте заглядывать и голосовать за понравившихся номинантов.

5. CSS Zen Garden

каскадные таблицы стилей: CSS Zen Garden

Заручившись знаниями и маяком, пора испытать свои силы в деле. И чтобы долго не выбирать дорогу, направим вас на страницу CSS Zen Garden. На ней выложен неизменный HTML-файл, которому пользователи со всего света пытаются придать неординарный дизайн с помощью каскадных таблиц стилей.

Загрузите эталонный HTML, добавьте своё оформление и отправьте всё это обратно. Возможно, ваш подход окажется самым лучшим. К слову, можно скачать чужой вариант и посмотреть, как же он реализован.

6. CSSPlay

каскадные таблицы стилей: CSSPlay

Понятное дело, что вам захочется применить нечто эдакое, что привлечёт всеобщее внимание. Не знаем, есть ли такое на CSSPlay, но десятки и сотни любопытных приёмов там точно завалялись.

Скачать код напрямую не получится. Вам придётся залезть в меню разработчиков — такова политика местной партии. При этом подавляющее большинство CSS-стилей можно использовать без разрешения автора.

7. CSS Lint

каскадные таблицы стилей: CSS Lint

Зачем нам чужое, если у самих руки прямо растут? Так ли оно на самом деле покажет CSS Lint. Помимо базовой проверки синтаксиса CSS, веб-сервис выполняет проверку на соответствие правилам, которые влияют на скорость загрузки страниц. На выходе получаем хороший, милый для браузеров CSS-код.

А какие ресурсы о каскадных таблицах стилей можете посоветовать вы?

*Деятельность Meta Platforms Inc. и принадлежащих ей социальных сетей Facebook и Instagram запрещена на территории РФ.

Если нашли ошибку, выделите текст и нажмите Ctrl + Enter
Это интересно
От станка до зарплаты: 7 необычных экскурсий, которые помогут школьнику понять, какую выбрать профессию

От станка до зарплаты: 7 необычных экскурсий, которые помогут школьнику понять, какую выбрать профессию

Обзор ноутбука Honor MagicBook 16 2026 — крепкого середнячка в тонком корпусе

Обзор ноутбука Honor MagicBook 16 2026 — крепкого середнячка в тонком корпусе

Косметический ремонт за выходные: 6 вещей в квартире, которые можно обновить без грязи и пыли

Косметический ремонт за выходные: 6 вещей в квартире, которые можно обновить без грязи и пыли

Не только стройматериалы: как экосистема «Петровича» закрывает все задачи по ремонту

Не только стройматериалы: как экосистема «Петровича» закрывает все задачи по ремонту

Реклама
Комментарии
Антон Якунов
12.12.16 22:09
https://drafts.csswg.org/ https://www.w3.org/Style/CSS/
Дмитрий Гуменюк
12.12.16 22:22
У webref и htmlbook вроде как один создатель и один ресурс является наследником другого.
Что вы могли пропустить
Почему нам иногда кажется, будто мы видим знакомые вещи впервые
Почему нам иногда кажется, будто мы видим знакомые вещи впервые
0
Вчера
Образование
Образование
5 фактов о левшах, которые могут стать сюрпризом даже для них самих
5 фактов о левшах, которые могут стать сюрпризом даже для них самих
0
24 июля
Образование
Образование
Английский для интернета: 20 аббревиатур, без которых не обойтись в соцсетях
Английский для интернета: 20 аббревиатур, без которых не обойтись в соцсетях
0
23 июля
Образование
Образование
Знаете ли вы, кто придумал кока-колу?
Знаете ли вы, кто придумал кока-колу?
0
22 июля
Образование
Образование
Почему массовая истерия легко распространяется и как ей противостоять
Почему массовая истерия легко распространяется и как ей противостоять
0
16 июля
Образование
Образование
Знаете ли вы, почему миссионерская позиция так называется?
Знаете ли вы, почему миссионерская позиция так называется?
0
15 июля
Образование
Образование
5 фактов о свиньях, которые заставят вас иначе посмотреть на этих животных
5 фактов о свиньях, которые заставят вас иначе посмотреть на этих животных
0
10 июля
Образование
Образование
Знаете ли вы, почему мы иногда забываем, зачем зашли в комнату?
Знаете ли вы, почему мы иногда забываем, зачем зашли в комнату?
0
8 июля
Образование
Образование
Почему тесты на типы личности — это полная ерунда, к которой нельзя относиться серьёзно
Почему тесты на типы личности — это полная ерунда, к которой нельзя относиться серьёзно
0
7 июля
Образование
Образование
Что будет, если Луна упадёт на Землю?
Что будет, если Луна упадёт на Землю?
0
2 июля
Образование
Образование
Испытания водой, огнём и хлебом: 7 самых странных способов правосудия в истории
Испытания водой, огнём и хлебом: 7 самых странных способов правосудия в истории
0
30 июня
Образование
Образование
Что такое юмор висельника и почему нам нравятся шутки о трудностях жизни
Что такое юмор висельника и почему нам нравятся шутки о трудностях жизни
0
25 июня
Образование
Образование
7 навыков вожатого, которые пригодятся в любой профессии
7 навыков вожатого, которые пригодятся в любой профессии
0
24 июня
Образование
Образование
Знаете ли вы, почему люди спят под одеялом даже в самые жаркие дни?
Знаете ли вы, почему люди спят под одеялом даже в самые жаркие дни?
0
24 июня
Образование
Образование
Чем тревога отличается от страха: объясняет психотерапевт
Чем тревога отличается от страха: объясняет психотерапевт
0
23 июня
Образование
Образование
Что вы могли пропустить
Всё под замком: Autonomous выпустила физический «ключ от соцсетей» для смартфонов
Всё под замком: Autonomous выпустила физический «ключ от соцсетей» для смартфонов
0
Вчера
Новости
Устройства
Историк придумал способ ловить студентов на использовании ИИ самым нелепым образом
Историк придумал способ ловить студентов на использовании ИИ самым нелепым образом
0
Вчера
Новости
Технологии
Линейка флагманских телефонов Samsung может расшириться до 8 моделей
Линейка флагманских телефонов Samsung может расшириться до 8 моделей
0
Вчера
Новости
Устройства
Как использовать PlayStation 5 в России в 2026 году и какие есть ограничения
Как использовать PlayStation 5 в России в 2026 году и какие есть ограничения
0
Вчера
Технологии
Технологии
Nike выпустила шлёпанцы с подогревом и вибрацией для восстановления после тренировок
Nike выпустила шлёпанцы с подогревом и вибрацией для восстановления после тренировок
0
Вчера
Новости
Технологии
Не просто «составь меню»: как чат-бот помогает мне питаться правильнее
Не просто «составь меню»: как чат-бот помогает мне питаться правильнее
0
27 июля
Технологии
Технологии
На «Авито Авто» появилась карта АЗС с данными о наличии топлива и ценами
На «Авито Авто» появилась карта АЗС с данными о наличии топлива и ценами
0
27 июля
Веб-сервисы
Новости
Надо ли отключать интернет во время грозы
Надо ли отключать интернет во время грозы
0
26 июля
Технологии
Технологии
Автономность складного Samsung Galaxy Z Fold 8 Ultra сравнили с конкурентами
Автономность складного Samsung Galaxy Z Fold 8 Ultra сравнили с конкурентами
0
25 июля
Новости
Устройства
Плита, лампа и обогреватель в одном: представлена стильная портативная горелка Pyronex
Плита, лампа и обогреватель в одном: представлена стильная портативная горелка Pyronex
0
25 июля
Новости
Устройства
Выбираем технику для съёмной квартиры: 10 недорогих, но качественных устройств
Выбираем технику для съёмной квартиры: 10 недорогих, но качественных устройств
0
25 июля
Устройства
Устройства
Unitree показала робособаку на колёсиках — она бегает по скалам, крутит сальто и танцует
Unitree показала робособаку на колёсиках — она бегает по скалам, крутит сальто и танцует
0
24 июля
Новости
Технологии
Круто, необычно и недорого: 30 отличных инди-игр, которые запустятся даже на картошке
Круто, необычно и недорого: 30 отличных инди-игр, которые запустятся даже на картошке
0
24 июля
Ликбез
Технологии
Oppo выпустила потенциальный бестселлер K15 — с активным охлаждением и батареей на 8 000 мА·ч
Oppo выпустила потенциальный бестселлер K15 — с активным охлаждением и батареей на 8 000 мА·ч
0
24 июля
Новости
Устройства
Названы экзотические мессенджеры, которые чаще всего скачивают в России
Названы экзотические мессенджеры, которые чаще всего скачивают в России
0
24 июля
Новости
Технологии

Новые комментарии

Аватар автора комментария
D.V.37 минут назад

0 / 0

Очень долго вглядывался в первую картинку :)))
Последний цирковой слон в Португалии вышел на «пенсию» после 40 лет на арене
Аватар автора комментария
Екатерина Таширева5 часов назад

0 / 0

Это ещё и очень творчески продуктивное состояние. То же остранение. Или удивление как одно из состояний, с которых начинается философствование.
Почему нам иногда кажется, будто мы видим знакомые вещи впервые
Аватар автора комментария
Sergey Gorovoy8 часов назад

0 / 0

только что посмотрел "аномализу", но не из этого списка, а "параллельного"). очень милая лента, чувственная и без особого сексуалистического подтекста. в ней - другое...
10 откровенных мультфильмов, в которых много обнажения и секса
Аватар автора комментария
Natasha Mikhaylova9 часов назад

0 / 0

Monotype Corsiva
WhatTheFont — приложение для поиска шрифтов с картинок
ТЕСТ: Какой вы путешественник? 

ТЕСТ: Какой вы путешественник? 

Лайфхакер
Информация
О проектеРубрикиРекламаРедакцияВакансииО компании
Подписка
TelegramВКонтактеTwitter (X)PinterestYouTubeИнициалRSS
Правила
Пользовательское соглашениеПолитика обработки персональных данныхПравила применения рекомендательных технологийПравила сообществаСогласие на обработку персональных данныхСогласие для рекламных рассылокСогласие для информационной программы
18+Копирование материалов запрещено.
Издание может получать комиссию от покупки товаров, представленных в публикациях