2. 내부,외부,인라인 스타일
페이지 정보
작성자 관리자 댓글 0건 조회 500회 작성일 22-01-05 22:25본문
2. 내부,외부,인라인 스타일
1. 내부 스타일 시트
문서 내에 <style> </style>태그안에 스타일 시트를 추가한다.
2. 외부 스타일 시트
문서 외부에 파일형태(.css)로 존재한다.
실습 : css2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS(Cascade Style Sheet)</title>
<link rel='stylesheet' type='text/css' href='ssh1.css' />
</head>
<body>
<header>
<h1>물품 주문서</h1>
</header>
<p class="accent">동해물과 백두산이 마르고 닳도록..</p>
<p>스타일 시트 학습하기..</p>
<span class="accent">안녕하세요...반갑습니다.</span>
</body>
</html>
스타일 파일 : ssh1.css
@charset "utf-8";
h1 { color:#808000;
font-size:50px;
background-color:yellow;
font-family:"돋움체"
}
웹브라우저로 확인한다.
스타일 파일에 스타일을 추가한다.
스타일 파일 : ssh1.css
@charset "utf-8";
h1 { color:#808000;
font-size:50px;
background-color:yellow;
font-family:"돋움체"
}
p {color:blue;}
span.accent {
color:red;
}
/*
p태그에 있는 클래스만 적용
p.accent {
color:red;
}
*/
/*
모든 태그에 있는 클래스에 모두 적용
.accent {
color:red;
}
*/
body 태그의 스타일을 추가한다.
스타일 파일에 아래 내용을 추가한다.
body{
background-color:#888;
}
웹브라우저로 확인한다.
3. 인라인 스타일 시트
태그 안에 style="" 옵션으로 스타일을 추가한다.
댓글목록
등록된 댓글이 없습니다.