ドキュメントまたはテキストに下線を引くことは、常に簡単であると考えられています。しかし、ウェブサイトの場合を考えると、それはまだ簡単ですか？私たちのほとんどは「はい」と言うでしょうが、いくつかのカスタムデザインを含む水平線を作成すると、この単純な作業が面倒になります。次の方法でCSSを使用したテキスト装飾の旅を始めましょう。
テキストデコレーションとは何ですか？
テキストの装飾線の外観を設定します。これは、次の略記プロパティです。
- text-decoration-line
- テキスト-装飾-色
- テキスト装飾スタイル
これは、ロングハンドteを表す1つ以上のスペースで区切られた値として指定されます。xt-装飾プロパティ。
構文：
テキスト装飾：|| ||
どこ、
HTMLでネストされたテーブルを作成する方法
text-decoration-line： 使用する装飾の種類を設定するために使用されます。下線、上線、およびラインスルー。
テキスト-装飾-色：装飾の色を設定するために使用されます。
テキスト装飾スタイル： 次のような線のスタイルを設定するために使用されます実線、波状、点線、破線、二重
CSSのテキスト装飾の種類
- オーバーライン：
#decoration {text-decoration：overline} 
- ラインスルー：
#decoration {text-decoration：line-through}- 下線：
#decoration {text-decoration：underline}- 組み合わせ：
#decoration {text-decoration：underline line-through overline}出力：
CSSを使用したテキスト装飾：コード
コード：
CSSコード：
#overline {text-decoration：wavy overline lime} #underover {text-decoration：dashed underline overline} #dotted {text-decoration：underline overline doted red} #wavy {text-decoration：line-through wavy}出力：
テキスト装飾スキップ
text-decoration-skipと呼ばれるプロパティは、テキストに上線、線引き、下線を付ける場合にも使用できます。それはテキストを飾るのに役立ちます。アセンダーとディセンダーを通過するときに上線と下線がどのように描画されるかを指定するだけです。
#decoration {text-decoration-skip：ink}テキスト装飾スキップで使用できる値は次のとおりです。
オブジェクト ： （デフォルト）lineは、画像やインラインブロック要素などのインラインオブジェクトをスキップします。
無し ： 線はすべてを横切ります。
スペース ： 装飾行は、スペース、単語区切り文字、および文字間隔または単語スペースで設定されたスペースをスキップします。
インク ： デコレーションラインは、グリフ、ディセンダー、またはアセンダーをスキップします。
エッジ ： 装飾線は、コンテンツの開始エッジの少し後に開始し、コンテンツの終了エッジの少し前に終了します。
ボックス装飾 ： 装飾線は、継承されたマージン、境界線、およびパディングをスキップします。
このプロパティはどのブラウザでもサポートされていないため、デモはありませんが、text-decoration-skipが実装された後の各値の外観の例を以下の画像に示します。
これで、CSSブログを使用したこのテキスト装飾の終わりに到達しました。このトピックに関して質問がある場合は、下にコメントを残してください。折り返しご連絡いたします。
私たちをチェックしてください インストラクター主導のライブトレーニングと実際のプロジェクト経験が付属しています。このトレーニングにより、バックエンドおよびフロントエンドのWebテクノロジーを操作するスキルを習得できます。これには、Web開発、jQuery、Angular、NodeJS、ExpressJS、およびMongoDBに関するトレーニングが含まれます。
Pythonでパワーを行う方法
質問がありますか？ 「CSSを使ったテキストデコレーション」ブログのコメント欄にその旨をお伝えいただければ、折り返しご連絡いたします。