buykiwi 2015. 5. 17. 19:30

형식: 선택자 {스타일속성: 스타일 값;} -> "시.시.콜.콜." (스타일시트는 콜론과 세미콘론)

예: <style>h1 {color : red; }</style>


선택자:

- 전체선택: *

- 태그선택: h1

- 아이디선택: #아이디

- 클래스선택: .클래스

- (태그)속성의 타잎선택: input[type=text]

- (태그)속성값의 문자열선택: input[type=text]

- (태그)속성의 이벤트선택: a:active / a:hover

- (태그)속성의 상태선택: input:checked / input:focus / input:enabled / 


<!DOCTYPE html>


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" /> 

    <title>:::Welcome to LikeTEH:::</title>

    <style>

        * {color:red;}

        h1 {color:blue;}

        #lbl_name {background:green;}

        .input {background:yellow;}

        input[type=tel] {color:pink;}

        input[name*=a] {color:black;}

        input:focus{background:orange;}

        a:hover{color:azure;} 

        a:active{color:purple;}

     </style> 

</head>

<body>

    <h1>Hello World!</h1>

    <a href="#">빈 링크1입니다.</a><br />

    <a href="#">빈 링크2입니다.</a>

    <form action="action.asp" method="get">

        <label id="lbl_name">이름</label>

        <input class="input" type="text" name="name" /><br />

        <label id="lbl_address">주소</label>

        <input class="input" type="text" name="address" /><br />

        <label id="lbl_cellphone">전화</label>

        <input type="tel" name="tel" value="(),- 없이 써 주세요^^" /><br />

        <input type="submit" />

    </form><br />

</body>

</html>