Лайфхакер
Лайфхакер
Лучшее
Новости
Жизнь
Рецепты
Здоровье
Кино
Технологии
Покупки
Лучшее
Новости
Жизнь
Рецепты
Здоровье
Кино
Технологии
Покупки
Куда поехать на выходные
✍️ Написать
Добрые новости
Есть мнение
Норм или стрём
Личный опыт
Объясняем за минуту
ОбразованиеТехнологии
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
Это интересно
3 причины, почему с дачи мы всегда возвращаемся с полным багажником

3 причины, почему с дачи мы всегда возвращаемся с полным багажником

Не Питером единым: 10 мест в Ленобласти, которые стоит посетить 

Не Питером единым: 10 мест в Ленобласти, которые стоит посетить 

Няня и социальный контракт: что нужно знать о господдержке многодетных семей в 2026 году  

Няня и социальный контракт: что нужно знать о господдержке многодетных семей в 2026 году  

Что в сумке? Как изменилось то, что мы носим с собой

Что в сумке? Как изменилось то, что мы носим с собой

Комментарии
Авторизуйтесь, чтобы оставить комментарий
Антон Якунов
12.12.16 22:09
https://drafts.csswg.org/ https://www.w3.org/Style/CSS/
Дмитрий Гуменюк
12.12.16 22:22
У webref и htmlbook вроде как один создатель и один ресурс является наследником другого.
Что вы могли пропустить
Придёт серенький волчок: почему наши предки пели страшные колыбельные
Придёт серенький волчок: почему наши предки пели страшные колыбельные
0
Вчера
Книги
Образование
Как конкурс «Наука. Территория героев» помогает молодым людям делать первые открытия
Как конкурс «Наука. Территория героев» помогает молодым людям делать первые открытия
0
Вчера
Образование
Образование
«Кто написал марш Радецкого?»: почему не стоит считать глупыми людей из уличных опросов
«Кто написал марш Радецкого?»: почему не стоит считать глупыми людей из уличных опросов
0
Вчера
Образование
Образование
Знаете ли вы, почему фламинго розовые?
Знаете ли вы, почему фламинго розовые?
0
5 ноября
Образование
Образование
Мумии русалок и проклятия гробниц: что скрывается за археологическими «сенсациями»
Мумии русалок и проклятия гробниц: что скрывается за археологическими «сенсациями»
0
30 октября
Образование
Образование
8 безобидных вещей и занятий, которые в прошлом были запрещены
8 безобидных вещей и занятий, которые в прошлом были запрещены
0
22 октября
Образование
Образование
Может ли чат-бот быть расистом? Что такое алгоритмическая предвзятость
Может ли чат-бот быть расистом? Что такое алгоритмическая предвзятость
0
18 октября
Образование
Образование
«Я тебя могну»: английский сленг из песен на русском, который вы могли не понять
«Я тебя могну»: английский сленг из песен на русском, который вы могли не понять
0
15 октября
Образование
Образование
Знаете ли вы, почему время идёт только вперёд?
Знаете ли вы, почему время идёт только вперёд?
0
14 октября
Образование
Образование
Как перестать забывать о важных вещах с помощью разных видов памяти
Как перестать забывать о важных вещах с помощью разных видов памяти
0
12 октября
Образование
Образование
Астроном Владимир Сурдин: 6 космических чудес, которые поражают воображение
Астроном Владимир Сурдин: 6 космических чудес, которые поражают воображение
0
11 октября
Образование
Образование
Правда ли интроверты скромные, а экстраверты не умеют молчать
Правда ли интроверты скромные, а экстраверты не умеют молчать
0
8 октября
Образование
Образование
Не только служанка и ткачиха: 5 неожиданных женских профессий в Средние века
Не только служанка и ткачиха: 5 неожиданных женских профессий в Средние века
6 октября
«Горящая изба»
Образование
5 фактов о том, как люди всерьёз ждали конец света
5 фактов о том, как люди всерьёз ждали конец света
0
2 октября
Образование
Образование
6 животных, которым не чуждо состояние опьянения
6 животных, которым не чуждо состояние опьянения
0
25 сентября
Образование
Образование
Что вы могли пропустить
Xiaomi раскрыла график обновления устройств до HyperOS 4 на Android 17
Xiaomi раскрыла график обновления устройств до HyperOS 4 на Android 17
0
13:36
Новости
Технологии
10 устройств Honor с лучшими ценами на распродаже 11.11 от AliExpress
10 устройств Honor с лучшими ценами на распродаже 11.11 от AliExpress
0
Вчера
Покупки
Устройства
Motorola показала часы Watch 2 Fit, которые считают расход жиров во время тренировок
Motorola показала часы Watch 2 Fit, которые считают расход жиров во время тренировок
0
Вчера
Новости
Устройства
Как iPhone mini, но на Android 17: анонсирован миниатюрный Enough Phone
Как iPhone mini, но на Android 17: анонсирован миниатюрный Enough Phone
0
Вчера
Новости
Устройства
Назад в 1979-й: Sony перевыпустила культовые наушники от первого Walkman
Назад в 1979-й: Sony перевыпустила культовые наушники от первого Walkman
0
Вчера
Новости
Устройства
Bluetooth станет в 4 раза быстрее и позволит слушать музыку без потери качества
Bluetooth станет в 4 раза быстрее и позволит слушать музыку без потери качества
0
5 ноября
Новости
Технологии
Baseus выпустила плоскую колонку для сна SK1, которая кладётся под подушку
Baseus выпустила плоскую колонку для сна SK1, которая кладётся под подушку
0
5 ноября
Новости
Устройства
Объясняем за минуту: нужно ли выключать компьютер на ночь
Объясняем за минуту: нужно ли выключать компьютер на ночь
0
5 ноября
Технологии
Технологии
Китайский конкурент Neuralink готовит «электронный „Оземпик“» — гаджет для похудения без лекарств
Китайский конкурент Neuralink готовит «электронный „Оземпик“» — гаджет для похудения без лекарств
0
5 ноября
Новости
Устройства
ChatGPT научился создавать гифки — можно оживить даже собственный рисунок
ChatGPT научился создавать гифки — можно оживить даже собственный рисунок
0
5 ноября
Веб-сервисы
Новости
11 дофаминовых гаджетов с распродажи 11.11 на AliExpress
11 дофаминовых гаджетов с распродажи 11.11 на AliExpress
0
4 ноября
Покупки
Устройства
Шагай до Мордора, корми пингвина, сажай деревья: 10 трекеров привычек с игровыми механиками
Шагай до Мордора, корми пингвина, сажай деревья: 10 трекеров привычек с игровыми механиками
0
3 ноября
Технологии
Технологии
Google запустила автосохранение фото с Android на ПК через Quick Share
Google запустила автосохранение фото с Android на ПК через Quick Share
0
3 ноября
Android
Новости
Apple готовит домашнего робота с экраном, который сможет прогонять кота со стола
Apple готовит домашнего робота с экраном, который сможет прогонять кота со стола
0
3 ноября
Новости
Устройства
Один из лучших графических редакторов Affinity вышел на iPad — он доступен бесплатно
Один из лучших графических редакторов Affinity вышел на iPad — он доступен бесплатно
0
3 ноября
iOS
Новости

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

