Question

我有外部css文件的HTML文件，比如将外部样式表中的样式内联到头顶的一个内联<style>标记中。在此先感谢您的任何帮助

注意：不想使用应用于每个元素的样式属性，希望在顶部有一个样式标记

转换前

＆＃13;

p {
  color: red;
}

＆＃13;

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

＆＃13;

转换后

＆＃13;

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

＆＃13;

Answer 1

您可以从Web浏览器访问您的html文件开始如果您使用php，可以通过运行以下命令php -S 127.0.0.1:4000使其可访问，确保您可以通过Web浏览器上的open localhost：4000访问它，还有另一种方法如何从其他语言访问，但它＆＃ 39;超出了这个问题的范围

第二步是安装inliner npm package npm install -g inliner

并执行inliner http://localhost:4000 > output.html

打开output.html查看结果

如果您不想将图片转换为base64编码，请执行inliner -i http://localhost:4000 > output.html

使用npm包将css文件转换为HTML中的内联样式

1 个答案: