CSS는 텍스트와 다른 색을 사용합니까?

itgroup 2023. 10. 5. 21:30

CSS는 텍스트와 다른 색을 사용합니까?

HTML이 .del,strike, 아니면s텍스트 스트라이크 스루 효과에 모두 사용할 수 있습니다.예:

<del>del</del>

....gives: ~~del~~

<strike>strike</strike> and <s>strike</s>

....gives: ~~일격을 가하다~~ ~~그리고~~ 파업을

CSStext-decoration가 있는 line-through유사하게 사용할 수 있습니다.암호는...

<span style='text-decoration:line-through'>
    text-decoration:line-through
</span>

...또한 다음과 같이 렌더링됩니다. ~~텍스트 장식:라인스루~~

그러나 줄무늬 선은 일반적으로 텍스트와 같은 색입니다.

CSS를 사용하여 라인을 다른 색상으로 만들 수 있습니까?

네, 랩핑 요소를 추가해서요.원하는 선 통과 색상을 외부 요소에 할당한 다음, 원하는 텍스트 색상을 내부 요소에 할당합니다.예를 들어,

<span style='color:red;text-decoration:line-through'>
  <span style='color:black'>black with red strikethrough</span>
</span>

...아니면...

<strike style='color:red'>
  <span style='color:black'>black with red strikethrough<span>
</strike>

:<strike>는 HTML4에서 더 이상 사용되지 않는 것으로 간주됩니다(W3.org 참조).권장되는 접근 방식은<del>된 경우n를 <s>htext-decoration여기 첫번째 예와 같은 CSS.)

를 다음과 같이, 에서()에서)<HEAD>을 을 사용해야 합니다.(더:hover수 pseudo-class는inline STYLE다.예를 들어,

<head>
  <style>
    a.redStrikeHover:hover {
      color:red;
      text-decoration:line-through;
    }
  </style>
</head>
<body>
  <a href='#' class='redStrikeHover'>
    <span style='color:black'>hover me</span>
  </a>
</body>

(IE7 seems to require some href be set on the <a> before :hover has an effect; FF and WebKit-based browsers do not.)

2016년 2월 현재 CSS 3은 아래와 같은 지원을 제공하고 있습니다.다음은 가격 할인이 포함된 WooCommerce 단일 제품 페이지의 일부분입니다.

/*Price before discount on single product page*/
body.single-product .price del .amount {
color:           hsl(0, 90%, 65%);
font-size:       15px;
text-decoration: line-through;
/*noinspection CssOverwrittenProperties*/
text-decoration: white double line-through; /* Ignored in CSS1/CSS2 UAs */
}

결과:

CSS 3은 속성을 사용하여 직접 지원할 가능성이 높습니다.특히:

text-decoration-color은 CSS줄,합니다에 지정된 또는 때 합니다.text-decoration-line은 다른 보다 이러한 하는 데 이 방법은 다른 HTML 요소의 조합을 사용하는 것보다 이러한 텍스트 장식을 색칠하는 데 선호되는 방법입니다.

또한 CSS 3 초안 사양을 참조하십시오.

를 를 지정해야 .-moz-text-decoration-color합니다. ()-moz- 성), 호환성).

했습니다를 써 .:after요소와 그 위에 장식된 하나의 테두리.CSS 변환을 사용하여 사선으로 회전시킬 수도 있습니다.결과: 순수 CSS, 추가 HTML 요소 없음!단점: 여러 줄에 걸쳐 겹치지는 않지만, IMO에서는 큰 텍스트 블록에 스트라이크스루를 사용해서는 안 됩니다.

s,
strike {
  text-decoration: none;
  /*we're replacing the default line-through*/
  position: relative;
  display: inline-block;
  /* keeps it from wrapping across multiple lines */
}

s:after,
strike:after {
  content: "";
  /* required property */
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 2px solid red;
  height: 45%;
  /* adjust as necessary, depending on line thickness */
  /* or use calc() if you don't need to support IE8: */
  height: calc(50% - 1px);
  /* 1px = half the line thickness */
  width: 100%;
  transform: rotateZ(-4deg);
}

<p>Here comes some <strike>strike-through</strike> text!</p>

이 CSS3를 사용하면 속성을 보다 쉽게 연결할 수 있고 잘 작동할 수 있습니다.

span{
    text-decoration: line-through;
    text-decoration-color: red;
}

인터넷 익스플로러\edge에 관심이 없다면, 스트라이크 스루를 위해 다른 색상을 얻는 가장 간단한 방법은 CSS 속성을 사용하는 것일 것입니다: 텍스트 데코레이션-컬러와 텍스트 데코레이션:라인 스루;

.yourClass {
    text-decoration: line-through !important;
    text-decoration-color: red !important;
}

-- Edge에서 작동하지 않음\인터넷 익스플로러

@gojomo에 추가하면 사용할 수 있습니다.:after추가 요소에 대한 의사 요소입니다.유일한 주의 사항은 당신이 당신의 인터넷 주소를innerText일순간에data-textCSS가 제한되어 있으므로 속성content기능들.

s {
  color: red;
  text-align: -1000em;
  overflow: hidden;
}
s:after {
  color: black;
  content: attr(data-text);
}

<s data-text="Strikethrough">Strikethrough</s>

여기에 그라디언트를 사용하여 선을 위조하는 접근법이 있습니다.멀티 라인 스트라이크와 함께 작동하며 추가적인 DOM 요소가 필요 없습니다.하지만 배경 그라데이션이라 문자 뒤에...

