CSS テキスト装飾プロパティの探索: text-decoration と text-transform

CSS テキスト変更プロパティの探索: text-decoration と text-transform

Web デザインでは、視覚効果を向上させるためにテキストを変更することが必要になることがよくあります。 CSS はテキスト装飾を実装するためのプロパティをいくつか提供しており、そのうちの 2 つは一般的に使用されるプロパティです: text-decoration と text-transform。この記事では、これら 2 つのプロパティの使用法を説明し、具体的なコード例を示します。

1. text-decoration 属性

text-decoration 属性は、下線、下線、取り消し線などの装飾線をテキストに追加するために使用されます。一般的に使用されるテキスト装飾値の一部を次に示します。

1. underline: テキストに下線を追加します。
2. line-through: テキストに下線を追加します。
3. overline: 下線を追加します。テキストにオーバーラインをテキストに追加します。
4. none: テキスト変更行を削除します。

以下は具体的なコード例です。

/* 给文本添加下划线 */
.text-underline {
  text-decoration: underline;
}

/* 给文本添加中划线 */
.text-line-through {
  text-decoration: line-through;
}

/* 给文本添加上划线 */
.text-overline {
  text-decoration: overline;
}

/* 移除文本修饰线 */
.text-no-decoration {
  text-decoration: none;
}

適切なテキスト装飾を選択できます。値を指定し、対応するクラスを HTML 要素に追加して、対応する装飾効果を適用します。

2. Text-transform 属性

text-transform 属性は、テキストの大文字と小文字を変更するために使用されます。よく使用されるテキスト変換値は次のとおりです。

1. uppercase: テキストを大文字に変換します。
2. lowercase: テキストを小文字に変換します。
3. capitalize: テキストを大文字に変換します。 Convertテキストの各単語の最初の文字を大文字に変換します。
4. none: テキストの形式を変更しないでください。

次は、具体的なコード例です。

/* 将文本转换为大写形式 */
.text-uppercase {
  text-transform: uppercase;
}

/* 将文本转换为小写形式 */
.text-lowercase {
  text-transform: lowercase;
}

/* 将文本的每个单词首字母转换为大写形式 */
.text-capitalize {
  text-transform: capitalize;
}

/* 保持文本形式不变 */
.text-no-transform {
  text-transform: none;
}

Youテキストの大文字と小文字を変更するには、適切な text-transform 値を選択し、対応するクラスを HTML 要素に追加する必要があります。

要約すると、text-decoration プロパティと text-transform プロパティは、CSS で一般的に使用されるテキスト変更プロパティです。これら 2 つの属性を合理的に使用することで、さまざまなテキスト効果を実現し、Web デザインを美しくすることができます。この記事の例が役に立ち、フロントエンド開発でこれら 2 つの属性をより柔軟に使用できるようになることを願っています。

以上がCSS テキスト装飾プロパティの探索: text-decoration と text-transformの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。