Страницы

Поиск по вопросам

среда, 31 октября 2018 г.

Как можно скопировать кусок кода html вместе с его стилями?

Допустим, я нашел интересно оформленный блок (форма обратной связи). Как можно скопировать html со всеми стилями?


Ответ

Есть прекрасное расширение для Chrome SnappySnippet (исходники).
Выбираем элемент для копирования Выделяем элемент в инструментах разработчика Переходим на вкладку SnappySnippet в инструментах разработчика и жмем на кнопку Create a snippet from inspected element Копируем получившуюся разметку и стили, после чего наслаждаемся результатом:
Слева исходник, справа скопированный элемент

Вот код:
#DIV_1 { color: rgb(34, 36, 38); height: 198px; overflow-wrap: break-word; text-align: left; width: 268px; word-wrap: break-word; perspective-origin: 150px 112.5px; transform-origin: 150px 112.5px; background: rgb(255, 248, 220) none repeat scroll 0% 0% / auto padding-box border-box; border: 1px solid rgb(224, 220, 191); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0px 0px 19.5px; outline: rgb(34, 36, 38) none 0px; padding: 15px 15px 10px; } /*#DIV_1*/ #DIV_2 { color: rgb(34, 36, 38); height: 190px; overflow-wrap: break-word; text-align: left; width: 268px; word-wrap: break-word; perspective-origin: 134px 95px; transform-origin: 134px 95px; border: 0px none rgb(34, 36, 38); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(34, 36, 38) none 0px; } /*#DIV_2*/ #DIV_3 { color: rgb(156, 152, 139); height: 14px; overflow-wrap: break-word; text-align: left; text-transform: uppercase; width: 268px; word-wrap: break-word; perspective-origin: 134px 7px; transform-origin: 134px 7px; border: 0px none rgb(156, 152, 139); font: normal normal bold normal 11px / 14.3px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(156, 152, 139) none 0px; } /*#DIV_3*/ #HR_4, #HR_20 { color: rgb(170, 170, 170); height: 1px; overflow-wrap: break-word; text-align: left; width: 268px; word-wrap: break-word; perspective-origin: 134px 0.5px; transform-origin: 134px 0.5px; background: rgba(0, 0, 0, 0.0980392) none repeat scroll 0% 0% / auto padding-box border-box; border: 0px none rgb(170, 170, 170); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 6.5px 0px 10px; outline: rgb(170, 170, 170) none 0px; } /*#HR_4, #HR_20*/ #DIV_5, #DIV_12 { color: rgb(34, 36, 38); height: 32px; overflow-wrap: break-word; text-align: left; width: 258px; word-wrap: break-word; perspective-origin: 134px 16px; transform-origin: 134px 16px; border: 0px none rgb(34, 36, 38); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0px 0px 8px; outline: rgb(34, 36, 38) none 0px; padding: 0px 5px; } /*#DIV_5, #DIV_12*/ #DIV_6, #DIV_13 { color: rgb(130, 130, 130); float: left; height: 20px; overflow-wrap: break-word; text-align: left; width: 30.9531px; word-wrap: break-word; perspective-origin: 15.4688px 10px; transform-origin: 15.4688px 10px; border: 0px none rgb(130, 130, 130); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(130, 130, 130) none 0px; } /*#DIV_6, #DIV_13*/ #A_7, #A_14 { color: rgb(0, 119, 204); cursor: pointer; display: block; height: 20px; overflow-wrap: break-word; text-align: left; text-decoration: none; width: 30.9531px; word-wrap: break-word; perspective-origin: 15.4688px 10.5px; transform-origin: 15.4688px 10.5px; border-top: 0px none rgb(0, 119, 204); border-right: 0px none rgb(0, 119, 204); border-bottom: 1px solid rgba(0, 0, 0, 0); border-left: 0px none rgb(0, 119, 204); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0px 0px -1px; outline: rgb(0, 119, 204) none 0px; } /*#A_7, #A_14*/ #DIV_8, #DIV_15 { background-position: 0px -4554px; color: rgb(0, 119, 204); cursor: pointer; display: inline-block; height: 16px; overflow-wrap: break-word; text-align: left; width: 16px; word-wrap: break-word; perspective-origin: 8px 8px; transform-origin: 8px 8px; background: rgba(0, 0, 0, 0) url("http://cdn.sstatic.net/img/favicons-sprite16.png?v=65046080049f82845023d54a3c2662c1") no-repeat scroll 0px -4554px / auto padding-box border-box; border: 0px none rgb(0, 119, 204); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(0, 119, 204) none 0px; } /*#DIV_8, #DIV_15*/ #DIV_9, #DIV_16 { color: rgb(34, 36, 38); float: left; height: 32px; overflow-wrap: break-word; text-align: left; width: 227.031px; word-wrap: break-word; perspective-origin: 113.516px 16px; transform-origin: 113.516px 16px; border: 0px none rgb(34, 36, 38); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(34, 36, 38) none 0px; } /*#DIV_9, #DIV_16*/ #A_10, #A_17 { color: rgb(0, 119, 204); cursor: pointer; display: block; height: 32px; overflow-wrap: break-word; text-align: left; text-decoration: none; width: 227.031px; word-wrap: break-word; perspective-origin: 113.516px 16.5px; transform-origin: 113.516px 16.5px; border-top: 0px none rgb(0, 119, 204); border-right: 0px none rgb(0, 119, 204); border-bottom: 1px solid rgba(0, 0, 0, 0); border-left: 0px none rgb(0, 119, 204); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0px 0px -1px; outline: rgb(0, 119, 204) none 0px; } /*#A_10, #A_17*/ #BR_11, #BR_18, #BR_26, #BR_32 { clear: both; color: rgb(34, 36, 38); overflow-wrap: break-word; text-align: left; word-wrap: break-word; border: 0px none rgb(34, 36, 38); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(34, 36, 38) none 0px; } /*#BR_11, #BR_18, #BR_26, #BR_32*/ #DIV_19 { color: rgb(156, 152, 139); height: 14px; overflow-wrap: break-word; text-align: left; text-transform: uppercase; width: 268px; word-wrap: break-word; perspective-origin: 134px 7px; transform-origin: 134px 7px; border: 0px none rgb(156, 152, 139); font: normal normal bold normal 11px / 14.3px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 15px 0px 0px; outline: rgb(156, 152, 139) none 0px; } /*#DIV_19*/ #DIV_21, #DIV_27 { color: rgb(34, 36, 38); height: 16px; overflow-wrap: break-word; text-align: left; width: 258px; word-wrap: break-word; perspective-origin: 134px 8px; transform-origin: 134px 8px; border: 0px none rgb(34, 36, 38); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0px 0px 8px; outline: rgb(34, 36, 38) none 0px; padding: 0px 5px; } /*#DIV_21, #DIV_27*/ #DIV_22, #DIV_28 { color: rgb(130, 130, 130); float: left; height: 16px; overflow-wrap: break-word; text-align: left; width: 30.9531px; word-wrap: break-word; perspective-origin: 15.4688px 8px; transform-origin: 15.4688px 8px; border: 0px none rgb(130, 130, 130); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(130, 130, 130) none 0px; } /*#DIV_22, #DIV_28*/ #SPAN_23, #SPAN_29 { color: rgb(130, 130, 130); overflow-wrap: break-word; text-align: left; word-wrap: break-word; border: 0px none rgb(130, 130, 130); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(130, 130, 130) none 0px; } /*#SPAN_23, #SPAN_29*/ #DIV_24, #DIV_30 { color: rgb(34, 36, 38); float: left; height: 16px; overflow-wrap: break-word; text-align: left; width: 227.031px; word-wrap: break-word; perspective-origin: 113.516px 8px; transform-origin: 113.516px 8px; border: 0px none rgb(34, 36, 38); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(34, 36, 38) none 0px; } /*#DIV_24, #DIV_30*/ #A_25, #A_31 { color: rgb(0, 119, 204); cursor: pointer; display: block; height: 16px; overflow-wrap: break-word; text-align: left; text-decoration: none; width: 227.031px; word-wrap: break-word; perspective-origin: 113.516px 8.5px; transform-origin: 113.516px 8.5px; border-top: 0px none rgb(0, 119, 204); border-right: 0px none rgb(0, 119, 204); border-bottom: 1px solid rgba(0, 0, 0, 0); border-left: 0px none rgb(0, 119, 204); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0px 0px -1px; outline: rgb(0, 119, 204) none 0px; } /*#A_25, #A_31*/


