웹 페이지에서 CSS 스타일 시트를 사용하는 네 가지 방법 알아보기_경험 교환

웹 페이지에 CSS를 삽입하는 방법

CSS의 구문에 대해서는 이전에 배웠지만 브라우저에 효과를 표시하려면 브라우저가 이를 인식하고 호출할 수 있도록 해야 합니다. 브라우저는 스타일 시트를 읽을 때 텍스트 형식으로 읽어야 합니다. 페이지에 스타일 시트를 삽입하는 방법에는 외부 스타일 시트 연결, 내부 스타일 시트, 외부 스타일 시트 가져오기, 내장 스타일 등 4가지가 있습니다.

1. 외부 스타일 시트에 연결
스타일 시트를 스타일 시트 파일로 저장한 다음 < 이 태그는 페이지의 < head > 영역에 다음과 같이 배치되어야 합니다.

코드를 복사하세요. 코드는 다음과 같습니다.

…
… 



위의 예는 브라우저가 mystyle.css 파일에서 문서 형식으로 정의된 스타일 시트를 읽는다는 것을 나타냅니다. . rel="stylesheet"는 페이지에서 이 외부 스타일 시트를 사용하는 것을 의미합니다. type="text/css"는 파일 형식이 스타일 시트 텍스트임을 의미합니다. href="mystyle.css"는 파일이 있는 위치입니다. 미디어는 미디어 유형을 선택하는 것입니다. 이러한 미디어에는 스크린, 종이, 음성 합성 장치, 점자 판독 장치 등이 포함됩니다.

외부 스타일시트 파일을 여러 페이지에 적용할 수 있습니다. 이 스타일시트 파일을 변경하면 모든 페이지의 스타일도 이에 따라 변경됩니다. 동일한 스타일의 페이지로 다수의 웹사이트를 만들 때 매우 유용합니다. 중복 작업량을 줄일 뿐만 아니라 향후 수정 및 편집이 용이하고 탐색 시 반복되는 코드 다운로드도 줄어듭니다.

스타일 시트 파일은 텍스트 편집기(예: 메모장)를 사용하여 열고 편집할 수 있습니다. 일반적으로 스타일 시트 파일 확장자는 .css입니다. 콘텐츠는 정의된 스타일 시트이며 HTML 태그를 포함하지 않습니다. mystyle.css 파일의 콘텐츠는 다음과 같습니다.
hr {color: sienna}
p {margin-left: 20px}
body {ground-image: url("images/back40.gif")} /*가로선의 색상을 흙빛 노란색으로 정의합니다. 단락 왼쪽의 빈 여백은 페이지의 배경 이미지입니다. 이미지 디렉토리에 있는 back40.gif 파일입니다*/

2. 내부 스타일 시트
내부 스타일 시트는 페이지의 < 스타일이 페이지에 적용됩니다. < style > 태그의 사용법은 다음 예에서 확인할 수 있습니다. 🎜>코드 복사


코드는 다음과 같습니다.

… } body {Background-image: url(" Images/back40.gif")}  …… 

 

참고: 일부 하위 버전 브라우저에서는 스타일 태그를 인식할 수 없습니다. 이는 낮은 버전의 브라우저가 스타일 태그의 콘텐츠를 무시하고 스타일 태그의 콘텐츠를 페이지에 텍스트로 직접 표시한다는 의미입니다. 이러한 상황을 방지하기 위해 HTML 주석(< !-- Comments -- >)을 사용하여 콘텐츠를 표시하지 않고 숨깁니다.




코드 복사


코드는 다음과 같습니다:

;!--

hr {color: sienna} p {margin-left: 20px } body {배경 이미지: url("images/back40.gif")} -->    …  🎜>

3. 외부 스타일 시트 가져오기
외부 스타일 시트 가져오기는 내부 스타일 시트의 < 스타일 >에서 가져오기를 의미합니다.
< ;head>
……
경로입니다. 이 방법은 스타일 시트에 연결하는 방법과 매우 유사하지만 외부 스타일 시트를 가져오는 입력 방법이 더 많은 장점이 있습니다. 본질적으로 내부 스타일 시트에 저장되는 것과 동일합니다.
참고: 외부 스타일 시트 가져오기는 다른 내부 스타일 시트보다 먼저 스타일 시트 시작 부분에 있어야 합니다.

4. 인라인 스타일
인라인 스타일은 HTML 태그에 혼합되어 있어 요소에 대해 별도의 스타일을 쉽게 정의할 수 있습니다. 인라인 스타일을 사용하는 것은 스타일 매개변수를 HTML 태그에 직접 추가하는 것입니다. 스타일 매개변수의 내용은 다음 예와 같이 CSS 속성 및 값입니다.

>