선택자의 종류와 우선순위 예제)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-ｅquiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> CSS Selector </title>
<style type="text/css">
/*css 선택자의 종류, 우선순위*/
*{margin:0}/*전체선택자 : 0점*/
body{font-size:12px} /*태그선택자 : 1점*/
h1{font-size:20px}
h2{font-size:16px}
p{color:#333}
.point{color:#f00}/*클래스선택자 : 10점*/
#head{font-size:24px;color:#f00}/*아이디선택자 : 100점*/
a:link{color:blue}/*가상클래스선택자 : 10점*/
a:visited{color:gray}
a:hover{color:red}
a:active{color:orange}
.title p{color:#999}/*자손선택자*/
.title em{font-weight:bold !important}/*가장우선적용*/
.title em{font-weight:normal}
.title > p > em{text-decoration:underline}/*자식선택자 IE6(x)*/
h2 + p{text-decoration:underline}/*인접선택자 IE6(x)*/
</style>
</head>
<body>
<h1 id="head">웹접근성연구소</h1>
<div class="title">
<h1>웹 접근성의 정의</h1>
<p>
<a href="#">홈</a> >
<a href="#">웹 접근성의 이해</a> >
<em>웹 접근성의 정의</em>
</p>
</div>
<div class="text">
<h2>웹 접근성이란?</h2>
<p class="point" style="color:red">장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 인터넷 공간</p>
<!--시작태그에 스타일 입력 : 우선순위 1000점-->
<p>월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란</p>
<p>하지만, 접근에 대한 개념의 다양성으로 인한 인식의 부족보다는 접근성에 대한 개념을</p>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-ｅquiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> CSS Selector </title>
<style type="text/css">
/*css 선택자의 종류, 우선순위*/
*{margin:0}/*전체선택자 : 0점*/
body{font-size:12px} /*태그선택자 : 1점*/
h1{font-size:20px}
h2{font-size:16px}
p{color:#333}
.point{color:#f00}/*클래스선택자 : 10점*/
#head{font-size:24px;color:#f00}/*아이디선택자 : 100점*/
a:link{color:blue}/*가상클래스선택자 : 10점*/
a:visited{color:gray}
a:hover{color:red}
a:active{color:orange}
.title p{color:#999}/*자손선택자*/
.title em{font-weight:bold !important}/*가장우선적용*/
.title em{font-weight:normal}
.title > p > em{text-decoration:underline}/*자식선택자 IE6(x)*/
h2 + p{text-decoration:underline}/*인접선택자 IE6(x)*/
</style>
</head>
<body>
<h1 id="head">웹접근성연구소</h1>
<div class="title">
<h1>웹 접근성의 정의</h1>
<p>
<a href="#">홈</a> >
<a href="#">웹 접근성의 이해</a> >
<em>웹 접근성의 정의</em>
</p>
</div>
<div class="text">
<h2>웹 접근성이란?</h2>
<p class="point" style="color:red">장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 인터넷 공간</p>
<!--시작태그에 스타일 입력 : 우선순위 1000점-->
<p>월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란</p>
<p>하지만, 접근에 대한 개념의 다양성으로 인한 인식의 부족보다는 접근성에 대한 개념을</p>
</div>
</body>
</html>
'html' 카테고리의 다른 글
| 박스모델 (0) | 2011.01.16 |
|---|---|
| FONT, TEXT 관련 스타일 예제 (0) | 2011.01.16 |
| 온라인 서식예제 만들기 (0) | 2011.01.16 |
| 온라인 서식 예제 미리보기 (0) | 2011.01.16 |
| 예제) 그림의 메인페이지 마크업 해보기 (0) | 2011.01.16 |