css 링크 스타일 정의하기

말자 전체게시물 작성일13-04-24 23:16 조회3,184회

본문

1.링크 스타일 의미와 설명

a:link {color:#fff;}        // 링크가 걸린 스타일 정의

a:visited  {color:#fff;}  // 방문한 링크

a:hover {color:#fff;}     // 마우스 올렸을 때

a:active {color:#fff;}    //링크를 클릭한 순간

 

위 스타일을 정의하는 순서도 중요한데

a:link와 a:visited 앞에 a:hover를 넣으면, 마우스를 올려도 마우스의 색상이 변하지 않는다

코드에 나오는 순서대로 적용이 되고, 맨 마지막에 오는 것이 우선시 됨

 

2.클레스를 지정해서 해당 클레스의 링크만 스타일 적용하기

<a  harf="http://partnership.co.kr" class="malza">파트너쉽</a>

 

a.malza:link {color:#fff;}

a.malza:visited {color:#fff;}

a.malza:hover{color:#fff;}

a.malza:active {color:#fff;}

 

-----------------------------------------------------------a를 떼어내도 상관없음

-----------------------------------------------------------

.malza:link {color:#fff;}

.malza:visited {color:#fff;}

.malza:hover{color:#fff;}

.malza:active {color:#fff;}

2-1. id나 class에 해당하는 하위 클래스에 링크 스타일 정의

-----------------------------------------------------------

#malza {color:#fff;}

.malza {color:#fff;}

-----------------------------------------------------------

#malza a:link {color:#fff;}

#malza a:visited {color:#fff;}

#malza a:hover{color:#fff;}

#malza a:active {color:#fff;}


 

css전체에 일괄 적용시

<style type="text/css">

a:link{color:#0000FF}                       //마우스 올렸을 때
a:visited{color:#8B0000;}                 //링크 한번이라도 클릭했을 때
a:hover{text-decoration:underline;}   //클릭했을 때

</style>

 

 

어떠한 스타일에 개별적으로 링크속성 주고자 할 때

<style type="text/css">

#submenu ul li a:link{color:#336600; text-decoration:underline;} //submenu라는 아이디에 속하는 ul -li에 속성을 개별설정

</style>

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 1 비추천 0

Css + Html

113개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
113 부트스트랩 부트스트랩 모달 (modal) 클릭시 오른쪽에 생기는 여백 17px없애기 무료아이콘 전체게시물 10-12 99 추천: 1
112 css 에어콘 출판사 메인 콘텐츠 레이아웃 관련링크 무료아이콘 전체게시물 09-13 113 추천: 1
111 css float 중앙 정렬 시키기 무료아이콘 전체게시물 09-11 141 추천: 1
110 css 모바일에서 입력창 input 클릭시 확대되는 거 막기 관련링크 무료아이콘 전체게시물 09-04 125 추천: 1
109 jQuery/java 다양한 사이드바 소스 사이드바 플러그인 관련링크 무료아이콘 전체게시물 09-02 127 추천: 1
108 css 크롬 노란 input 배경 없애기 무료아이콘 전체게시물 08-27 167 추천: 1
107 css input에 입력폼에 글자 미리 넣어두기 무료아이콘 전체게시물 08-25 108 추천: 1
106 css 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 무료아이콘 전체게시물 08-17 388 추천: 1
105 etc 브라우저 별 CSS 핵 관련링크 무료아이콘 전체게시물 08-09 131 추천: 1
104 css 목록(리스트)형식의 css에 텍스트 블릿 사용하기 무료아이콘 전체게시물 08-08 93 추천: 1
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 댓글1 무료아이콘 전체게시물 07-17 199 추천: 1
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1476 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 1765 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 1118 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 관련링크 무료아이콘 전체게시물 01-17 4443 추천: 15
게시물 검색