728x90
반응형
1. 인라인 스타일 시트: 우선 순위가 높다
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>css 기본 문법</h1>
<h3>작성방식 3가지</h3>
<b style="color: green;">1. 인라인 스타일시트 : 우선순위가 높다!!</b>
</body>
</html>
2. 내부 스타일 시트 : html 내부에 간단하게 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
p{
background-color: pink;
}
</style>
</head>
<body>
<h1>css 기본 문법</h1>
<h3>작성방식 3가지</h3>
<p>
<span>2. 내부 스타일 시트 : html 내부에 간단하게 작성</span><br/>
</p>
</body>
</html>
3. 외부 스타일 시트: *.css 파일을 만든다 (가장 많이 사용)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="resources/basic_css.css"
rel="stylesheet"
type="text/css"/>
<!--
href : 주소(경로)
rel : 연결 대상의 속성
type : 해당 파일의 정보(text로 이루어져 있으며, css기능을 함)
-->
</head>
<body>
<h1>css 기본 문법</h1>
<h3>작성방식 3가지</h3>
<p>
<b>3. 외부 스타일 시트 : *.css 파일을 만든다 (가장 많이 사용)</b>
</p>
</body>
</html><basic_css.css파일 생성>
b{
color: dodgerblue;
}
728x90
반응형
'Web > HTML&CSS' 카테고리의 다른 글
| [HTML]list (0) | 2020.08.03 |
|---|---|
| [HTML]a_링크 (0) | 2020.08.03 |
| [HTML]구분선, 인용문 (0) | 2020.07.21 |
| [HTML]제목, 단락, 주소 (0) | 2020.07.21 |
| [HTML]블록, 인라인 (0) | 2020.07.21 |
