스타일 시트의 선언은 의외로 간단하다.우리가 지정하고 싶은 속성과 그 속성의 값만 지정해 주기 때문이다. 좀더
깊이 들어가면 다양하게 지정하는 방법이 있지만 차분히 하나하나 들어가 보도록 하자. 우선 스타일 선언은 아래와
같이 행하면 된다.
{PROPERTY:VALUE}
| CSS Example - 1.Linking
스타일 시트 |
다음의 내용을 copy해서 sample.css로 저장한후
아래의 소스를 이용해서 test.html을 만든후 검사한다.
H1{font-family:Arial;font-size:40pt;Color:red}
P{font-size:12pt;line-height:20pt}
|
|
| HTML Source |
<html>
<HEAD>
<link rel=StyleSheet type="text/css" href="sample.css">
</HEAD>
<BODY>
<H1>This
is a HI stylesheet</H1>
<P>This is a
P stylesheet</P>
</body>
</html> |
| 결과보기 |
|
| CSS Example - 2.Embedding
스타일 시트 |
1번과 같은 기법을 사용하지만 별도의 화일을 만드는
것이 아니라 다음과 같이 head 태그 안에 삽입하는 방법이다.
<HEAD>
< STYLE TYPE="text/css">
TAG1{PROPERTY:VALUE}
TAG2{PROPERTY:VALUE}
......
TAGn{PROPERTY:VALUE}
</STYLE>
</HEAD>
|
|
| HTML Source |
<html>
<HEAD>
<STYLE TYPE="text/css">
H1{font-family:Arial;font-size:40pt;
Color:red}
P{font-size:12pt;line-height:20pt}
</STYLE>
</HEAD>
<BODY>
<H1>This
is a HI stylesheet</H1>
<P>This is a
P stylesheet</P>
</BOBY>
</html> |
| 결과보기 |
|
| CSS Example - 3.Inline
스타일 시트 |
| 역시 1번 2번과 같은 기법을 사용하지만 별도의 화일을
만들거나 head 태그 사이에 삽입하는게 아니라 다음과 같이 적용할 글자에 직접 inline
기법을 적용하는 방법이다. |
|
| HTML Source |
<html>
<HEAD>
<BODY>
<H1 STYLE="font-family:Arial;font-size:40pt;Color:red">
This is a HI stylesheet</H1>
<P STYLE=
"font-size:12pt;
line-height:20pt">This is a P stylesheet</P>
</BODY>
</html> |
| 결과보기 |
|
|
|
