728x90
반응형
SMALL
1. 인라인 스타일 시트 : 간단한 스타일 정보
태그 안에 정의
Style 속성: sytle = "속성:속성값;" -> (스타일 시트를 사용하지 않고 태그 안에 스타일 적용할 대상에 직접 표시
- 단일 요소에 고유하 스타일 적용
- 해당 요소에 style 속성 추가
Ex) <h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
내부 스타일 시트: 스타일을 여러 곳에
<head> 안에 정의 ,<style></style>안에 작성
- Html 페이지에 고유한 스타일이 있는 경우
- head 섹션 내 <style> 요소 내에 정의
Ex)
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
2. 외부 스타일 시트(css) : 따로 저장해 놓은 스타일 정보
Html 코드에 링크 연결하여 사용
- 파일 하나만 변경하여 전체 웹 사이트의 모양 변경
- html 내의 <link> 요소 내부에 외부 스타일 시트에 대한 참조 포함
ex)
<link rel="stylesheet" href="mystyle.css">
Rel = relation href = hyper reference
(4)여러 스타일 시트 - 동일한 요소에 대한 일부 속성이 정의된 경우
- 마지막으로 읽은 스타일 시트의 값 사용
케스케이팅(cascading style sheet) 가 css
1) 계단식 순서 - html 요소에 대해 지정된 스타일이 둘 이상인 경우
<우선순위>
- !important
- 인라인 스타일 (inline): 태그 안에 style 속성 사용한 것
- 내부 스타일 (internal) : <head><style></style>안에 적어놓은 id스타일, 클래스 스타일
- 타입(태그) 스타일(external) : 특정 태그에 스타일 적용
- 브라우저 기본값
2) 여러 스타일 시트 - 동일한 요소에 대한 일부 속성이 정의된 경우(중요도와 요소범위가 같을 때)
- 마지막으로 읽은 스타일 시트의 값 사용
3) 스타일 상속
- 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달
부모 요소 : 포함하는 태그
자식요소 : 포함된 태그
728x90
반응형
LIST
