CSS를 사용하여 링크 스타일을 조작하는 방법

이 글에서는 CSS를 통해 하이퍼링크 스타일을 제어하는 ​​방법을 자세히 설명합니다. 하이퍼링크에 밑줄이 표시되는지 여부, 하이퍼링크 텍스트의 색상 및 기타 스타일을 포함하여 텍스트 유형 하이퍼링크에 대해 주로 이야기합니다.

하이퍼링크란 무엇인가요?

하이퍼링크는 일반적으로 웹페이지에서 대상으로의 연결 관계를 나타냅니다. 이 대상은 다른 웹페이지일 수도 있고, 동일한 웹페이지의 다른 위치일 수도 있고, 사진, 이메일 주소, 파일 또는 파일일 수도 있습니다. 심지어 응용 프로그램입니다. 웹 페이지의 하이퍼링크에 사용되는 개체는 텍스트일 수도 있고 이미지일 수도 있습니다. 뷰어가 링크된 텍스트 또는 이미지를 클릭하면 링크 대상이 브라우저에 표시되고 대상 유형에 따라 열리거나 실행됩니다.

하이퍼링크

<a href="http://www.php.cn/" target="_blank" title="关于div css的网站">DIV+CSS</a>

의 코드는 다음과 같이 분석됩니다.

href 뒤에 링크 주소가 오고 대상 웹 사이트 주소는 http://www.php.cn/

target

_blank입니다. 새 창에서 링크

_parent - 상위 양식에서 링크 열기

_self - 현재 양식에서 링크 열기, 이것이 기본값입니다.

_top - 현재 양식에서 링크를 열고 현재 양식 전체를 바꿉니다. (프레임 페이지)

제목 뒤에는 하이퍼링크에 연결되는 URL에 대한 간략한 설명인 링크 대상 설명이 옵니다. 또는 제목

CSS에서 하이퍼링크 스타일을 제어할 수 있습니다. - css link스타일은 다음과 같습니다.

a:link는 하이퍼링크의 초기 상태입니다.

a: Hover는 마우스를 놓았을 때 호버하는 상태입니다.

a: active는 마우스 클릭 상태입니다.

a:visited는 상태입니다. 방문 후

1. 일반적으로 전체 사이트에 대한 하이퍼링크 스타일 지정 방법

a{color:#333;text-꾸밈:none } //전체 사이트에 대한 링크가 포함된 텍스트의 색상 스타일; 사이트는 color:#333; 바로 밑줄이 없습니다 text-dration:none;

a:hover {color:#CC3300;text-꾸밈:underline;}//하이퍼링크 및 텍스트 색상 스타일에 마우스를 놓습니다. color:#CC3300;으로 변경하고 텍스트 링크에 ​​밑줄을 긋습니다. text-꾸밈:underline;

2. 링크를 통해 클래스 제어 하이퍼링크 스타일 CSS 방법

케이스 하이퍼링크 코드CSS

해당 CSS 코드

a.yangshi{color:#333;text-꾸밈:none; }

a.yangshi:hover {color:#CC3300 ;text-꾸밈:밑줄;}

이 설정을 통해 링크 내 CSS 클래스 이름을 제어할 수 있습니다. "양시" 하이퍼링크 스타일

3 CSS 클래스의 CSS 스타일을 통해 하이퍼링크 스타일을 제어합니다. 하이퍼링크 외부의 상위에 해당

Case 하이퍼링크 코드

CSS

해당 CSS 코드

.yangshi a{color:#333;text-장식:none; }

.yangshi a:hover {color:#CC3300;text-장식:underline;}

여기서 주목할 점은 무엇인가요? a.yangshi와 .yangshi a의 스타일 CSS 코드의 차이점은 다음과 같습니다.

관련 읽기:

html이 왜곡되는 이유와 해결 방법

Div와 CSS를 배우는 방법

CSS에서 위치를 사용하는 방법

위 내용은 CSS를 사용하여 링크 스타일을 조작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!