스타일 시트의 선언은 의외로 간단하다.우리가 지정하고 싶은
속성과 그 속성의 값만 지정해 주기 때문이다. 좀더 깊이 들어가면 다양하게 지정하는 방법이 있지만 차분히 하나하나 들어가 보도록
하자. 우선 스타일 선언은 아래와 같이 행하면 된다.
{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> |
| 결과보기 |
|
|
