CSSで取り消し線のスタイルを設定するにはどうすればよいですか? (詳しいコード説明)-CSSチュートリアル-php.cn

CSSで取り消し線のスタイルを設定するにはどうすればよいですか? (詳しいコード説明)

藏色散人

リリース： 2018-10-08 15:07:51

オリジナル

20642 人が閲覧しました

この記事ではcss取り消し線の設定と実装方法を中心に紹介します。

大手ショッピングモールのホームページを閲覧すると、商品の元の価格がいくらで、現在の価格がいくらに変更されるかなど、商品のプロモーションに効果があることがわかると思います。ユーザーがより直感的なギャップを見つけるために、通常は元の価格に目立つ取り消し線が追加されます。

もちろん、モールのWebサイトや弊社の通常のWebサイト、フォーラムサイトなどでもこのエフェクトを表示するだけでなく、Webサイトのコンテンツをより美しく、簡潔に表示するために、CSSを使用して取り消し線効果を実現することもできます。！

では、CSS を使用して取り消し線スタイルを実現するにはどうすればよいでしょうか?

以下では、css 取り消し線 の実装方法を簡単なコード例を通して詳しく説明します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css删除线</title>
    <style>
        .demo{
          text-decoration:line-through;
            color: red;
      }
        span{color:black;}
    </style>
</head>
<body>
    <div>
        <p><span class="demo"><span>这里有一个删除线</span></span></p>
       </div>
</body>
</html>

ログイン後にコピー

ブラウザからアクセスすると、css取り消し線で以下のような効果が得られます。

CSSで取り消し線のスタイルを設定するにはどうすればよいですか? (詳しいコード説明)

cssの##が主に使用されます。 #text-decoration:line-throughStyle 属性。

まず、text-decoration 属性がテキストに追加される装飾を指定することを誰もが知っておく必要があります。

値 line-through は、テキストの下を通過する線を定義することを意味します。

上記のコードでは、

text-decoration: line-through; と スタイルを組み合わせて、取り消し線とスタイル効果を実現するテキストのフォントの色を定義します。文字の色が違う！

同様に、元の価格と現在の価格の関連効果も簡単に実現できます:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css删除线</title>
    <style>
        .demo{
          text-decoration:line-through;
            color: red;
      }
        span{color:black;}
    </style>
</head>
<body>
    <div>
        <p>原价：<span class="demo"><span>500元</span></span><br>
        现价：150元
        </p>
       </div>
</body>
</html>

ログイン後にコピー

以下に示すように:

CSSで取り消し線のスタイルを設定するにはどうすればよいですか? (詳しいコード説明)