집 > 기사 > 웹 프론트엔드 > CSS를 사용하여 링크 스타일을 조작하는 방법

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

php中世界最好的语言원래의: 2017-11-22 13:45:382023검색

이 글에서는 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 방법

케이스 하이퍼링크 코드8248c0085ba6301a1b6c4984f4b0e39aCSS5db79b134e9f6b82c0b36e0489ee08ed

해당 CSS 코드

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

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

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

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

Case 하이퍼링크 코드0a9af51c14cdc756fef819e32a4a19aa0fb5dc1eb35f706b04f8b46adbfdc058CSS5db79b134e9f6b82c0b36e0489ee08ed5db79b134e9f6b82c0b36e0489ee08ed

해당 CSS 코드

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

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

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

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

관련 기사