Получившийся код можно сразу отправить на jsFiddle, CodePen или JS Bin. Точность не 100%-я, но результат все равно хорош.
Update:
Удивительно, но IE обошел другие браузеры в этом плане. Скопированные стили не содержат ничего лишнего. Вот, как это делается в IE11+:
Открываем инструменты разработчика Щелкаем правой кнопкой мыши на нужном элементе Выбираем пункт Скопировать элемент со стилями Вставляем в любой редактор.

Вот результат:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; } .module { margin-bottom: 1.5em; } .module { word-wrap: break-word; } .community-bulletin.module { padding: 15px 15px 10px 15px; background-color: #FFF8DC; border: 1px solid #E0DCBF; } #sidebar { position: relative; } #sidebar, .sidebar { float: right; overflow: hidden; width: 300px; margin: 0; margin: 0 0 15px 0; } #content { min-height: 450px; margin: 0 auto; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 1060px; padding: 15px; background-color: #fff; } #content::after { display: table; content: " "; clear: both; } #content::after { display: table; content: " "; clear: both; } .container { margin: 0 auto; text-align: left; width: 100%; } body { font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; font-size: 13px; line-height: 1.3em; color: #222426; background: #FFFFFF; min-width: 1075px; } html { min-width: 1060px; } .related { line-height: 1.3; font-size: 12px; } #sidebar .related, #sidebar .linked { font-size: 13px; } .community-bulletin.module .bulletin-title { color: #777; font-weight: bold; font-size: 11px; color: #9c988b; text-transform: uppercase; margin-top: 15px; } .community-bulletin.module :first-child.bulletin-title { margin-top: 0px; } hr { border: 0; color: #aaa; background-color: #aaa; height: 1px; margin-bottom: 20px; } .community-bulletin.module hr { margin-bottom: 10px; background-color: rgba(0,0,0,0.1); } .module .spacer { margin-bottom: 8px; } .community-bulletin.module .spacer { padding: 0 5px; } .bulletin-item-type { float: left; width: 12%; } .community-bulletin.module .bulletin-item-type { color: #828282; } .bulletin-item-content { float: left; width: 88%; } .cbt { clear: both; } a { text-decoration: none; cursor: pointer; } a { color: #0077cc; text-decoration: none; } .question-hyperlink { font-size: 16px; font-weight: 400; } .answer-hyperlink, .question-hyperlink { color: #0077cc; line-height: 1.3; margin-bottom: 1.2em; } .related a { font-size: 12px; font-weight: normal; } .community-bulletin.module .question-hyperlink { font-weight: normal; } #sidebar .related a, #sidebar .linked a { font-size: 13px; } .favicon { width: 16px; height: 16px; } .favicon { background-color: transparent; background-repeat: no-repeat; background-image: url('../img/favicons-sprite16.png?v=65046080049f82845023d54a3c2662c1'); } .favicon-rumeta { background-position: 0 -4554px; } div.favicon { display: inline-block; }
Чтобы увидеть результат в сниппете его необходимо прокрутить вправо до упора. Единственная проблема: путь к картинке. Если его исправить, то получается следующее:
Слева исходник, справа скопированный элемент

Дополнительно почитайте вот этот вопрос на SO: Tools to selectively copy HTML+CSS+JS from existing sites

Комментариев нет:

Отправить комментарий