- PVSM.RU - https://www.pvsm.ru -
Как новички изучают css-свойства?
Они читают про все свойства, которые только есть, что-то запоминают, в основном только width, height и background, а потом постоянно рыщут по своим конспектам и гуглу, пытаются вспомнить какое свойство за что отвечает, как оно пишется и какие у него есть значения.
И тут мне пришла в голову идея. А что если сделать такую штуку, которая наглядно показывает как пишутся и работают все css-свойства? Причем, все это на одной странице.
Таким образом, за два вечера создался вот такой css-помощник: lesson-web.ru/css_helper [1]
В левой части мы видим результат работы css-свойств, а справа, собственно, список css-свойств, которые мы можем увидеть в действии.
В окне результата у нас есть один, как будто бы, div с классом .box.
Если установить свойство float, то в окне появится три одинаковых блока.
Так же, можно задать текстовое содержимое этого блока. Есть пять вариантов:
В блоке с css-свойствами мы можем:
Значение можно задать тремя способами:
Собственно, вот такая приятная мелочь получилась)
Если у вас есть какие-то идеи как можно улучшить этот помощник, то с радостью почитаю их в комментариях!
Автор: Mirkom63
Источник [2]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css/210094
Ссылки в тексте:
[1] lesson-web.ru/css_helper: https://lesson-web.ru/css_helper
[2] Источник: https://habrahabr.ru/post/315256/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.