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

CSSを使用したテキスト変換

CSSでのテキスト変換の場合、次の値でtext-transformプロパティを使用します-

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   line-height: 1.9;
   text-transform: uppercase;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text.<br>
This is another demo text.
</p>
</div>
</body>
</html>

出力

CSSを使用したテキスト変換

例

別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
div {
   text-transform: lowercase;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>THIS is demo text.<br>
This is ANOTHER demo text.
</p>
</div>
</body>
</html>

出力

CSSを使用したテキスト変換


  1. CSSを使用して要素をZ-Indexとオーバーラップさせる

    CSS Z-Indexプロパティの開発者は、要素を相互にスタックできます。 Z-Indexには、正の値または負の値を指定できます。 注 −重複する要素にz-indexが指定されていない場合、その要素はドキュメントの最後に記載されている要素として表示されます。 例 z-indexプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p {    margin: 0;    position: absolute;    to

  2. CSSを使用したテキスト装飾

    CSS text-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用されます。値として、ラインスルー、オーバーライン、アンダーラインなどを追加できます。これは、text-decoration-line、text-decoration-color、およびtext-decoration-styleの省略形です。 構文 text-decorationプロパティの構文は次のとおりです- Selector {    text-decoration: /*value*/ } 例 次の例は、CSSのテキスト装飾プロパティ-を示しています。 <!D