어떻게 웹 페이지 에 CSS 를 삽입 합 니까? 앞에서 우 리 는 CSS 의 문법 을 이 해 했 지만 브 라 우 저 에 효 과 를 나타 내 려 면 브 라 우 저 를 식별 하고 호출 해 야 한다.브 라 우 저 에서 스타일 시트 를 읽 을 때 텍스트 형식 에 따라 읽 어야 합 니 다.페이지 에 스타일 시트 를 삽입 하 는 네 가지 방법 을 소개 합 니 다.외부 스타일 시트,내부 스타일 시트,외모 스타일 시트 와 내장 스타일 을 가 져 옵 니 다. 1. 외부 스타일 시트 에 연결 외부 스타일 시트 에 연결 하 는 것 은 스타일 시트 를 스타일 시트 파일 로 저장 한 다음 페이지 에서< link >이 스타일 시트 파일 에 링크 를 표시 합 니 다.이 표 시 는 페이지 에 넣 어야 합 니 다< head >구 내,다음 과 같 습 니 다.
<head>
……
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
……
</head>
이 예 는 브 라 우 저 가 my style.css 파일 에서 문서 형식 으로 정 의 된 스타일 시트 를 읽 는 것 을 나타 낸다.rel="stylesheet"는 페이지 에서 이 외부 스타일 시트 를 사용 하 는 것 을 말 합 니 다.type="text/css"는 파일 의 형식 이 스타일 시트 텍스트 를 말 합 니 다.href="my style.css"는 파일 이 있 는 위치 입 니 다.미디어 는 미디어 유형 을 선택 하 는데 이런 미디어 는 화면,종이,음성 합성 장치,점자 읽 기 장치 등 을 포함한다. 외부 스타일 시트 파일 을 여러 페이지 에 적용 할 수 있 습 니 다.이 스타일 시트 파일 을 바 꿀 때 모든 페이지 의 스타일 이 달라 집 니 다.같은 스타일 페이지 의 사 이 트 를 대량으로 만 들 때 매우 유용 하 다.중복 되 는 작업량 을 줄 일 뿐만 아니 라 앞으로 의 수정,편집 에 도 유리 하고 조회 할 때 중복 다운로드 코드 도 줄 였 다. 스타일 시트 파일 은 모든 텍스트 편집기(예:메모 장)로 열 고 편집 할 수 있 습 니 다.일반 스타일 시트 파일 확장 자 는.css 입 니 다.내용 은 정 의 된 스타일 시트 입 니 다.HTML 표 시 를 포함 하지 않 습 니 다.my style.css 이 파일 의 내용 은 다음 과 같 습 니 다. hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} /*수평선 의 색 을 토황 으로 정의 하기;단락 왼쪽 의 공백 거 리 는 20 픽 셀 입 니 다.페이지 배경 그림 은 images 디 렉 터 리 의 back 40.gif 파일*/ 2. 내부 스타일 시트 내부 스타일 시트 는 스타일 시트 를 페이지 에 넣 는< head >지역 에서 이 정 의 된 스타일 은 페이지 에 적 용 됩 니 다.스타일 시트 는< style >태그 삽입,다음 예 에서 볼 수 있 습 니 다< style >태그 사용 방법:
<head>
……
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
……
</head>
주의:일부 저 버 전의 브 라 우 저 는 style 표 시 를 식별 할 수 없습니다.이 는 저 버 전의 브 라 우 저 는 style 태그 의 내용 을 무시 하고 style 태그 의 내용 을 텍스트 로 페이지 에 직접 표시 합 니 다.이러한 상황 이 발생 하지 않도록,우 리 는 HTML 주석 을 추가 하 는 방식(< !-- 주석 -- >）내용 을 숨 기 고 표시 하지 않 기:
<head>
……
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
……
</head>
3. 외부 스타일 시트 가 져 오기 외부 스타일 시트 가 져 오기 란 내부 스타일 시트 의< style >외부 스타일 시트 를 가 져 옵 니 다.가 져 올 때@import 로 다음 인 스 턴 스 를 보십시오. ……
…… 예 중@import “mystyle.css 는 mystyle.css 스타일 시트 를 가 져 오 는 것 을 표시 합 니 다.사용 할 때 외부 스타일 시트 의 경 로 를 주의 하 십시오.방법 은 스타일 시트 에 체인 으로 들 어 가 는 방법 과 비슷 하지만 외부 스타일 시트 입력 방식 을 가 져 오 는 것 이 유리 합 니 다.실질 적 으로 그것 은 내부 스타일 시트 에 존재 하 는 것 과 같다. 메모:외부 스타일 시트 를 가 져 오 려 면 스타일 시트 의 시작 부분 에 있어 야 합 니 다.다른 내부 스타일 시트 위 에 있어 야 합 니 다. 4. 인 라인 스타일 내장 스타일 은 HTML 태그 에 섞 여 사용 되 며,이러한 방법 으로 특정한 요소 에 대해 스타일 을 간단하게 정의 할 수 있 습 니 다.내장 스타일 의 사용 은 HTML 태그 에 style 인 자 를 직접 추가 하 는 것 입 니 다.스타일 매개 변수의 내용 은 바로 CSS 의 속성 과 값 입 니 다.다음 과 같 습 니 다. 이것 은 단락 이다. 스타일 매개 변수 뒤에 있 는 따옴표 의 내용 은 스타일 시트 괄호 안에 있 는 내용 과 같 습 니 다. 메모:style 인 자 는 임의의 BODY 내 요소(BODY 자체 포함)에 적용 할 수 있 습 니 다.BASEFONT,PARAM,SCRIPT 를 제외 합 니 다.
