<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS의 의사 클래스</title>
<style type="text/css">
div {
background-color:papayawhip;
width:200px; height:50px;
}
div:hover {
background-color:rgb(253, 227, 169);
border:1px solid red;
}
div:active{
background-color:palevioletred;
border:1px solid black;
font-size : 30px;
}
a:link, a:visited {
color:black;
text-decoration:none; /*밑줄 없애기*/
}
a:hover, a:active {
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
보통글자<br>
<a href="사이트 주소">사이트명 </a><br><br>
<a href="사이트 주소">사이트명</a><br><br>
<div>안녕하세요</div>
</body>
</html>
의사 클래스
클래스가 정이된 것처럼 간주되어 처리되는 것
셀렉터:의사클래스명 { 스타일 정의 }
의사 클래스 명
셀렉터:link ==> 방문한 내역이 없는 링크 걸린 부분에 스타일을 적용한다.
셀렉터:visited ==> 방문한 내역이 있는 링크 걸린 부분에 스타일을 적용한다.
셀렉터:hover ==> '셀렉터'에 해당하는 요소에 마우스 커서가 놓였을 때 스타일을 적용한다.
셀렉터:active ==> '셀렉터'에 해당하는 요소를 클릭하는 순간 스타일을 적용한다.
그외 text-decoration의 기능으로 밑줄을 없애거나 밑줄을 생성할 수 있다.
text-decoration: none; / underline;
'HtmlCss > CSS' 카테고리의 다른 글
| Css - background (0) | 2019.05.25 |
|---|---|
| Css- Block요소,Display (0) | 2019.05.25 |
| CSS - Font 명령어 (0) | 2019.05.25 |
| CSS-셀렉터 (0) | 2019.05.25 |
| CSS (0) | 2019.05.25 |
