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

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

페이지에 소개된 텍스트 및 링크에 대한 밑줄을 피할 수 있는 방법이 (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과 혼합하는 것은 좋은 생각이 아닙니다. 특히 사용할 때는 더욱 그렇습니다.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-decorations.

a {
  text-decoration: none;
}

저는 웹 프린팅에서 이 문제를 해결해 왔습니다.결과 확인.

a {
  text-decoration: none !important;
}

효과가 있어요!

앵커 링크에서만 밑줄을 제거하려면 최적의 옵션 -

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

이렇게 하면 밑줄이 제거됩니다.

또한 다른 스타일을 조작할 때도 다음과 같은 유사한 구문을 사용할 수 있습니다.

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

도움이 되길 바랍니다!

추신- 제가 처음으로 한 대답입니다!

일부 렌더링 UI CSS에 의해 재정의되는 경우가 있습니다. 사용하기에 더 좋습니다.

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

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

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

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

그래서: 밑줄은 밑줄과 혼동하지 않는 것입니다.

추가된 스타일링 없이 간단하게 앵커 태그를 링크로 사용하려는 경우(예: 호버의 밑줄 또는 파란색) 추가class="no-style"앵커 태그에 연결합니다.그런 다음 전역 스타일시트에서 "no-style" 클래스를 만듭니다.

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

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

1. 이 태그는 모든 앵커 태그에 영향을 주지 않으며, 단지 "노 스타일" 클래스가 추가된 앵커 태그에만 영향을 미칩니다.
2. 텍스트 장식을 아무 것도 설정하지 않을 수 있는 다른 모든 스타일을 덮어씁니다.

원래 게시물의 제목/내용에서 유추할 수 있듯이 문제에 대한 또 다른 관점을 제공하기 위해:

HTML에서 로그 밑줄을 만드는 것을 추적하려면 디버깅 도구를 사용합니다.다음 중에서 선택할 수 있는 항목이 많습니다.

Firefox의 경우 FireBug가 있습니다.

Opera의 경우 Dragonfly(도구->고급 메뉴에서 "개발자 도구"로 불리며 기본적으로 Opera와 함께 제공됨);

IE의 경우 "Internet Explorer Developer Toolbar"가 있는데, 이 툴바는 IE7 이하용으로 별도의 다운로드가 가능하며 IE8에 통합되어 있습니다(F12 히트).

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

CSS 속성을 사용합니다.

text-decoration:none;

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

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

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

또는 웹 페이지의 스타일 태그에 CSS를 동봉합니다.

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

링크 외에 언더라인을 사용하는 것을 권장하지 않습니다. 언더라인은 일반적으로 클릭 가능한 것으로 간주됩니다.클릭할 수 없는 경우 밑줄을 긋지 마십시오.

CSS 기초는 w3 학교에서 받을 수 있습니다.

<u>

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

사용...

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

CSS 파일에...

span.underline
{
    text-decoration: underline;
}  

아니면 그냥...

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

밑줄은 텍스트 데코레이션이라는 CSS 속성에 의해 제거될 수 있습니다.

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

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

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

링크를 설계하는 데 도움이 될 다른 많은 텍스트 장식 값이 있습니다.

언급URL : https://stackoverflow.com/questions/2041388/how-to-remove-the-underline-for-anchorslinks