32일차//[css] HTML A tag //링크의 글자색(font color on text link)을 지정하는 방법

HTML A tag : 링크의 글자색(font color on text link)을 지정하는 방법

<a href = "http://www.gogle.com">google page</a>

1. 링크를 걸어준다.

<style type="text/css">

a{
	text-decoration: none;

}

</style>

2. 생성된 링크에 줄이 보이지 않도록 한다( text-decoration : )

 

text-decoration

선으로 텍스트를 꾸밀 수 있게 해주는 속성.

• 기본값 : none
• 상속 : No
• 애니메이션 : No
• 버전 : CSS Level 1

문법

text-decoration: none | line-through | overline | underline | initial | inherit

• none : 선을 만들지 않습니다.
• line-through : 글자 중간에 선을 만듭니다.
• overline : 글자 위에 선을 만듭니다.
• underline : 글자 아래에 선을 만듭니다.
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

속성값을 여러개 사용하여 여러 선을 만들 수 있다.

 

<style type="text/css">

a{
	text-decoration: none;

}

</style>

아래와 같은 의사 클래스(pseudo-class)를 사용하여 링크에 다양한 스타일을 적용할 수 있다.

 

1. a:link 방문 전 링크 상태
2. a:visited 방문 후 링크 상태
3. a:hover 마우스 오버했을 때 링크 상태

4. a:active  클릭했을 때 링크 상태

 

스타일 적용 순서는 위 번호 순대로 하는 게 좋다.

 

<style type="text/css">

a:link{
	color: #ff0000;
}/* 방문하지 않았던 사이트 색 */

a:visited{
	color:#000000;
}/* 방문한 사이트 */

a:hover{

	color: red;
	/* background-color: #0000ff; */
	
	text-decoration: underline;
}

a:active{	
	color: red;
	background-color: blue;


}/*클릭했을때 */

</style>

a:hover{

	color: blue;
	/* background-color: #0000ff; */
	
	text-decoration: underline;
}

a:hover는 사용자가 링크에 마우스 커서를 올리면 설정한대로 변동된다.

a:active는 사용자가 클릭했을때.

 

커서를 올린 사진

style

<style type="text/css">

body{
	color: green;
	text-align: center;


}

h1{

	color: #ff0000;
	text-decoration: overline;
}

p{

	color: rgb(0,0,255);  /* 0~255 */
/* 	text-decoration: line-through; */
}

p.upper{
		text-transform: uppercase;

}

p.lower{
		text-transform: lowercase;
}
 /* 첫글자만 대문자 */
p.cap{
		text-transform: capitalize; 

}

p.setif{
	font-family: "Times New Roman";
	font-style: italic;
	font-size: 1.5em;
	color: green;

}

 

body

 

<h1>h1 tag</h1>
<p>여기는 p tag입니다</p>
<p class = "upper">Hello Css</p>
<p class = "lower">Hello Css</p>
<p class = "cap">hello Css</p>

<p class = "setif">Hello My World.Welcome</p>

<a href = "http://www.gogle.com">google page</a>