Latest web development tutorials

CSS 만들기

스타일 시트를 판독하는 경우, 브라우저는 HTML 문서 포맷에 기초한다.

어떻게 스타일 시트를 삽입하는 방법

세 가지 방법으로 스타일 시트를 삽입합니다 :

  • 외부 스타일 시트
  • 내부 스타일 시트
  • 인라인 스타일

외부 스타일 시트

스타일이 요구되는 많은 페이지에 적용하면, 외장 스타일 시트 이상적 일 것이다. 외부 스타일 시트의 경우에는 전체 사이트의 외관을 변경할 수있는 파일을 변경할 수있다. 각 페이지는 스타일 시트에 링크하기 위해 <링크> 태그를 사용합니다. <링크>를 (문서) 머리에 태그를 :

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

브라우저는 문서를 포맷하는 데에 따라 파일 mystyle.css 스타일 선언에서 읽습니다.

외부 스타일 시트는 텍스트 편집기에서 편집 할 수 있습니다. 파일은 html 태그를 포함 할 수 없습니다. 스타일 시트는 확장 .CSS으로 저장해야합니다. 여기에 스타일 시트 파일의 예입니다 :

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("../images/back40.gif");}

말 속성 값과 단위 사이에 공백을 두지 마십시오. 대신 : 당신은 "20 PX 마진 왼쪽"사용하는 경우 "여백 - 왼쪽 : 20 픽셀", 그것은 IE 6에서만 유효하지만, 모질라 / 파이어 폭스 또는 Netscape에서 작동하지 않습니다.

내부 스타일 시트

하나의 문서는 특별한 스타일을 필요로 할 때, 내부 스타일 시트를 사용해야합니다. 이 같은 내부 스타일 시트를 정의하는 문서 헤드의 <스타일> 태그를 사용할 수 있습니다 :

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

인라인 스타일

때문에 혼합 성능과 콘텐츠, 인라인 스타일은 스타일 시트의 많은 장점을 잃게됩니다. 스타일이 하나의 요소에 한 번만 적용해야 할 때, 예를 들어,이 방법을주의하시기 바랍니다.

인라인 스타일을 사용하려면 관련 태그에 스타일 (스타일) 속성을 사용합니다. 스타일 속성은 CSS 속성을 포함 할 수 있습니다. 이 예는 단락 및 왼쪽 여백의 색상을 변경하는 방법을 보여줍니다

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

여러 스타일

일부 속성은 다른 스타일 시트에서 같은 셀렉터를 정의하는 경우,보다 구체적인 스타일 시트의 속성 값 상속됩니다.

예를 들어, 외부 스타일 시트는 H3 선택에 대한 세 가지 속성이 있습니다 :

h3
{
color:red;
text-align:left;
font-size:8pt;
}

내부 스타일 시트는 H3 선택을위한 두 가지 속성이 있습니다 :

h3
{
text-align:right;
font-size:20pt;
}

스타일 내부 스타일 시트 및 외부 스타일 시트가 동시에 해당 페이지에 링크되어있는 경우, 다음 H3 GET이다 :

color:red;
text-align:right;
font-size:20pt;

즉, 색상 속성이 내부 스타일 시트 규칙에 의해 대체 될 것이다 외부 스타일 시트 및 텍스트 배열 (텍스트 정렬) 및 글꼴 크기 (글꼴 크기)에서 상속 될 것이다.

여러 스타일 한 적층

스타일 시트는 다양한 방식으로 지정된 스타일 정보를 허용한다. 스타일은 단일 HTML 엘리먼트, 제 HTML 페이지의 요소 또는 외부 CSS 파일에 지정 될 수있다. 심지어 여러 외부 스타일 시트는 하나의 HTML 문서 내에서 참조 할 수 있습니다.

스태킹 순서

같은 HTML 엘리먼트가 하나 이상의 스타일에 의해 정의되는 경우, 스타일을 사용할 것인가?

일반적으로, 모든 스타일 번호 (4)는 가장 높은 우선 순위를 가지고 다음과 같은 규칙에 따라 새로운 가상 스타일 시트에 적층한다.

  1. 기본 브라우저
  2. 외부 스타일 시트
  3. 내부 스타일 시트 (의 <head>에 내부 태그)
  4. 인라인 스타일 (내부 HTML 요소)

레이블 스타일 문, 외부 스타일 시트 스타일의 문, 또는 브라우저 스타일 문 : 그래서, (HTML 요소 내부) 인라인 스타일은 다음과 같은 스타일 선언을 통해 우선한다는 것을 의미 가장 높은 우선 순위를 가지고 (기본값).

말팁 : <헤드>에서 외부 스타일 파일을 사용하는 경우도 스타일을 정의하고, 스타일 시트 내부 스타일 외부 파일을 대체합니다.