CSS로 취소선 스타일을 설정하는 방법은 무엇입니까? (자세한 코드 설명)-CSS 튜토리얼-php.cn

CSS로 취소선 스타일을 설정하는 방법은 무엇입니까? (자세한 코드 설명)

藏色散人

풀어 주다： 2018-10-08 15:07:51

원래의

20642명이 탐색했습니다.

이 글에서는 주로 css 취소선의 설정 및 구현 방법을 소개합니다.

주요 쇼핑몰의 웹사이트를 둘러보면 제품의 원래 가격이 얼마만큼 표시되어 있는지, 현재 가격이 얼마나 변경되었는지 등 사용자가 알 수 있도록 제품 프로모션에 어느 정도 효과가 있을 것이라고 믿습니다. 보다 직관적인 격차를 찾으려면 일반적으로 원래 가격에 눈에 띄는 취소선을 추가합니다!

물론, 쇼핑몰 웹사이트, 일반 웹사이트, 포럼 사이트에 나타나는 이 효과 외에도 웹사이트 콘텐츠를 더욱 아름답고 간결하게 표시하기 위해 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 Strikethrough는 아래와 같은 효과를 얻습니다.

CSS로 취소선 스타일을 설정하는 방법은 무엇입니까? (자세한 코드 설명)

여기서는 CSS의 text-design: line-through 스타일 속성을 주로 사용합니다.

우선, text-장식 속성은 텍스트에 추가되는 장식을 지정한다는 점을 모두가 알아야 합니다.

line-through 값은 텍스트 아래를 통과하는 선을 정의하는 것을 의미합니다.

위 코드에서는 text-꾸밈: line-through;와 style을 결합하여 텍스트 글꼴 색상을 정의하여 다양한 취소선 및 텍스트 색상의 스타일 효과를 얻었습니다!

마찬가지로 원래 가격과 현재 가격의 관련 효과도 쉽게 얻을 수 있습니다.

<!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로 취소선 스타일을 설정하는 방법은 무엇입니까? (자세한 코드 설명)