Css倒影:将CSS转换为内联CSS-边看边学

我发现这个很棒的 CSScode以及在我的网站上使用它。但是因为我必须使用 PHP 生成很多按钮，所以我需要将 CSS 内联编写为style="..."按钮。我现在的问题是，如何将其转换为内联 CSS？

我已经搜索了一个转换器，但遗憾的是我没有找到任何东西。

你可以把它放在你的文件的顶部被样式标签包围。

然后，它将只影响该文件，因为相关的类位于受影响的元素上。

<style>
//css code goes here
</style>

EDIT:

如果你特别希望它是内联的，不想手动输入它，那么你必须找到或编写一个工具，将添加运行一个后处理。

你在找这样的东西吗？

<on style="background: blue; color: black; font-size: 15px">Im a on</on>

CSS 看起来像这样：

.on {
  background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);
  position: relative;
  padding: 3px;
  display: inline-block;
  border-radius: 7px;
}
.on span {
  display: inline-block;
  background: #191919;
  color: white;
  text-transform: uppercase;
  padding: 2rem 5rem;
  border-radius: 5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 800;
  font-size: 3rem;
}

这意味着内联样式的 HTML 将是：

<a href="#" style="background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);position: relative;padding: 3px;display: inline-block;border-radius: 7px;">
    <span style='display: inline-block;background: #191919;color: white;text-transform: uppercase;padding: 2rem 5rem;border-radius: 5px;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight: 800;font-size: 3rem;'>Button</span>
</a>

您必须在.on span上切换background是正确的 # hex 颜色，但这大致是您需要的。

你可以试试这个，你说使用 jQuery：

$("on#id_name").css('background-color','red'); //<on id="id_name" ..>
$("input[type='submit']").css("background-color','red');// <input type="submit" .../>
$("a#id_name").css("background-color','red');// <a href="#" id="id_name" ..>

我猜只有一个按钮，这就是为什么我没有调用属性类的原因。

本站系公益性非盈利分享网址，本文来自用户投稿，不代表边看边学立场，如若转载，请注明出处