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

Частенько бывает такое.
Заходим мы такие на новенький сайт и находим интересный блок,
который можно было бы использовать в своих каких либо шаблона.

Давайте разберемся как без труда можно скопировать код блока с его стилями.

Для этого нам понадобится расширение для Chrome SnappySnippet (исходники).

1.Выбираем элемент для копирования

2.Выделяем элемент в инструментах разработчика

3.Переходим на вкладку SnappySnippet в инструментах разработчика
и жмем на кнопку «Create a snippet from inspected element»

4.Копируем получившуюся разметку и стили, после чего наслаждаемся результатом:

Слева исходник, справа скопированный элемент

Код:

#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*/

Код:

<div id="DIV_1">
<div id="DIV_2">
<div id="DIV_3">
Важное на Мете
</div>
<hr id="HR_4" />
<div id="DIV_5">
<div id="DIV_6">
<a href="http://meta.ru.stackoverflow.com/questions/2603/%d0%96%d0%b8%d0%b7%d0%bd%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%86%d0%b8%d0%ba%d0%bb-%d0%b2%d0%be%d0%bf%d1%80%d0%be%d1%81%d0%b0-%d0%bd%d0%b0-stack-overflow?cb=1" id="A_7"></a>
<div id="DIV_8">
</div>
</div>
<div id="DIV_9">
<a href="http://meta.ru.stackoverflow.com/questions/2603/%d0%96%d0%b8%d0%b7%d0%bd%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%86%d0%b8%d0%ba%d0%bb-%d0%b2%d0%be%d0%bf%d1%80%d0%be%d1%81%d0%b0-%d0%bd%d0%b0-stack-overflow?cb=1" id="A_10">Жизненный цикл вопроса на Stack Overflow</a>
</div>
<br id="BR_11" />
</div>
<div id="DIV_12">
<div id="DIV_13">
<a href="http://meta.ru.stackoverflow.com/questions/2539/%d0%9f%d0%be%d0%bc%d0%be%d0%b6%d0%b5%d0%bc-%d0%ba%d0%be%d0%bb%d0%bb%d0%b5%d0%b3%d0%b0%d0%bc-%d1%81%d0%b4%d0%b5%d0%bb%d0%b0%d1%82%d1%8c-%d0%bf%d0%b5%d1%80%d0%b2%d1%8b%d0%b9-%d1%88%d0%b0%d0%b3-%d0%ba-%d0%bf%d1%80%d0%be%d1%84%d0%b5%d1%81%d1%81%d0%b8%d0%be%d0%bd%d0%b0%d0%bb%d1%8c%d0%bd%d0%be%d0%bc%d1%83-%d1%80%d0%be%d1%81%d1%82%d1%83?cb=1"
id="A_14"></a>
<div id="DIV_15">
</div>
</div>
<div id="DIV_16">
<a href="http://meta.ru.stackoverflow.com/questions/2539/%d0%9f%d0%be%d0%bc%d0%be%d0%b6%d0%b5%d0%bc-%d0%ba%d0%be%d0%bb%d0%bb%d0%b5%d0%b3%d0%b0%d0%bc-%d1%81%d0%b4%d0%b5%d0%bb%d0%b0%d1%82%d1%8c-%d0%bf%d0%b5%d1%80%d0%b2%d1%8b%d0%b9-%d1%88%d0%b0%d0%b3-%d0%ba-%d0%bf%d1%80%d0%be%d1%84%d0%b5%d1%81%d1%81%d0%b8%d0%be%d0%bd%d0%b0%d0%bb%d1%8c%d0%bd%d0%be%d0%bc%d1%83-%d1%80%d0%be%d1%81%d1%82%d1%83?cb=1"
id="A_17">Поможем коллегам сделать первый шаг к профессиональному росту</a>
</div>
<br id="BR_18" />
</div>
<div id="DIV_19">
Обсуждаемое на Мете
</div>
<hr id="HR_20" />
<div id="DIV_21">
<div id="DIV_22">
<span id="SPAN_23">4</span>
</div>
<div id="DIV_24">
<a href="http://meta.ru.stackoverflow.com/questions/2515/%d0%9f%d0%be%d1%87%d0%b5%d0%bc%d1%83-%d0%be%d1%82%d0%ba%d0%bb%d0%be%d0%bd%d1%91%d0%bd%d0%bd%d0%b0%d1%8f-%d0%bf%d1%80%d0%b0%d0%b2%d0%ba%d0%b0?cb=1" id="A_25">Почему отклонённая правка?</a>
</div>
<br id="BR_26" />
</div>
<div id="DIV_27">
<div id="DIV_28">
<span id="SPAN_29">6</span>
</div>
<div id="DIV_30">
<a href="http://meta.ru.stackoverflow.com/questions/2560/%d0%9a%d0%b0%d0%ba-%d1%80%d0%b5%d0%b0%d0%b1%d0%b8%d0%bb%d0%b8%d1%82%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d1%82%d1%8c%d1%81%d1%8f-%d0%bf%d0%be%d1%81%d0%bb%d0%b5-%d0%b1%d0%b0%d0%bd%d0%b0?cb=1" id="A_31">Как реабилитироваться после бана?</a>
</div>
<br id="BR_32" />
</div>
</div>
</div>

Получившийся код можно сразу отправить на jsFiddle, CodePen или JS Bin.

Точность не 100%-я, но результат все равно хорош.

Удивительно, но IE обошел другие браузеры в этом плане.
Скопированные стили не содержат ничего лишнего.

Вот, как это делается в IE11+:

Открываем инструменты разработчика

Щелкаем правой кнопкой мыши на нужном элементе

Выбираем пункт Скопировать элемент со стилями

Вставляем в любой редактор.

Related Articles

Когда использовать width / height равный 100%?

Как растянуть изображение, чтобы заполнить блок, сохраняя соотношение сторон изображения

Проверенные методы вертикального центрирования с помощью CSS

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