HTML5 및 CSS3 프로그래밍 용 외부 스타일 시트 사용 방법 - 인형

CSS3는 외부 스타일 시트를 지원합니다. 이 기술을 사용하면 스타일 시트를 별도의 문서로 정의하고 웹 페이지로 가져올 수 있습니다. 왜 이것이 매력적인지 알아 보려면 예제를 살펴보십시오.

externalStyle 코드를 살펴볼 때. html을 사용하면 명백한 스타일 정보가 전혀 보이지 않을 수도 있습니다.

externalStyle. html

외부 스타일

이 페이지에는 단락, 본문 및 머리글 1에 대해 설정된 스타일이 있습니다.

스타일은 외부 스타일 시트에 정의됩니다.

일반적으로 (머리글에) 스타일 태그가 표시되는 경우 스타일이 없습니다. 대신 태그가 표시됩니다. 이 특수 태그는 현재 문서를 다른 문서와 연결하는 데 사용됩니다.

외부 스타일을 정의하는 방법

외부 스타일을 사용하면 스타일 요소는 페이지 머리글에 포함되지 않지만 완전히 별개의 문서에 포함됩니다.

이 경우 페이지는 myStyle이라는 특수 파일에 연결됩니다. CSS. 이 파일은 모든 CSS 규칙을 포함합니다:

/ * myStyle. CSS * / body {배경색: # 333300; color: #FFFFFF;} h1 {color: # FFFF33; 텍스트 정렬: 가운데; font: 이탤릭 200 % 판타지;} p {배경색: # FFFF33; color: # 333300; 텍스트 정렬: 오른쪽; border: 3px groove # FFFF33;}

스타일 시트는 몇 가지 중요한 차이점을 제외하고는 페이지 수준 스타일과 비슷합니다.

스타일 시트 규칙은 별도의 파일에 들어 있습니다. 스타일은 더 이상 HTML 페이지의 일부가 아니며 서버에 저장된 완전히 별개의 파일입니다. CSS 파일은 대개. CSS 확장.
태그가 없습니다. 스타일이 더 이상 HTML에 포함되어 있지 않기 때문에 필요하지 않습니다. 코드는 주석으로 시작합니다.
/ * * / pair는 CSS의 주석을 나타냅니다. 사실, 페이지 레벨에서 CSS에 주석을 넣을 수 있습니다. 외부 CSS 파일에는 주석이 자주 들어 있습니다. 스타일 문서에는 HTML이 없습니다.
CSS 문서에는 CSS 만 포함됩니다. 이것은 스타일 (CSS 문서에서)과 내용 (HTML 문서에서)을 분리하는 목표에 가깝게옵니다. 문서가 특정 페이지에 묶여 있지 않습니다.
외부 CSS의 가장 큰 장점은 재사용입니다. CSS 문서는 특정 페이지의 일부가 아니지만 모든 페이지에서 사용할 수 있습니다. 외부 CSS 스타일 재사용 방법

외부 스타일 시트는 동일한 스타일을 필요로하는 페이지가 두 개 이상있을 때 정말 재미 있습니다. 오늘날 대부분의 웹 사이트는 여러 페이지를 사용하며 일관성을 유지하기 위해 공통된 스타일 시트를 공유해야합니다.

코드는 이것이 얼마나 쉽게 수행되는지를 보여줍니다:

SecondPage.html

두 번째 페이지

이 페이지는 externalStyle과 동일한 스타일을 사용합니다. html.

하나의 스타일 시트는 많은 페이지를 제어 할 수 있습니다:

일반적으로 웹 사이트에는 많은 공통된 스타일을 공유하는 여러 페이지가 있습니다. 한 문서에서 스타일 시트를 정의하고 모든 HTML 파일이 CSS 파일을 참조하도록 할 수 있습니다.

전체적인 변경이 더 쉽습니다. 외부 스타일을 사용하는 경우 한 곳에서 변경하면 자동으로 시스템의 모든 페이지로 전파됩니다.
콘텐츠와 디자인의 분리: 외부 CSS를 사용하면 모든 디자인이 CSS에 보관되고 데이터는 HTML로 제공됩니다.
간편한 업그레이드: 전체 사이트의 디자인 매개 변수가 하나의 파일에 정의되어 있기 때문에 개별 HTML 파일을 사용하지 않고 사이트를 쉽게 변경할 수 있습니다.
링크 태그 태그는 HTML 문서에 CSS 참조를 추가하는 핵심 요소입니다. 태그의 특성은 다음과 같습니다.

태그는 HTML 페이지의 일부입니다.

HTML 문서에서 태그를 사용하여 HTML 페이지에서 사용할 CSS 문서를 지정합니다. 태그는 헤더에서만 발생합니다.
태그와 달리 태그는 헤더에서만 발생할 수 있습니다. 태그에는 시각적 인 존재가 없습니다. 사용자는 태그를 볼 수없고 그 효과 만 볼 수 있습니다.
link
태그는 문서를 다른 문서와 연관시키는 데 사용됩니다. 이 태그를 사용하여 문서 간의 관계를 설명합니다. 태그는
rel 속성을 가지며 는 관계 유형을 정의합니다. 현재, 사용하는 유일한 관계는 스타일 시트 속성입니다. 태그에는
href 특성이 있는데,이 속성은 다른 문서의 위치를 설명합니다. 링크 태그는 페이지를 외부에서 정의 된 스타일 문서에 연결하는 데 자주 사용됩니다. 대부분의 사람들은 anchor () 태그에 의해 생성 된 하이퍼 링크를 하이퍼 링크 또는 링크라고합니다. 이런 의미에서 링크 태그가 해당 유형의 링크를 만들지 않기 때문에 혼동을 일으킬 수 있습니다.

외부 링크를 지정하는 방법

태그를 사용하여 외부 스타일 시트를 지정하려면 다음 단계를 따르십시오.

스타일 시트를 정의하십시오.

외부 스타일 시트는 이미 알고있는 것과 매우 비슷합니다. 모든 스타일을 and 태그없이 별도의 텍스트 문서에 넣기 만하면됩니다.

HTML 페이지의 헤드 영역에 링크 요소를 만들어 HTML 페이지와 CSS 페이지 사이의 링크를 정의합니다.

내 링크 요소는 다음과 같습니다.
rel = "stylesheet"속성을 설정하여 링크의 관계를 설정하십시오.

솔직히 스타일 시트는 거의 유일하게 사용할 관계이므로 자동으로 작성되어야합니다.
type = "text / css"로 설정하여 스타일 유형을 지정하십시오.

href 속성을 사용하여 스타일 시트의 위치를 결정합니다.