將css文件轉換爲HTML格式的內聯樣式使用npm包

我有HTML文件和外部CSS文件，喜歡將外部樣式表中的樣式內嵌到頭頂部的一個內嵌<style>標籤。在此先感謝您的幫助將css文件轉換爲HTML格式的內聯樣式使用npm包

注意：不要使用樣式屬性應用到每一個元素，希望有在頂部

一個風格標籤轉換

p { 
 
    color: red; }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>HTML Template</title> 
 
\t <link rel="stylesheet" type="text/css" href="css/mystyle.css"> 
 
\t <script type="text/javascript" src="js/myscript.js"></script> 
 
</head> 
 
<body> 
 
\t <p>Welcome to Template!!</p> 
 
</body> 
 
</html>

之前

轉換後

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>HTML Template</title> 
 
    <!-- START: Replaced inline tag from external css file mystyle.css as above--> 
 
\t <style> 
 
    .p{color:red} 
 
    </style> 
 
    <!-- END: Replaced inline tag from external css file mystyle.css as above--> 
 
\t <script type="text/javascript" src="js/myscript.js"></script> 
 
</head> 
 
<body> 
 
\t <p>Welcome to Template!!</p> 
 
</body> 
 
</html>

來源

2017-09-16 Mohamed Hussain

你可以開始讓你的HTML文件從網頁瀏覽器如果您使用PHP，你可以把它用下面的命令php -S 127.0.0.1:4000運行訪問，請確保您可以通過打開本地主機訪問它訪問：在4000你的網頁瀏覽器，也有另一種方式如何從其它語言的訪問，但它的出這個問題的範圍

的第二個步驟是安裝inliner NPM包npm install -g inliner

和execu TE inliner http://localhost:4000 > output.html

開放output.html看到的結果

執行inliner -i http://localhost:4000 > output.html如果你不想將圖像轉換成編碼

的base64

來源

2018-03-10 08:42:58

將css文件轉換爲HTML格式的內聯樣式使用npm包

回答

相關問題