There is a page on the site that uses the styles stored on the site in the css folder. I need to make an independent html page, with all the necessary styles inside the document between the <style></style> tags. Question: How can you make such a page that will include only the styles used on it?

  • Learn Gulp, SASS or similar tools - Alexandr Kiseloy

1 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>