<h1>Редактируемый, визуальный блок стилей CSS</h1> <p>А знаете ли вы, что тег <strong>style</strong> является по сути таким же блочным элементом? Он так же как и другие может быть отображен на странице! Дальше всё просто, используя атрибут HTML5 <b>contenteditable</b> в теге <strong>style</strong>, добавим ему возможность редактировать фактические стили на странице. Для этого поместите <strong> style</strong> со всем содержимым между тегами <strong> pre</strong>, что сохранит пробелы для удобного чтения и редактирования. </p> <h2>Попробуйте отредактировать или добавить некоторые стили в блоке ниже!</h2> <pre> <style class="edit-css" contenteditable="true"> body { padding:2em; line-height: 1.5; font-size: 14px; font-family: Helvetica,sans-serif; } h1 { font-size: 22px; color:#c00; text-shadow: 1px 1px 2px #ddd; } h2 { font-size: 18px; color:#1da000; text-shadow: 1px 1px 2px #ddd; } .edit-css { display:block; background:#ddd; border:1px solid #777; font-family:monospace; height:15em; resize:both; overflow:auto; } .edit-css:focus { background:#eee; outline:none; } .button { background: #6e98e3; color: #fff; padding: 14px; text-align: center; text-decoration: none; } .button:hover { background: #333; } </style> </pre> <p style="text-align: center;"><a class="button" href="http://dbmast.ru/category/snippety">Сниппеты</a></p>