將CSS轉換爲內嵌CSS？

-1

我發現這個真棒CSS code和什麼使用它在我的網站上。但是因爲我必須用PHP生成很多按鈕，所以我需要爲該按鈕編寫內聯的按鈕style="..."。我現在的問題是，如何將其轉換爲內聯CSS？將CSS轉換爲內嵌CSS？

我已經使用了一個轉換器，但可惜我沒有找到任何東西。

2017-09-14 ChantelleWedel

你的意思是你怎麼把SCSS，使其真正CSS？有沒有辦法生成按鈕上的類，所以你不必做所有的內聯樣式？你能以同樣的方式複製HTML嗎？在''內的''？ – bjornmeansbear

SO不允許我們推薦軟件。另外，在SO上，你應該嘗試**自己編寫代碼**。後** [做更多的研究]（//meta.stackoverflow.com/questions/261592)**如果你有問題，你可以**發佈你已經嘗試**與清楚的解釋是什麼是'工作**並提供** [最小，完整和可驗證示例]（// stackoverflow.com/help/mcve)**。 – Rob

您可以在JS *（服務器端渲染？），[Atomic CSS]（https://acss.io），[emogrifier]）中探索UnCSS和其他_critical CSS_工具，（P）React/VueJS和其他CSS * （https://www.myintervals.com/emogrifier.php）和[CssToInlineStyles]（https：// github。（[C＃]（http://chrispebble.com/inlining-a-css-stylesheet-with-c/））。 /！\無論是MQ還是懸停/焦點和：樣式屬性中的僞樣式（Atomic CSS都有通過使用類的解決方案）。雖然我很好奇，你連接到的筆會出現什麼問題，需要**內聯樣式？ – FelipeAls

你可以把它放在你的文件的頂部，由風格標籤包圍。

然後，它會影響該文件，因爲相關的類位於意圖受到影響的元素上。

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

編輯：

如果你特別希望它是內聯和不想手動鍵入它，那麼你要麼必須找到或編寫，將增加在其上運行一個後期處理工具。正確書寫這將是一個挑戰，但Gulp可能會成爲你的朋友。

來源

2017-09-14 01:53:54 rjustin

這不是他想要做的。他特別聲明「inline」和「style =」 – Rob

的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是正確的＃十六進制顏色，但這大致是你需要的。

來源

2017-09-14 01:57:26 bjornmeansbear

您可以添加這些CSS代碼到您的網站的頂部的CSS文件

來源

2017-09-14 01:59:13

這不是他要求做的。 – Rob

你可以試試這個，你說使用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" ..>

我想只有一個按鈕，之所以我沒有叫屬性類。

來源

2017-09-14 02:02:27

如果你想在多個按鈕上使用它，你可以使用class $（「。button_class_name」） – vikvincer

你在找這樣的東西嗎？

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

來源

2017-09-14 03:59:36

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

來源

2017-09-14 06:17:08 anu

如果您有多個行CSS，你可以使用這個：

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

來源

2017-09-14 07:23:37 vikvincer

將CSS轉換爲內嵌CSS？

回答

相關問題