8. 중첩태그

.NET프로그래밍/CSS 2.0 2009. 7. 28. 00:04 |

<!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">
<head>
    <title>중첩태그</title>
    <style type="text/css">
    h3 em { color:Red; }
    </style>
</head>
<body>

    <h3>HTML</h3>
    <em>CSS</em>
    <h3>오늘은 <em>CSS2.0</em>배우는 시간</h3>
    <h1>오늘은 <em>CSS2.0</em>배우는 시간</h1>

</body>
</html>


<!--
위의 <style>태그 내에서 'h3'태그안에 'em'태그가 중첩된 경우에만 '빨강색(Red)'으로 스타일을 적용하고 있다.
-->


< 실행결과 >





'.NET프로그래밍 > CSS 2.0' 카테고리의 다른 글

10. 폰트관련스타일  (0) 2009.07.28
9. 영역설정태그- <div>와 <span>태그  (0) 2009.07.28
7. 중첩클래스  (0) 2009.07.27
6. 스타일시트에서의 우선순위  (0) 2009.07.27
5. id를 이용하는 방법  (0) 2009.07.27
Posted by holland14
:

7. 중첩클래스

.NET프로그래밍/CSS 2.0 2009. 7. 27. 23:45 |

<!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">
<head>
    <title>중첩클래스</title>
    <style type="text/css">
    .redText { color:blue; }
    h2.redText { color:red; }
    </style>
</head>
<body>

    <h1 class="redText">안녕</h1>
    <h2 class="redText">안녕</h2>
    <h3 class="redText">안녕</h3>
   
</body>
</html>


<!--
위의 예제에서 <body>태그 내의 class이름이 'redText'로 모두 같으므로 클래스가 중첩된다. 그 중 위쪽에 <style>태그사이에서 "h2.redText { color:red; }"를 보면 "h2"라는 특정한 태그와 그 class의 속성을 지정하고 있다. 실행해보면 <body>내의 문장중에서 <h2>태그가 있는 문장만 빨강색으로 된다.
-->

< 실행결과 >



'.NET프로그래밍 > CSS 2.0' 카테고리의 다른 글

9. 영역설정태그- <div>와 <span>태그  (0) 2009.07.28
8. 중첩태그  (0) 2009.07.28
6. 스타일시트에서의 우선순위  (0) 2009.07.27
5. id를 이용하는 방법  (0) 2009.07.27
4. class를 이용하는 방법  (0) 2009.07.27
Posted by holland14
:

6. 스타일시트에서의 우선순위

.NET프로그래밍/CSS 2.0 2009. 7. 27. 23:22 |

<!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">
<head>
       <title>스타일시트에서의 우선순위</title>
       <style type="text/css">
       div { color:Green; }
       .yellowText { color:Yellow; }
       #redText { color:Red; }
       </style>
       <link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
      <div class="yellowText" id="redText" style="color:Teal;">
          안녕하세요

      </div>

</body>
</html>


<!--
- 스타일시트에서 여러 속성 및 태그들이 중첩될 경우 우선순위로 적용되는 것은 태그사이에 있는 본문과 가장 가까운 속성이 우선 적용된다.

우선순위 : 기본은 가까운 것...
style속성 > id속성 > class속성 > (style태그 > link태그)
-->

< 실행결과 >

'.NET프로그래밍 > CSS 2.0' 카테고리의 다른 글

8. 중첩태그  (0) 2009.07.28
7. 중첩클래스  (0) 2009.07.27
5. id를 이용하는 방법  (0) 2009.07.27
4. class를 이용하는 방법  (0) 2009.07.27
3. 태그에 직접 적용  (0) 2009.07.27
Posted by holland14
:

티스토리툴바