본문 바로가기
강의실/css

css 사용방법 1

star story 2007. 7. 25. 09:11
Css 사용방법(1)
스타일 시트의 선언은 의외로 간단하다.우리가 지정하고 싶은 속성과 그 속성의 값만 지정해 주기 때문이다. 좀더 깊이 들어가면 다양하게 지정하는 방법이 있지만 차분히 하나하나 들어가 보도록 하자. 우선 스타일 선언은 아래와 같이 행하면 된다.

{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>
 

'강의실 > css' 카테고리의 다른 글

font-style  (0) 2007.07.25
font-size  (0) 2007.07.25
font-family  (0) 2007.07.25
css 사용법 2  (0) 2007.07.25
css란 무엇인가?  (0) 2007.07.25

'강의실/css' Related Articles

티스토리툴바