앵커 (링크)의 밑줄을 제거하는 방법?

페이지에 소개 된 텍스트와 링크의 밑줄을 피하기 위해 어쨌든 (CSS에) 있습니까?

CSS를 사용하십시오. 그러면 밑줄 a과 u요소가 제거됩니다 .

a, u {
    text-decoration: none;
}

때때로 요소의 다른 스타일을 재정의해야 할 경우 !important규칙 에서 수정자를 사용할 수 있습니다 .

a {
    text-decoration: none !important;
}

CSS는

text-decoration: none;

과

text-decoration: underline;

그러면 앵커 태그가 존재하는 밑줄뿐만 아니라 색상이 제거됩니다.

 a {
     text-decoration: none ;
  }
a:hover
  {
    color:white;
    text-decoration:none;
    cursor:pointer;
   }

가장 간단한 옵션은 다음과 같습니다.

<a style="text-decoration: none">No underline</a>

물론, CSS를 HTML (예 : 인라인 CSS)과 혼합하는 것은 특히 a모든 곳에서 태그를 사용할 때 좋은 생각이 아닙니다 .
그렇기 때문에이를 스타일 시트에 추가하는 것이 좋습니다.

a {
    text-decoration: none;
}

또는 JS 파일 의이 코드조차도 :

var els = document.getElementsByTagName('a');

for (var el = 0; el < els.length; el++) {
    els[el].style["text-decoration"] = "none";
}

을 제거하려면 CSS를 사용하십시오 text-decoration.

a {
    text-decoration: none;
}

앵커 링크에서만 밑줄을 제거하려는 경우 가장 적합한 옵션-

    #content a{
                text-decoration-line:none;
                }

밑줄이 제거됩니다.

또한 비슷한 스타일을 사용하여 다른 스타일을 조작 할 수도 있습니다.

                text-decoration: none;
                text-decoration-color: blue;
                text-decoration-skip: spaces;
                text-decoration-style: dotted;

도움이 되었기를 바랍니다!

PS- 이것은 나의 첫 번째 답변입니다!

내 경우에는 앵커에 의한 호버 효과에 대한 규칙이 다음과 같이있었습니다.

#content a:hover{
border-bottom: 1px solid #333;
}

물론 text-decoration:none;이 상황에서 도움이되지 못했습니다. 그리고 나는 그것을 발견 할 때까지 많은 시간을 보냅니다.

따라서 밑줄을 테두리 아래쪽과 혼동해서는 안됩니다.

언젠가는 일부 렌더링 UI CSS에 의해 재정의됩니다. 사용하는 것이 좋습니다 :

a.className {
    text-decoration: none !important;
}

문제에 대한 다른 관점을 제공하려면 (원본 게시물의 제목 / 내용에서 유추 한 바와 같이) :

HTML에서 불량 밑줄을 만드는 내용을 추적하려면 디버깅 도구를 사용하십시오. 선택할 수있는 많은 것들이 있습니다 :

Firefox에는 FireBug가 있습니다.

Opera의 경우 Dragonfly (도구-> 고급 메뉴에서 "개발자 도구"라고 함)가 기본적으로 Opera와 함께 제공됩니다.

IE의 경우 "Internet Explorer 개발자 도구 모음"이 있습니다.이 도구 모음은 IE7 이하용으로 별도로 다운로드되며 IE8 (F12)에 통합되어 있습니다.

Safari, Chrome 및 기타 소수 브라우저에 대해서는 전혀 모르지만 어쨌든 컴퓨터에 적어도 세 가지 중 하나가 있어야합니다.

앵커 스타일을 추가 된 스타일 (예 : 호버의 밑줄 또는 파란색)없이 링크로 사용하려면 앵커 태그에 추가하십시오 class="no-style". 그런 다음 글로벌 스타일 시트에서 "no-style"클래스를 작성하십시오.

.no-style { text-decoration: none !important; }

이것은 두 가지 장점이 있습니다.

1. 모든 앵커 태그에는 영향을 미치지 않으며 "no-style"클래스가 추가 된 앵커 태그에만 영향을 미칩니다.
2. 그렇지 않으면 텍스트 장식을 없음으로 설정하지 못하게 할 수있는 다른 스타일을 재정의합니다.

링크 태그를 사용하여 스타일 시트를 포함시키는 것을 잊지 마십시오

http://www.w3schools.com/TAGS/tag_link.asp

또는 웹 페이지의 스타일 태그 안에 CSS를 넣습니다.

<style>
  a { text-decoration:none; }
  p { text-decoration:underline; }
</style>

링크 이외의 항목에는 밑줄을 사용하지 않는 것이 좋습니다. 밑줄은 일반적으로 클릭 가능한 것으로 간주됩니다. 클릭 할 수 없으면 밑줄을 긋지 마십시오.

CSS 기본 사항은 w3schools에서 선택할 수 있습니다

<u>

더 이상 사용되지 않는 태그입니다.

사용하다...

<span class="underline">My text</span>

포함하는 CSS 파일로 ...

span.underline
{
    text-decoration: underline;
}  

아니면 그냥 ...

<span style="text-decoration:underline">My Text</span>

CSS 속성을 사용하십시오.

text-decoration:none;

링크에서 밑줄을 제거합니다.

밑줄은 텍스트 장식이라는 CSS 속성으로 제거 할 수 있습니다.

<style>
a{
text-decoration:none;
}
</style>

a 이외의 요소에있는 텍스트의 밑줄을 제거 하려면 다음 구문을 사용해야합니다.

<style>
element-name{
text-decoration:none;
}
</style>

링크를 디자인하는 데 도움이되는 다른 텍스트 장식 값 이 많이 있습니다.

웹 인쇄 에서이 문제로 어려움을 겪고 해결했습니다. 확인 된 결과.

a {
    text-decoration: none !important;
}

효과가있다!.