css 스타일 시트 예제

내부 스타일 시트에 정의된 규칙은 외부 CSS 파일에 정의된 규칙을 재정의합니다. CSS의 특성: 인라인 CSS는 우선 순위가 가장 높은 다음 내부/임베디드에 이어 우선 순위가 가장 낮은 외부 CSS가 옵니다. 한 페이지에 여러 스타일 시트를 정의할 수 있습니다. HTML 태그의 경우 스타일이 여러 스타일 시트에 정의되어 있는 경우 아래 순서가 따릅니다. CSS를 추가하는 가장 일반적인 방법은 스타일을 별도의 CSS 파일에 보관하는 것입니다. 그러나 여기에서는 인라인 및 내부 스타일을 사용합니다. 이 HTML 문서를 로드하면 링크 태그가 파일 styles.css의 스타일을 웹 페이지에 로드합니다. 따라서 모든 수준 1 제목 요소는 빨간색 텍스트, 밑줄, 모든 면에 10픽셀의 패딩이 적용된 것으로 나타납니다. 따라서 인라인 스타일은 우선 순위가 가장 높으며 외부 및 내부 스타일 및 브라우저 기본값을 재정의합니다. 캐스케이드는 상이한 매질에 적용할 수 있는 스타일 시트를 포함할 수 있다. LINK 및 STYLE은 모두 미디어 특성과 함께 사용할 수 있습니다. 그런 다음 사용자 에이전트는 현재 매체에 적용되지 않는 스타일 시트를 필터링합니다. 작성자는 대체 스타일 시트 외에 사용자 에이전트가 적용해야 하는 영구 스타일 시트를 지정할 수도 있습니다.

inline 스타일은 두 가지 경우에 사용할 수 있습니다: rel 특성에 키워드 “alternate”을 추가하면 대체 스타일 시트가 됩니다. HTML은 문서의 HEAD 섹션에서 여러 개의 STYLE 요소를 허용합니다. 이 규칙은 초기 예제의 h1에 파란색 이중 선으로 밑줄이 그어집니다. 텍스트 자체는 색상 속성에 정의된 대로 빨간색으로 유지됩니다. 다음 예제에서는 DIV 및 클래스 특성을 사용하여 과학 문서의 추상 섹션을 구성하는 일련의 단락에 대한 텍스트 자리맞추기를 설정합니다. 이 스타일 정보는 문서의 다른 위치에 클래스 특성을 설정하여 다른 추상 섹션에 다시 사용할 수 있습니다. HTML을 통해 작성자는 문서가 렌더링되는 미디어의 특성(예: 그래픽 디스플레이, TV 화면, 핸드헬드 장치, 음성 기반 브라우저, 점자 기반 촉각 장치 등)을 활용하는 문서를 디자인할 수 있습니다. 작성자는 미디어 특성을 지정하여 사용자 에이전트가 스타일 시트를 선택적으로 로드하고 적용할 수 있도록 합니다. 인식된 미디어 설명자 목록을 참조하십시오. 예를 들어 보겠습니다. 서로 직접 모순되는 두 개의 CSS 규칙을 내부 스타일시트에 작성해 보겠습니다.

이렇게 하면 스타일 시트가 “mystyle.css”라는 파일에서 발견되고 디렉터리가 언급되지 않았기 때문에 브라우저는 HTML 파일을 찾은 동일한 디렉토리에서 볼 수 있습니다. 인라인 스타일은 특정 HTML 요소에 적용됩니다. HTML 특성 스타일은 특정 요소에만 적용되는 규칙을 정의하는 데 사용됩니다. 다음은 인라인 스타일을 작성하기 위한 구문을 살펴보겠습니다. 스타일 상속은 CSS 스타일의 계단식 동작의 또 다른 예입니다.