del, strike {
  text-decoration: none;
  line-height: 1.4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.63em, transparent), color-stop(0.63em, #ff0000), color-stop(0.7em, #ff0000), color-stop(0.7em, transparent), to(transparent));
  background-image: -webkit-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  background-image: -o-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  background-image: linear-gradient(to bottom, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  -webkit-background-size: 1.4em 1.4em;
  background-size: 1.4em 1.4em;
  background-repeat: repeat;
}

fiddle 참조: http://jsfiddle.net/YSvaY/

그라디언트 색상-스톱 및 배경 크기는 선 높이에 따라 다릅니다. (LESS를 사용하여 계산하고 이후 자동 수정기를 사용했습니다...)

여기 있습니다.

<style>body {color: #000;}</style>
<del>&nbsp;&nbsp;<span style="color:#999">facebook</span>&nbsp;&nbsp;</del>

내 경험으로는.

<span style='color:red;text-decoration:line-through'>
    <span style='color:black'>black with red strikethrough</span>
</span>

최선의 선택이 아닙니다동료가 크로스 브라우저를 테스트하지 않고 이 방법을 사용하도록 했기 때문에 파이어폭스에 문제가 생겨 다시 가서 수정해야 했습니다.개인적으로 권장하는 것은 :after selector를 사용하여 strike through를 생성하는 것입니다.이렇게 하면 스타일 충돌 없이 IE8로 돌아갈 수 있을 뿐만 아니라 다른 모든 브라우저에서 견고한 스타일을 유지할 수 있습니다.

또한 마크업이 적고, 제가 생각하는 것과 거의 같은 양의 스타일링을 만들어냅니다.

따라서 다른 사람이 비슷한 문제에 부딪히면 다음과 같은 도움이 되기를 바랍니다.

.lineThrough {
    position: relative;

   &:after {
      content: "  ";
      display: block;
      width: 60px;
      height: 1px;
      background: red;
      position: absolute;
      top: 49%;
      left: 50%;
      margin-left: -30px;
   }
}

당연히 변환: 마진 대신 번역을 사용할 수 있지만, 이 예는 IE8로 돌아가는 것입니다.

Blazemoner의 답변(위 또는 아래)은 투표를 해야 합니다. 하지만 포인트가 부족합니다.

20px 너비의 CSS 라운드 버튼에 회색 막대를 추가하여 "사용할 수 없음"을 표시하고 Blazemoner의 CSS를 조정했습니다.

.round_btn:after {
    content:"";    /* required property */
    position: absolute;
    top: 6px;
    left: -1px;
    border-top: 6px solid rgba(170,170,170,0.65);
    height: 6px;
    width: 19px;
}

단일 속성 솔루션은 다음과 같습니다.

.className {
    text-decoration: line-through red;
};

라인별 특성을 통해 색상을 정의합니다.

누군가에게 도움이 된다면 그냥 css 속성을 사용할 수 있습니다.

text-decoration-color: red;

업데이트만 하면 다음과 같은 작업을 쉽게 수행할 수 있습니다.

text-decoration: underline;
text-decoration: underline dotted;
text-decoration: underline dotted red;
text-decoration: green wavy underline;
text-decoration: underline overline #FF3028;

그런 다음 원하는 글꼴 색에 색을 추가합니다. ......

리액트 인라인 스타일링에 이를 적용할 때 나에게 분명하지 않았던 것을 추가하는 것:

<p style= {{textDecoration:'line-through red', color:'gray'}} >

캠멜 케이스는 '-'로 바꿔야 합니다.

이것은 다음의 내용을 렌더링합니다.

....

in color gray crossed out by a red line.

자세한 내용은 여기 설명서를 참조하십시오.

상위 됩니다(<del> - 이 제시하는 을 함) - <del>

http://jsfiddle.net/kpowz/vn9RC/

다음은 jQuery 구현 샘플입니다 – gojomo의 답변과 utype의 제안 덕분입니다(둘 다 +1).

$(function(){
  //===================================================================
  // Special price strike-out text
  // Usage:
  //   Normally:    <span class='price'>$59</span>
  //   On special:  <span class='price' special='$29'>$59</span>
  //===================================================================
  $(".price[special]").each(function() {
    var originalPrice = $(this).text();
    $(this).html('<strike><span>' + originalPrice +'</span></strike> ' + $(this).attr('special'))
           .removeAttr('special')
           .addClass('special');
  });
});

그것을 위한 CSS는

.price strike, .price.special { color: Red; }
.price strike span { color: Black; }

언급URL : https://stackoverflow.com/questions/1107551/css-strikethrough-different-color-from-text

'IT' 카테고리의 다른 글

COUNT(*)는 항상 결과를 반환합니까? (0)	2023.10.05
호출 집합 CompoundDrawables()에 CompoundDrawables()가 표시되지 않습니다. (0)	2023.10.05
특정 페이지 템플릿에 add_filter를 사용하려면 어떻게 해야 합니까? (0)	2023.10.05
MySql 타임스탬프 열을 PHP의 현재 타임스탬프로 업데이트하는 방법은 무엇입니까? (0)	2023.09.25
스프링 컨트롤러의 범위 및 인스턴스 변수 (0)	2023.09.25

현재글CSS는 텍스트와 다른 색을 사용합니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

MongoDB, Python, sql-server, jQuery, MariaDB, reactjs, C, spring-boot, php, git, Ajax, Excel, JavaScript, Java, oracle, JSON, WordPress, powershell, AngularJS, MySQL,

Today :
Yesterday :

itgroup