私はこの素晴らしいCSS codeを見つけ、それを私のウェブサイトでどのように使うべきかを知りました。しかし、私はPHPでたくさんのボタンを生成しなければならないので、ボタンのためにstyle="..."としてCSSインラインを書く必要があります。私の質問は、インラインCSSに変換するにはどうすればいいですか？CSSをインラインCSSに変換しますか？
私はすでにコンバーターのためにgoogledが、悲しいことに何も見つかりませんでした。
スタイルタグで囲まれたファイルの先頭に置くことができます。
それは、関連するクラスが影響を受ける要素にあった場合、そのファイルにのみ影響します。
<style>
//css code goes here
</style>
EDIT：
あなたは具体的には、インラインになりたいと手動で入力したくない場合は、あなたがそれにポストプロセスを実行して追加するツールを見つけるか、記述する必要がありますどちらか。これを正しく書くことは難しいことですが、Gulpはあなたの友人かもしれません。
これは彼がやりたいことではありません。彼は具体的に "インライン"と "スタイル="と述べている – Rob
CSSは次のようになります。インラインスタイルとHTMLは次のようになり意味
.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;
}
：
<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>
あなたは.button spanにbackgroundを切り替える必要があるだろうが、右＃ですそれはおおむねあなたが必要とするものです。
あなたのあなたは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" ..>
私が推測するが、唯一のボタン用です、その理由私は属性クラスを呼び出さなかった。
クラスを複数のボタン$（ "。button_class_name"）で使用する場合は、クラスを使用できます – vikvincer
あなたはこのようなものをお探しですか？
<button style="background: blue; color: black; font-size: 15px">Im a button</button>
<!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>あなたは複数行のCSS持っている場合は、これを使用することができます。
$('#button-id').css({
'property1': 'value1',
'property2': 'value2'
});
をあなたはどのようにあなたがSCSSを取ると、それ本当のCSS作るのです意味ですか？ボタンにクラスを生成する方法がないので、インラインスタイルとしてすべてを行う必要はありませんか？あなたは同じ方法でHTMLを複製できますか？ 「」の中の「」？ – bjornmeansbear
SOは私たちにソフトウェアの推奨を許可していません。また、SOには、自分でコードを書くことができます**。 ** [もっと研究をして]（// meta.stackoverflow.com/questions/261592)**あなたが問題を抱えていると、あなたが試みたものを投稿することができます** t作業**を提供し、** [最小、完全、および検証可能な例]（// stackoverflow.com/help/mcve)**を提供します。 – Rob
JS *の（サーバサイドレンダリングで）、[Atomic CSS]（https://acss.io）、[emogrifier]でUnCSSや他の重要なCSS_ツール、（P）React/VueJS、 （https://www.myintervals.com/emogrifier.php）と[CssToInlineStyles]（https：// github。com/tijsverkoyen/CssToInlineStyles /）（[C＃]（http://chrispebble.com/inlining-a-css-stylesheet-with-c/））。 /！\スタイル属性のMQもホバー/フォーカスも：疑似スタイルもありません（Atomic CSSはクラスを使って解決します）。私は興味がありますが、あなたがリンクしているペンの問題は何ですか**インラインスタイルが必要でしょうか？ – FelipeAls