Допустим, я нашел интересно оформленный блок (форма обратной связи). Как можно скопировать 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
Комментариев нет:
Отправить комментарий