CSS로 XML을 사용하는 방법

CSS 스타일 HTML 페이지에 익숙하다면 형식화의 개념을 이해할 것입니다. XML 마크 업 언어가 시작될 때 데이터 표시는 약간 복잡했지만 스타일 시트와 함께 변경되었습니다.

스타일 시트 참조를 추가하여 XML 코드를 웹 페이지로 형식화하고 표시 할 수 있습니다. CSS 또는 다른 형식이 없으면 XML은 브라우저가 서식 지정 문서를 찾을 수 없다는 오류가있는 기본 텍스트로 나타납니다.

XML 스타일 지정 예제

간단한 스타일 시트는 요소를 나열하고 데이터를 표시하는 데 필요한 형식화 속성 만 필요합니다.

이 코드는 프로세서에 어떤 요소를 표시하고 웹 페이지에서 어떻게 표시해야 하는지를 알려줍니다.

샘플 {배경색 : #ffffff; 너비 : 100 %;} mymessage {디스플레이 : 블록; 배경색 : # 999999; margin-bottom : 30pt;} body {font-size : 50 %}

서식 파일의 첫 번째 행은 루트 요소입니다. 루트의 속성은 전체 페이지에 적용되지만 각 태그에 대해 변경됩니다. 즉, 페이지의 배경색을 지정할 수 있고 각 섹션에 대해 다시 배경색을 지정할 수 있습니다.

이 파일을 XML 파일과 동일한 디렉토리에 저장하고 파일 확장자가 .CSS인지 확인하십시오.

CSS에서 XML로 링크

이 시점에서 이들은 두 개의 완전히 별개의 문서입니다. 프로세서는 웹 페이지만들기 위해 함께 작업하기를 원합니다.

CSS 파일의 경로를 식별하는 문장을 XML 문서 의 맨 위에 추가하여이 문제를 해결할 수 있습니다. 이 문은 다음과 같이 초기 XML 선언문 바로 아래에 위치합니다.

이 예제에서 CSS 파일은 products.css 이며, XML 문서에서 그 이름이 레이블로 지정된 이유입니다. CSS 파일에 대해 선택한 파일 이름으로 변경하십시오.