브라우저 스타일 시트를 판독 할 때, 스타일 시트 내의 정보에 따라 HTML 문서를 포맷 할 것이다.
CSS를 삽입하는 세 가지 방법
스타일 시트를 삽입하는 세 가지 방법이 있습니다 :
외부 스타일 시트
외부 스타일 시트를 사용하면 하나의 파일을 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다!
각 페이지는 내부, 외부 스타일 시트 파일에 대한 참조를 포함해야 <link> 요소. <link> 요소는 내부에 간다 <head> 섹션 :
외부 스타일 시트를 텍스트 편집기로 작성 될 수있다. 이 파일은 HTML 태그를 포함 할 수 없습니다. 스타일 시트 파일이 함께 저장해야합니다 .css 확장.
여기에 어떻게 "myStyle.css" 외모 :
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} | 속성 값과 단위 사이에 공백을 추가하지 마십시오 (예 : margin-left:20 px; ). 올바른 방법은 다음과 같습니다 margin-left:20px; |
|---|
내부 스타일 시트
하나의 페이지는 고유의 스타일이 경우 내부 스타일 시트가 사용될 수있다.
내부 스타일이 내에서 정의 된 <style> 요소 내부에 <head> HTML 페이지의 섹션 :
예
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> »그것을 자신을 시도 인라인 스타일
인라인 스타일은 단일 요소에 고유 한 스타일을 적용하기 위해 사용될 수있다.
인라인 스타일을 사용하려면 해당 요소에 스타일 속성을 추가 할 수 있습니다. 스타일 속성은 CSS 속성을 포함 할 수 있습니다.
아래의 예는 색상과의 왼쪽 여백 변경하는 방법을 보여줍니다 <h1> 요소를 :
| 인라인 스타일 (프리젠 테이션의 컨텐츠를 혼합) 스타일 시트의 많은 장점을 잃는다. 드물게이 방법을 사용합니다! |
|---|
여러 스타일 시트
일부 속성 상이한 스타일 시트에서 동일한 선택기 (요소)에 대한 정의 된 경우, 마지막으로 판독 스타일 시트의 값이 사용된다.
예
외부 스타일 시트가에 대한 다음과 같은 스타일이 있다고 가정 <h1> 요소를 :
h1
{
color: navy;
}다음, 내부 스타일 시트도에 대한 다음과 같은 스타일이 있다고 가정 <h1> 요소를 :
h1
{
color: orange;
}내부 스타일 외부 스타일 시트 링크 후에 정의되면, <h1> 요소는 것 "orange" :
예
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> »그것을 자신을 시도 내부 스타일은 외부 스타일 시트에 링크하기 전에 정의 된 경우 그러나 <h1> 요소가 될 것 "navy" :
예
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> »그것을 자신을 시도 캐스 케이 딩 주문
HTML 요소에 대한 하나 이상의 스타일이 지정 될 때 어떤 스타일이 사용될 것인가?
일반적으로 우리가 말할 수있는 말하기 모든 스타일 것이다 번호 하나가 가장 높은 우선 순위를 가지고 다음과 같은 규칙에 의해 새로운 "가상"스타일 시트에 "캐스케이드"
- (HTML 요소 내부) 인라인 스타일
- (머리 부분)에 외부 및 내부 스타일 시트
- 브라우저의 기본
그래서, (특정 HTML 요소 내부) 인라인 스타일은 상기 내부에 정의 된 스타일보다 우선한다는 것을 의미 가장 높은 우선 순위를 가지고 <head> 태그 또는 외부 스타일 시트에, 또는 브라우저의 기본값을.