스타일 시트

홈페이지를 만드는데 사용될 여러 가지 스타일을 미리 정의해 놓고 사용하는 기능

일일이 폰트의 수정해 주는 작업이 필요한긋을 스타일을 지정해서 사용하면 간편하게 작업 할 수 있다.

1. 스타일 시트를 정의 하기

<HTML>

    <HEAD>

        <META http-equiv="Content-Type" content="text/html; charset=euc-kr">

        <TITLE>CSS로 스타일 정의하기</TITLE>

        <STYLE>

          H2 {

            color : red;

            font-size : 30pt;

          }

          P {

            color : blue;

            font-style : italic;

          }

        </STYLE>

    </HEAD>

    <BODY>

        <H2>Style Sheet</H2>

        <P> 스타일 시트를 CSS로 정의하였습니다. </P>

    </BODY>

</HTML>

  2. 스타일시트를 HTML 태그 내에서 정의하기

<HTML>

    <HEAD>

        <META http-equiv="Content-Type" content="text/html; charset=euc-kr">

        <TITLE>HTML 태그 내에서 스타일 시트 정의하기</TITLE>

    </HEAD>

    <BODY>

        <H2 style="color : red; font-size : 30pt;">Style Sheet</H2>

        <P style="color : blue; font-style : italic;"> 스타일 시트가 적용된 문장 </P>

        <P> 스타일 시트가 없는 문장 </P>

    </BODY>

</HTML>

3. 스타일 시트 파일 지정하기

[stylesheet.css]

H1.mystyle {

    color : blue;

    text-align : center;

}

.yourstyle {

    color : red;

    text-decoration : underline;

}

 

<HTML>

    <HEAD>

        <META http-equiv="Content-Type" content="text/html; charset=euc-kr">

        <TITLE>스타일 시트 파일 지정하기</TITLE>

        <LINK rel="stylesheet" type="text/css" href="stylesheet.css">

    </HEAD>

    <BODY>

        <H1>클래스를 지정하지 않은 문장</H1>

        <H1 class="mystyle">mystyle 클래스를 지정한 문장</H1>

        <H2 class="yourstyle">yourstyle 클래스를 지정한 문장</H2>

        <P class="yourstyle">yourstyle 클래스를 지정한 문장</P>

    </BODY>

</HTML>

4. 스타일 시트 속성 계승하기

<H3> 스타일 시트 속성<H1>속성 계승하기 연습</H1></H3>

위의 예제에서 <H3>태그가 상위 태그가 되고 <H1>태그가 하위태그가 된다.

동일 속성이 사용될 경우 하위 태그 속성이 나타난다.

속성계승 예제

<HTML>

    <HEAD>

        <META http-equiv="Content-Type" content="text/html; charset=euc-kr">

        <TITLE>스타일 시트 속성 계승하기</TITLE>

        <STYLE type="text/css">

        BODY {

            background-color : yellow;

            color : blue;

        }     

        H1 {

            color : white;

            text-align : center;

        }      

        P {

            font-size : 15pt;

            background-color : black

        }

        </STYLE>  

    </HEAD>

    <BODY>

        <!-- BODY의 배경색을 계승되지만 글자색은 white를 사용한다. -->

        <H1>H1 태그를 사용한 문장</H1>

        <!-- BODY의 모든 스타일 시트 속성을 계승하여 사용한다. -->

        <H2>H2 태그를 사용한 문장</H2>

        <!-- BODY의 글자색은 계승되지만 배경색은 black을 사용한다. -->

        <P> P 태그를 사용한 문장</P>

 

    </BODY>

</HTML>

 

5. 스타일 시트 ID 지정하기 

#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }

<P ID=z98y>Wide text</P>

6. Grouping

H1, H2, H3 { font-family: helvetica }

 
H1 { 
  font-weight: bold; 
  font-size: 12pt;
  line-height: 14pt; 
  font-family: helvetica; 
  font-variant: normal;
  font-style: normal;
}

7. 스타일 시트 클래스 지정하기

<style>

태그.클래스 이름{스타일 정의}

.클래스이름 {스타일정의}

</style>

<태그 class="클래스이름">

 

<HTML>

    <HEAD>

        <META http-equiv="Content-Type" content="text/html; charset=euc-kr">

        <TITLE>스타일 시트의 클래스 정의하기</TITLE>

        <STYLE type="text/css">

            H1.mystyle {

                color : blue;

                text-align : center;

            }

            .yourstyle {

                color : red;

                text-decoration : underline;

            }

        </STYLE>  

    </HEAD>

    <BODY>

        <H1>클래스를 지정하지 않은 문장</H1>

        <H1 class="mystyle">mystyle 클래스를 지정한 문장</H1>

        <h2 class="yourstyle">yourstyle 클래스를 지정한 문장</H2>

        <P class="yourstyle">yourstyle 클래스를 지정한 문장</P>

    </BODY>

</HTML>

 

8. Anchor 태그에 스타일 시트 적용하기(링크효과)

 

<head>

<style thpe="text/css">

A:link {color: a3dc57; text-decoration: none}

A:visited {color: a3dc57; text-decoration: none}

A:active {color: white; text-decoration: none}

A:hover {color: ff6600; font-family: 궁서; text-decoration: underline}

</style>

</HEAD>

 

9. 스타일 시트 예제

 

<HEAD>

<STYLE TYPE = "text/css">

P {textAligh:Center; margin-left:20%; margin-right:20%;}

H4 {text-decoration:underline; color:green;}

H5 {text-transfor:uppercase; colr:red;

border-width:4pt; border-style:outset;

background-color:yellow; padding:4pt

border-color:red;}

BLOCKQUOTE {

color:blue; font-style:italic;

line-height:1.5; text-indent:10% }

</STYLE>

</HEAD>

<BODY>

<H4>밑즐 그어진 Heading 4</H4>

<BLOCKQUOTE> 이 문단은 인용문입니다. 인용문을 사용할 때는 전체적으로 들여쓰기를 할 때 첫글자는 좀더 들여쓰는 것이 인용문이 강조됩니다. 또한 이 인용문에서는 글자 길이가 일반 인용문에서보다 좀더 길게 표시됩니다.

<H5>테두리가 있고 영문이 대문자로 표시되는 heading 5</H5>

</BLOCKQUOTE>

<P>이 문단은 텍스트가 가운데로 정렬되어 있습니다. 또한 여백이 크기 때문에 각 라인이 문서의 좌우에서 멀리 떨어져 가운데로 정렬됩니다. </P>

</BODY>

</HTML>

 

10. Font

'font-family', 'font-style', 'font-variant' and 'font-weight', 'font-size', 'font'.

 

font-family

Value: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]

 
BODY { font-family: gill, helvetica, sans-serif }

 

 

font-style

Value: normal | italic | oblique

 
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }

 

font-variant
Value: normal | small-caps
 
H3 { font-variant: small-caps }
EM { font-style: oblique }

 

font-weight
Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 
P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 }     /* bold */

 

font-size
Value: <absolute-size> | <relative-size> | <length> | <percentage> 
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }

11. color

color
Value: <color>
EM { color: red } /* natural language */

EM { color: rgb(255,0,0) } /* RGB range 0-255 */

12. Text

'word-spacing'
Value: normal | <length>
H1 { word-spacing: 1em } //각 단어의 간격

 

'letter-spacing'
Value: normal | <length>
BLOCKQUOTE { letter-spacing: 0.1em } // 각 단어의 간격

13. Box

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
Value: <length> | <percentage> | auto
H1 { margin-top: 2em }

H1 { margin-right: 12.3% }

H1 { margin-bottom: 3px }

H1 { margin-left: 2em }