태그 사용 구성

웹사이트를 만들 때 정리한 a 태그를 활용하는 방법입니다. 다음에도 사용하기 쉽도록 정리했습니다.

1. 하이퍼링크 코드

DIV+CSS

는 다음과 같이 구문 분석됩니다.

target
_blank -- 새 창에서 링크 열기
_parent -- 상위 양식에서 링크 열기
_self -- 현재 양식에서 링크 열기, 이것이 기본값입니다. value
_top - - 현재 양식에서 링크를 열고 전체 현재 양식(프레임 페이지)을 바꿉니다.

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

CSS는 하이퍼링크 스타일을 제어할 수 있습니다.- CSS 링크 스타일은 다음과 같습니다.
a:link는 하이퍼링크의 초기 상태입니다.
a:hover는 하이퍼링크 위에 마우스를 올렸을 때의 상태입니다.
a:active는 마우스 클릭
a:visited는 방문 후 상태

II, 간단한 하이퍼링크 스타일

1 일반적으로 전체 사이트에 대한 하이퍼링크 스타일 지정 방법
a{color:#333;text-꾸밈:없음 } //전체 사이트에 대한 링크의 텍스트 색상 스타일은 color:#333 ; 즉시 밑줄이 없습니다. text-장식:none;
a:hover {color:#CC3300;text-장식:underline;}//마우스를 놓습니다. 하이퍼링크에서 텍스트 색상 스타일이 color:#CC3300; 및 텍스트 링크로 변경됩니다. Underline text-design:underline;

2. link
Case 하이퍼링크 코드CSS
해당 CSS 코드
a.yangshi{color:#333;text-꾸밈:none }
a.yangshi; :hover {color:#CC3300;text-꾸밈:underline;}
이렇게 하면 링크 내의 CSS 클래스에 있는 "yangshi"라는 하이퍼링크의 스타일을 제어할 수 있습니다.

3. 하이퍼링크 외부의 상위 CSS 클래스에 해당하는 CSS 스타일
Case 하이퍼링크 코드

CSS
해당 CSS 코드
.yangshi a{color:#333; text-꾸밈:none; }
.yangshi a:hover {color:#CC3300;text-꾸밈:underline;}

무엇이 가치가 있나요? 여기서 주목해야 할 점은 a.yangshi와 .yangshi a

3. 기본 이해

4가지 일반적인 의사 클래스의 기능과 설명 소개
1. 스타일 설정입니다. 액세스되기 전(클릭하지 않고 마우스를 전달하지 않은) 개체의 시트 속성입니다. 즉, html 콘텐츠의 초기 스타일은 앵커 텍스트 태그입니다.

2. a:hover

마우스가 호버링될 때, 즉 마우스가 방금 a 레이블을 통과하고 A 링크에 머물렀을 때 개체의 스타일 시트 속성을 설정합니다.

3. a:active

사용자가 활성화할 때(마우스 클릭과 놓기 사이에 발생하는 이벤트) A 객체의 스타일 시트 속성을 설정합니다. 즉, 왼쪽 마우스 버튼으로 html A 링크 개체를 클릭하는 것과 오른쪽 마우스 버튼을 놓는 것 사이의 짧은 스타일 효과입니다.

4. a:visited

링크 주소를 방문했을 때 방문한 객체의 스타일 시트 속성을 설정합니다. 즉, HTML 하이퍼링크 텍스트를 클릭하고 액세스한 후 CSS 스타일 효과입니다.

4. 애플리케이션 사용 사례

CSS A를 통해 하이퍼링크를 설정하고 CSS 스타일을 설정한 후 4가지 스타일 효과를 설정합니다. CSS 텍스트 스타일의 간단한 설정을 통해 CSS 앵커 텍스트 스타일을 알아보세요.

1. 케이스 CSS 코드

1. style>

2. .divcss5 a:link{ color:#F00}/* 링크는 기본적으로 빨간색입니다 */

3. . divcss5 a:hover{ color:#000}/* 마우스를 가리키면 검정색 */

4. .divcss5 a:active{ color:#03F}/* 마우스를 클릭하고 놓으면 파란색 */

5. .divcss5 a:visited{ color:#F0F}/* Visited is pink */

6. /* divcss5 개체 하이퍼링크 설정 스타일 */

7. style> 2. 케이스 HTML 코드

div

class=

"divcss5"> a href = "http://www.divcss5.com/shili/s57.shtml">CSS 스타일

a

>케이스

div>

3. 케이스 소프트웨어 스크린샷

4. 실제 브라우저 스타일 스크린샷

요약:
일반적으로 a:active 스타일 효과는 즉시 관찰할 수 없으므로 사용 시 설정할 필요가 없습니다. 동시에 하이퍼링크에는 기본적으로 자동으로 밑줄이 표시됩니다. 밑줄을 제거하거나 추가하려면 CSS 텍스트 장식을 설정할 수 있습니다.

　　　하이퍼링크 설정 배경 이미지 변경 효과 그림

위 내용은 태그 사용 구성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!