0630_클래스 아이디
<html>
    <head>
        <title>
            태그 그룹화하여 스타일 지정하기
        </title>
        <style type="text/css">
        <!--
        td,p,h1{font-size:15; color:blue}/*원래속성은 유지하면서 재정의 한것만 적용--h1의 크기와 색만 바뀌고 다른것은 동일*/
        -->
        </style>
    </head>
        <body>
        &lt 여러가기 태그에 같은 스타일 적용한는 경우 비교&gt
        <h1> h1 태그에 속한 모든 문자의 크기는 15pt이고, 색상은 파란색이다.</h1>
        <p>  p 태그에 속한 모든 문자의 크기는 15pt이고, 색상은 파란색이다. </p>(p테그는 반드시 끝내주지 않아도 된다)
        <table cellpadding="5" cellspacing="1" bgcolor="#cccccc">
            <tr>
                <td bgcolor="#141414"> td 태그에 속한 모든 문자의 크기는 15pt이고, 색상은 파란색이다.</td>
            </tr>
        </table>
    </body>
</html>
결과를 보면 h1에만 진하게 기능이 들어간것을 제외하고는 모두 같다는것을 알 수 있다     

<html>
    <head><title>클래스 스타일 만들기</title>
        <style type="text/css">
        <!--
        p.one{font-size:13pt;color:blue;}    /* 태그명 or 아무것도 안써요.뒤에는 원하는걸 쓰세요*/
        p.two{font-size:18pt;color:red;}
        p.three{font-size:25pt;color:green;}
        .four{font-family:"궁서체","태나무","딸기체"} /*font-family에 값을 여러개주면 순차적으로 검색해서 있는 글씨체를 발견하면 적용하고 만약 없다면 기본체를 적용한다.*/
        -->    
        </style>
    </head>
        <body>
            <p>클래스 적용안한 스타일입니다</p>
            <p class=one>클래스 첫번째 스타일입니다.</p>
            <p class=two>클래스 두번째 스타일입니다.</p>
            <p class=three>클래스 세번째 스타일입니다.</p>
            <h1 class=four>클래스 네번째 스타일입니다.</h1>
        </body>
   </html>

전 태그의 특성은 어떻게 되는가? 스타일 우선이 우선되지요. 물론 건드리지 않은 태그 속성은 그대로 유지 됩니다.
<html>
    <head><title>상위태그에 포함된 하위 태크의 스타일 지정</title>
    <style type="text/css">
    <!--
    b li {font-size=15pt;color=blue}/*먼저 쓴것이 상위 나중 쓴것이 하위*/
    -->                                        /*b태그 안의 li태그만이 적용됩니다.*/
    </style>
    </head>
    <body>
    <p>b태그에 포함된 li태그에만 스타일 적용</p>
    <b>b태그입니다.</b>
    <ul>
        <li>li 태그 첫번째 목록                           <!--여기는 적용안되고-->
        <b><li>li 태그 두번째 목록</b>                <!--여기는 적용되죠-->
    </ul>       
    </body>
</html>

<html>
 <head><title>연습</title></head>
 <link rel="stylesheet" type="text/css" href="mainex.css" / >
 </head>
 <body>
  &it클래스&gt
  <h1 class=one> h1->글자크기10,색-33cc00</h1> 
  <h1 class=two> h1->글자크기12,색-ff9900</h1> 
  <h1 class=three> h1->글자크기15,색-669933</h1> 
  <h1 class=four> h1->글자크기20,색-663399</h1> 
  &it클래스와 아이디&gt 
  <h1 class=allClass>클래스 모든 태그->글자크기17,색-337788</h1> 
  <h1 id=allId>아이디 모든 태그->글자크기15,색-3366cc</h1> 
 </body>
</html>

 h2.one{font-style:italic;font-size:25pt} /*font-style :글씨체?*/
 p{font-weight:500;font-size:20pt}/*weight 글씨굵기로 영어로 쓰면 bold만 쓸수 있지마나 숫자로 쓰면 200~900까지 가능*/
 -->
 </style>
 <body>
 <h2 class=one>아아아아아아</h2>
 <p>아아아아아아아아</p>
 </body>
</html>
by 악두이 | 2009/06/30 10:01 | CSS | 트랙백(1) | 덧글(0)
트랙백 주소 : http://o23750.egloos.com/tb/1541283
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
Tracked from at 2014/03/11 00:27

제목 : http://helenmccrory.org/
line3...more

:         :

:

비공개 덧글



<< 이전 페이지 다음 페이지 >>