Как объединить все используемые стили в один файл HTML

324

05 апреля 2017, 13:15

Есть страница на сайте, которая использует стили хранящиеся на сайте в папке css. Мне нужно сделать независимую html страничку, со всеми необходимыми стилями внутри документа между тэгами <style></style>. Вопрос: Как можно сделать такую страничку, которая будет включать только используемые на ней стили?

Answer 1

<!DOCTYPE  html> 
  <html lang="ru"> 
    <head> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
	<meta charset="utf-8"> 
	<meta name="viewport" content="width=device-width,initial-scale=1.0"> 				 					       
      <title>Mold</title> 
</head> 
<body> 
<header><h1>HEADER</h1></header> 
<main > 
<section > 
 <h2>section</h2> 
	<div > 
	Попробуйте через,<br> 
	сброс стилей при помощи JS,<br> 
	для переопределения приоритета,<br> 
	что бы исключить библиотеки.<br> 
	Стили присваивать придётся,<br>  
	через JS как на этой странице.<br> 
	Правда заморочено получается. 
	</div> 
</section> 
</main> 
<footer ><h4>FOOTER</h4></footer> 
<script > 
/*RESET(сброс стилей при помощи JS)*/ 
/*здесь вставте теги те что будете использовать на странице*/ 
var _reset = document.querySelectorAll("dody,header,main,section,article,aside,footer,h1,h2,h4"); 
for(var i = 0; i < _reset.length; i++) 
{console.log(_reset[i]); 
_reset[i].style.cssText = "margin:0;padding:0;border:0;outline:0;font-size:1rem;font-style:normal;font-variant:normal;font-weight:normal;vertical-align:baseline;line-height:1;color:hsla(0,0%,0%,1);background:transparent;"; 
}; 
/*Ваши css стили*/ 
/*BODY*/ 
document.querySelector("body").style.cssText = "width:100%;margin:0 auto;background:hsla(40,80%,60%,.8);text-shadow:0px 0px 1px hsla(0,0%,0%,.6);"; 
/*HEADER*/ 
document.querySelector("header").style.cssText = "border:1px solid hsla(0,0%,0%,1);width:90%;height:2em;margin:0 auto;margin-top:2%;padding:.5%;background:hsla(240,80%,60%,.8);"; 
/*HEADER H1*/ 
document.querySelector("header h1").style.cssText = "border:1px solid hsla(0,0%,0%,1);width:90%;margin:0 auto;background:hsla(0,0%,100%,1);font:700 100%/1.8 sans-serif;color:hsla(0,80%,40%,1);text-align:center;"; 
/*MAIN*/ 
document.querySelector("main").style.cssText = "display:block;border:1px solid hsla(0,0%,0%,1);width:90%;margin:.5% auto;padding:.5%;background:hsla(0,0%,80%,.8);"; 
/*SECTION*/ 
document.querySelector("main section").style.cssText = "display:block;border:1px solid hsla(0,0%,0%,1);width:90%;margin:0 auto;padding:.5%;background:hsla(0,80%,40%,.8);"; 
/*SECTION H2*/ 
document.querySelector("section h2").style.cssText = "border:1px solid hsla(0,0%,0%,1);width:90%;margin:0 auto;background:hsla(0,0%,80%,1);font:700 100%/1.8 sans-serif;color:hsla(240,80%,40%,1);text-align:center;"; 
/*SECTION DIV*/ 
document.querySelector("section div").style.cssText = "width:90%;margin:0 auto;background:hsla(0,0%,100%,1);font:700 100%/1.8 sans-serif;color:hsla(0,0%,0%,1);text-align:center;"; 
/*FOOTER*/ 
document.querySelector("footer").style.cssText = "border:1px solid hsla(0,0%,0%,1);width:90%;height:2em;margin:0 auto;padding:.5%;background:hsla(70,80%,60%,.8);"; 
/*FOOTER H4*/ 
document.querySelector("footer h4").style.cssText = "border:1px solid hsla(0,0%,0%,1);width:90%;margin:0 auto;background:hsla(0,0%,100%,1);font:700 100%/1.8 sans-serif;color:hsla(0,80%,40%,1);text-align:center;"; 
</script> 
</body> 
</html>