html - HTML/CSS CSS を介してキャラクターのスタイリングの選択を定義する

Question

CSS を介してキャラクターのスタイリングの選択を定義するにはどうすればよいですか?

たとえば、Gには特別なフォント/サイズが必要で、ウルには通常のスタイルが必要なこのコードがあります。

<font style="font-family: BlessedDay; font-size: 180px;">G</font>uru

上記は機能しますが、良い習慣ではないと思います。CSS クラス定義でこれを行うにはどうすればよいですか?

score 4 · Accepted Answer

同様ですが、SPANS を使用します。

<span class="biggie">G</span>uru

CSS:

.biggie {
  font-family: BlessedDay;
  font-size: 180px;  
}

「BlessedDay」は、無料で入手できる Web フォントではないようです。

score 1 · Accepted Answer

疑似セレクターを使用できるはずですfirst-letter。注: これはインライン要素では使用できないため、のp代わりにa を使用しましたspan。

HTML

<p class="guru">Guru</p>

CSS

.guru:first-letter {
    font-size: 200%;
    font-family: BlessedDay;
}

編集:クラスを使用しなかったために反対票を投じたと仮定します。OP の要件を反映するように修正されました。

CSS クラス定義でこれを行うにはどうすればよいですか?

score 0 · Accepted Answer

これを試して、

<span class="c1">G</span>uru

<style>
 .c1 {
  font-family: BlessedDay;
  font-size: 180px;
 }
</style>

score -1 · Accepted Answer

次のようなことができます。

HTML:

<body>
<div class="adoptabledogs">
<p>Max</p>
<p>Marbles</p>
<p>Mary</p>
<p>Moe</p>
</div>
</body>

CSS:

.adoptabledogs {
font-family: BlessedDay, sans-serif;
font-size: 45px;
color: green;
}

5 に答える 5