HTML5-CSS(1)

<style>

태그명으로 찾기

     h1{

    color:red;

    }

   

아이디로 찾기

#p2{

border-style: dotted;

border-width: 2px;

border-color: blue;

}

클래스(분류)로 찾기

.desc{

background-color: yellow;

}

.show{

border: solid 3px green;

background-color: maroon;

}

p.desc{

background-color:yellow;

}

#p1.show{

border:solid 3px green;

}

여러개 선택

h1,h2{

border: solid 3px green;

}

바로 밑에 자식(child) - (>) ( (id=”d1” 바로 아래의 <em>태그를 적용)

#d1 > em {

border : solid 3px green;

}

자손 엘리먼트 선택(descendant) - 공백 (id=”d1” 에 속한 <em> 태그에 적용)

#d1 em{

border:solid 3px green;

}

pseudo selector (상태 셀렉터)

p:first-child { (p태그가 첫번째 자식일 경우)

border: solid 3px green;

}

a:link{ (한번도 방문하지 않았을경우... 링크 색깔...)

color:red;

}

a:visited{ (한번이라도 방문하면 ... 그린..)

color:green;

}

a:hover{ (마우스가 링크위에 올려졌을때 크기가 커지고 색깔이 바뀜.....(슈도클래스!!!!!))

background-color: black;

color : white;

font-weight: bold;

font-size: 30px;

}

p:hover{ (p태그가 들어가있는 부분에 마우스가 가면 보더가 생김!!!!!!! (슈도클래스!!!!!!))

border: solid 3px green;

}

p:first-letter{ (모든 p태그 맨앞 글자가 30px)

font-size: 30px;

font-weight: bold;

}

   </style>