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

#html #css

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

Ответы

Ответ 1

Есть прекрасное расширение для 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*/

  

    

      Важное на Мете
    
    

    

      

        
        

        
      
      

        Жизненный цикл вопроса на Stack Overflow
      
      

    
    

      

        
        

        
      
      

        Поможем коллегам сделать первый шаг к профессиональному росту
      
      

    
    

      Обсуждаемое на Мете
    
    

    

      

        4
      
      

        Почему отклонённая правка?
      
      

    
    

      

        6
      
      

        Как реабилитироваться после бана?
      
      

    
  





Получившийся код можно сразу отправить на 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;
}

  

    

      

        

          

            

              

                Важное на Мете
              
              

              

                

                  
                    

                  
                
                

                  Жизненный
цикл вопроса на Stack Overflow
                
                

              
              

                

                  
                    

                  
                
                

                  Поможем
коллегам сделать первый шаг к профессиональному росту
                
                

              
              

                Обсуждаемое на Мете
              
              

              

                

                  4
                
                

                  Почему
отклонённая правка?
                
                

              
              

                

                  6
                
                

                  Как
реабилитироваться после бана?
                
                

              
            
          
        
      
    
  





Чтобы увидеть результат в сниппете его необходимо прокрутить вправо до упора.
Единственная проблема: путь к картинке. Если его исправить, то получается следующее:  

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

   

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