CSS(Cascading Style Sheets)를 문서에 적용하는 방법
1. 방법 1
html 문서내에 직접 입력을 하는 방법.
<html>
<head>
<style type="text/css">
p {
color:orange; /* 글자 색상을 오랜지 색으로 바꾼다. */
font-weight:bold; /* 글자를 굵게 한다. */
}
</style>
</head>
<body>
<p> 안녕하세요 !</p>
</body>
</html>
2. 방법 2
문서 내의 태그에 직접 입력을 하는 방법.
<html>
<head>
</head>
<body>
<p style="color:orange; font-weight:bold;"> 안녕하세요! </p>
</body>
</html>
3. 방법 3
링크를 이용하는 방법.
-- style.html --
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<p> 안녕하세요! </p>
</body>
</html>
-- style.css --
p {
color:orange;
font-weight:bold;
}
4. 방법 4
임포트를 이용하는 방법.
-- style.html --
<html>
<head>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<p> 안녕하세요! </p>
</body>
</html>
-- style.css --
p {
color:orange;
font-weight:bold;
}
결과는 모두 안녕하세요! 가 오랜지색으로 굵게 표시 된다.
거의 모든 브라우저에서 적용이 되지만 import의 경우에는 적용이 안되는 브라우저도 있다.
http://www.centricle.com/ref/css/filters/ 에서 브라우저별 적용, 부적용 확인이 가능하다.
만약 중첩이 될경우에는 태그에서 가까운쪽(가장 마지막으로 설정한 내용)을 기준으로 적용이 된다고 생각하면 된다.
예를 들어
<html>
<head>
<style>
p {
color:green;
}
</style>
</head>
<body>
<p style="color:red;"> 색상은 무엇일까요? </p>
</body>
</html>
위와 같은 경우에는 <p>태그에 색상이 head와 body 부분에 2번 적용이 되었지만 결과의 색상은 red 색상으로 나타난다.
가능한 방법3 과 방법 4 를 이용하는 방법을 가장 추천한다.
'Web > Css' 카테고리의 다른 글
| SELECT 박스에서 테두리 변경하기 (0) | 2008.09.11 |
|---|---|
| 레이아웃 작성하기 (1단 레이아웃) (0) | 2007.12.22 |
| 앵커(anchor) 스타일 적용하기 (0) | 2007.12.01 |
| 박스 모델 (0) | 2007.11.14 |
| 레이아웃 가운데 정렬하기 (0) | 2007.11.14 |