インラインCSSでCSSクラスを定義するにはどうすればよいですか？

Question

ゲームのプロフィールページのアイコンをクリックすると、ポップアップ画面が表示されます。 STYLEタグはブロックされていますが、開発者はプロファイルエリアでHTMLコードを使用できるようになりました。また、私はHTMLコードの頭の部分にアクセスすることができません。その結果、私はCSSクラスを定義し、それらをプロファイルページにリンクする外部ファイルを作成することができません。

以下、私のコードの例を作成しました。このコード例では、外部CSSコードを作成しました。私はこれらの外部CSSを自分のHTMLコード（Inline CSSメソッドを使用して）にどうやって取得できるのか知りたい。私の問題は、インラインCSSメソッドでCSSクラスを定義することです。

物事は私の質問に答える前に、知っている：カントは、CSSの外部ファイルを作成

1）。

2）HEADタグ内にコードを書き込みます。

3）STYLEタグを使用します。

4）HTMLコードのみが許可されています。 BBCodeは許可されません。

私のHTMLコードは次のようになります。

<p> 
<a class="button" href="#popup1"> 
    <img src="SOME ICON URL HERE"> 
</a> 
</p> 

<div id="popup1" class="overlay light"> 
<a class="cancel" href="#"></a> 
<div class="popup"> 
    <h2>TITLE</h2> 
    <div class="content"> 
    <p>PARAGRAPH ONE GOES HERE</p> 
    <p>PARAGRAPH TWO GOES HERE</p> 
    </div> 
</div> 
</div> 

マイ外部CSSのコードは次のようになります。

.overlay { 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
background: rgba(0,0,0,0.5); 
transition: opacity 200ms; 
visibility: hidden; 
opacity: 0; 
&.light { 
    background: rgba(255,255,255,0.5); 
} 
.cancel { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    cursor: default; 
} 
&:target { 
    visibility: visible; 
    opacity: 1; 
} 
} 

.popup { 
margin: 75px auto; 
padding: 20px; 
background: #fff; 
border: 1px solid #666; 
width: 300px; 
box-shadow: 0 0 50px rgba(0,0,0,0.5); 
position: relative; 
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; 
.light & { 
    border-color: #aaa; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.25); 
} 
h2 { 
    margin-top: 0; 
    color: #666; 
    font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; 
} 
.close { 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    top: 20px; 
    right: 20px; 
    opacity: 0.8; 
    transition: all 200ms; 
    font-size: 24px; 
    font-weight: bold; 
    text-decoration: none; 
    color: #666; 
    &:hover { 
    opacity: 1; 
    } 
} 
.content { 
    max-height: 400px; 
    overflow: auto; 
} 
p { 
    margin: 0 0 1em; 
    &:last-child { 
    margin: 0; 
    } 
} 
} 

Answer 1

あなたがHTMLを使用して、このような何かを行う必要があるでしょうインラインスタイル

<div id="popup1" style="<!-- styles here -->"> 
    <!-- other code here --> 
</div>