Аватар автора комментария
Sergey Gorovoy9 часов назад

0 / 0

отличный подбор. смотрел все ленты, кроме "гиацинта". но, как и всегда, разброс мнения коллайдера с моим, огромный. как пример: моя оценка N8 - 2/10 на IMDb. да и "убийца" - на первом месте..., хе-хе, хотя и неплохо.
В топ-10 триллеров от Netflix попали фильм с Томом Холландом и экранизация Стивена Кинга
Аватар автора комментария
Sergey Gorovoy9 часов назад

0 / 0

хорошо, что не только самые лучшие постановщики, а также, похоже, неугомонные останавливатели восьми войн, блин.
Брэд Питт прожаривает Леонардо Ди Каприо в трейлере «Новых похождений Клиффа Бута»
Аватар автора комментария
Sergey Gorovoy9 часов назад

0 / 0

мамадарагая, опять этот коллайдерский выбор!(
В Сети назвали единственные 3 фильма, которые увлекательнее «Властелина колец»
Аватар автора комментария
KapSuRioN13 часов назад

0 / 0

Только на днях пересмотрел Терминатор 2 - это шедевр на все века!
В Сети назвали единственные 3 фильма, которые увлекательнее «Властелина колец»
Что в сумке? Как изменилось то, что мы носим с собой

Что в сумке? Как изменилось то, что мы носим с собой

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