Front-End-Web/html+css
제14강_CSS3를 HTML5에 적용
jsBae
2022. 10. 8. 00:22
1.CSS를 삽입하는 세 가지 방법
2. 외부 CSS
§외부 스타일 시트를 사용하면 파일 하나만 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다!
§각 HTML 페이지는 헤드 섹션 내부의 <link> 요소 내부에 외부 스타일 시트 파일에 대한 참조를 포함해야 합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#myid
{
color:yellow;
}
.myid
{
color:red;
}
p
{
color:green !important;
}
</style>
</head>
<body>
<h1>importance 연습</h1>
<p>문단 1</p>
<p class="myid" id="myid" style="color:gray">문단 2</p>
</body>
<html>CSS3를 HTML5에 적용하는 방법은 크게 3가지가 있다
- 인라인(inline) 스타일 시트 : HTML문서 내의 각 Tag 요소에 직접 스타일 시트를 정의한다.
- 내부(internal) 스타일 시트 : HTML문서의 <head> 부분에 스타일 시트를 정의한다.
- 외부(external) 스타일 시트 : 시타일 시트를 별도의 파일(확장자 .css)로 저장하여 다른 HTML문서에서도 같은 스타일 시트를 사용할 수 있도록 합니다.
2. 외부 CSS
§외부 스타일 시트는 모든 텍스트 편집기에서 작성할 수 있으며 .css 확장자로 저장해야 합니다.
§외부 .css 파일에는 HTML 태그가 포함되어서는 안 됩니다.
2. 내부 CSS
§하나의 HTML 페이지에 고유한 스타일이 있는 경우 내부 스타일 시트를 사용할 수 있습니다.
§내부 스타일은 헤드 섹션 내부의 <style> 요소 내부에 정의됩니다.
3. 인라인 CSS
§인라인 스타일을 사용하여 단일 요소에 고유한 스타일을 적용
§인라인 스타일을 사용하려면 해당 요소에 style 속성을 추가하세요.
§style 속성은 모든 CSS 속성을 포함할 수 있습니다.
4. CSS 적용 순위
§다른 스타일 시트의 동일한 선택기(요소)에 대해 일부 속성이 정의된 경우 마지막으로 읽은 스타일 시트의 값이 사용됩니다.
4. CSS 적용 순위 - 계단식 순서
728x90
반응형