CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用したFirst-Lettersのスタイリング::first-letter

CSSは、::first-letter疑似要素を使用して要素の最初の文字のスタイルを設定するのに役立ちます。句読点、有向グラフ、およびコンテンツプロパティによって、最初の文字が変更される可能性があることに注意してください。

次の例は、CSS::first-letter疑似要素を示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   text-align: center;
}
::first-letter {
   font-size: 3em;
   color: sienna;
   box-shadow: -10px 0 10px green;
   background-color: gainsboro;
}
</style>
</head>
<body>
<h2>Proin ut diam eros</h2>
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSを使用したFirst-Lettersのスタイリング::first-letter

例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   text-align: center;
}
body > * {
   background-color: slategrey;
}
::first-letter {
   font-size: 1.6em;
   color: darkviolet;
   background-color: silver;
   text-shadow: -15px 8px palevioletred;
}
</style>
</head>
<body>
<h2>Proin ut diam eros
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSを使用したFirst-Lettersのスタイリング::first-letter


  1. CSS属性セレクターを使用したフォームのスタイリング

    CSSの属性セレクターを使用して、特定の属性を持つHTML要素にスタイルを適用します。属性セレクターには次のルールが適用されます。 p [lang] −lang属性を持つすべての段落要素を選択します。 p [lang =fr] −lang属性の値が正確に「fr」であるすべての段落要素を選択します。 p [lang〜=fr] −lang属性に「fr」という単語が含まれているすべての段落要素を選択します。 p [lang | =en] − lang属性に正確に「en」であるか、「en-」で始まる値が含まれているすべての段落要素を選択します。 以下は、C

  2. ::file-selector-buttonSelectorを使用したファイルアップロードボタンのCSSスタイリング

    CSS疑似要素::file-selector-buttonを使用して、ファイルアップロードボタンのスタイルを設定できます。ただし、この疑似要素の完全なサポートはFirefoxとFirefoxAndroidに限定されています。 ::-webkit-file-upload-buttonは、Safari、Chrome、Operaをサポートするために使用されます。 構文 CSSファイルセレクタープロパティの構文は次のとおりです- Selector::file-selector-button {    attribute: /*value*/ } Selector::-webki