Question

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

我已经用谷歌搜索转换器，但遗憾的是我没有找到任何东西。

Answer 1

您可以将它放在由样式标记包围的文件顶部。

如果关联的类位于要受影响的元素上，那么它将影响该文件。

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

修改

如果您特别希望它是内联的并且不想手动输入它，那么您将要么必须找到或编写一个工具，它将在其上添加运行后期处理。正确地写这将是一个挑战，但Gulp可能是你的朋友。

Answer 2

CSS看起来像这样：

.button {
  background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);
  position: relative;
  padding: 3px;
  display: inline-block;
  border-radius: 7px;
}

.button 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>

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

Answer 3

您可以将这些css代码添加到您网站的顶级css文件

Answer 4

你可以尝试使用Jquery：

$("button#id_name").css('background-color','red'); //<button 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" ..>

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

Answer 5

你正在寻找这样的东西吗？

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

Answer 6

＆＃13;

<!DOCTYPE html>
<html style="height: 100%;
   overflow: hidden;">
   <body style="height: 100%;
      overflow: hidden;background: #191919;
      display: flex;
      align-items: center;
      justify-content: center;">
      <a href="#0" 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-weight: 800;font-size: 3rem;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">Button</span>
      </a>
   </body>
</html>

＆＃13;

Answer 7

如果你有多行css：

，你可以使用它

$('#button-id').css({
       'property1': 'value1',
       'property2': 'value2'
});

将CSS转换为内联CSS？

7 个答案: