본문 바로가기

디자인/CSS 강좌

CSS 기초강좌 3 (적용방법)

반응형

CSS 사용하는 방법


1.외부문서로 연결하여 사용하기
Html파일의 <head>..</head>사이에 넣어서 정의하면 됩니다.
<link rel="stylesheet" type="text/css" href="mystyle.css">



2.Html파일 내부에서 사용하기

<style type="text/css">
 ....
</style>


이것도 마찬가지로 Html파일의 <head>..</head>사이에  넣어서 정의하면 됩니다
만약 내부스타일정의 뒤쪽에 외부문서스타일이 링크된다면 내부스타일은 없어지고 외부스타일로 적용됩니다.

<html>
<head>
<title></title>
<style type="text/css">
hr {border:red 2px dashed;}
</style>
</head>

<body>
<hr>
</body>
</html>

3.태그에 직접 사용하기
태그안에 style="요소"와 같이 사용하면 됩니다
<p style="color:sienna;margin-left:20px;">이것은 P태그 입니다.</p>


Example

  <html>

  <head>

  <title></title>

  <style type="text/css">

  hr {border:red 2px dashed;}

  </style>

  </head>

  <body>

  <hr>

  <p style="color:sienna;margin-left:20px;">이것은 P태그 입니다.</p>

  </body>

  </html>

결과

이것은 P태그 입니다.

즐거운 하루 되세요 Vanxy.
반응형