2013년 6월 26일 수요일

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>

댓글 없음:

댓글 쓰기