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

CSS：最初の文字の疑似要素

この要素を使用して、セレクターのテキストの最初の文字に特別なスタイルを追加します。次の例は、：first-letter要素を使用して、ドキュメント内の要素の最初の文字に特殊効果を追加する方法を示しています。

例

<html>
   <head>
      <style>
         p:first-letter {
            font-size: 5em;
         }
         p.normal:first-letter {
            font-size: 10px;
         }
      </style>
   </head>
   <body>
      <p class="normal"> First character of this paragraph will be normal and will
         have font size 10 px;
      </p>
      <p>The first character of this paragraph will be 5em big as defined
         in the CSS rule above. Rest of the characters in this paragraph
         will remain normal. This example shows how to use :first-letter pseduo
         element to give effect to the first characters of any HTML element.
       </p>
   </body>
</html>

  1. CSSポジショニング要素

    positionプロパティは、要素の配置に使用されます。つまり、以下はポジショニング要素です- 静的 −要素ボックスは、通常のドキュメントフローの一部として、前の要素と前の要素の後に配置されます。 相対 −要素のボックスは、通常の流れの一部として配置されてから、ある程度の距離だけオフセットされます。 絶対 −要素のボックスは、それを含むブロックに関連して配置され、ドキュメントの通常のフローから完全に削除されます。 修正済み −要素のボックスは絶対的に配置され、位置について説明されているすべての動作が絶対的です。 以下は、CSSを使用して要素を配置するためのコードで

  2. CSSでhr要素のスタイルを設定するにはどうすればよいですか？

    CSSを使用してhr要素のスタイルを設定するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <head> <style>    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-