계단식 스타일 시트

스타일을 마크업과 연결하는 세 가지 방법이 있습니다.

외부 CSS

이것은 아마도 가장 일반적입니다. link 값이 "stylesheet"인 rel 요소를 사용하면 href 속성을 사용하여 URL을 가리킵니다. 해당 URL은 현재 문서에 적용되는 스타일 시트입니다("링크된 리소스의 _rel_ationship은 현재 문서의 '스타일시트'입니다.").

<link rel="stylesheet" href="/path/to/styles.css">

이론상으로는 HTTP 헤더를 사용하여 스타일 시트를 문서와 연결할 수 있지만 실제로는 많은 브라우저가 이를 지원하지 않는다고 생각합니다.
@import 규칙이 다른 스타일보다 먼저 선언되는 한 CSS 자체에서 @import 선언을 사용하여 외부 스타일 시트를 가져올 수도 있습니다.

@import url('/path/to/more-styles.css');

link rel="stylesheet"를 사용하여 스타일을 적용하면 차단 요청입니다. 브라우저는 HTML을 렌더링하기 전에 스타일 시트를 가져옵니다. HTML 요소가 화면에 어떻게 그려질지 알아야 CSS가 구문 분석될 때까지 HTML을 렌더링할 수 없습니다.

임베디드 CSS

문서에서 직접 style 요소 안에 CSS 규칙을 배치할 수도 있습니다. 이것은 일반적으로 문서의 head에 있습니다.

<style>
element {
    property: value;
}
</style>

이와 같이 문서의 head에 CSS를 포함하면 외부 스타일 시트와 같은 네트워크 요청이 없으므로 렌더링 차단 동작이 없습니다.
style 요소 안에 모든 CSS를 넣을 수 있습니다. 즉, @import 문을 사용하여 외부 CSS를 로드하기 위해 임베디드 CSS를 사용할 수 있습니다(시작 부분에 해당 @import 문이 나타나는 한).

<style>
@import url('/path/to/more-styles.css');
element {
    property: value;
}
</style>

그러나 다시 네트워크 요청을 받게 됩니다.

인라인 CSS
style 속성을 사용하면 CSS 규칙을 요소에 직접 적용할 수 있습니다. 이것은 보편적인 속성입니다. 모든 HTML 요소에서 사용할 수 있습니다. 이것이 반드시 스타일이 작동한다는 것을 의미하지는 않지만 style 속성의 존재로 인해 마크업이 무효화되지 않습니다.

<element style="property: value">
</element>

외부 CSS와 임베디드 CSS는 특이성에 아무런 영향을 미치지 않는 반면, 인라인 스타일은 특이성에 긍정적인 영향을 미칩니다. 이 방법으로 적용된 모든 스타일은 외부 또는 포함된 스타일을 무시하는 것이 거의 확실합니다.

JavaScript 및 문서 개체 모델을 사용하여 스타일을 적용할 수도 있습니다.

element.style.property = 'value';

이러한 방식으로 DOMstyle 객체를 사용하는 것은 인라인 스타일과 동일합니다. 방사성 특이성은 여기에도 적용됩니다.

외부 스타일 시트 또는 내장 CSS에 지정된 스타일 선언은 캐스케이드 규칙을 따릅니다. 값은 나타나는 순서에 따라 재정의될 수 있습니다. 개별적이지만 관련성이 있는 특수성 규칙과 결합하면 매우 강력할 수 있습니다. 그러나 캐스케이드와 특수성이 어떻게 작동하는지 이해하지 못한다면 결과는 예상치 못한 결과를 초래할 수 있습니다. 그런 상황에서 인라인 스타일은 매우 매력적으로 보입니다. 캐스케이드가 없고 모든 것이 동일한 특수성을 갖습니다. 그러나 인라인 스타일을 사용한다는 것은 CSS에서 C를 버리는 것과 같은 많은 힘을 포기한다는 것을 의미합니다.

웹 성능을 위한 일반적인 기술은 추가 네트워크 요청을 피하기 위해 외부 CSS보다 내장된 CSS를 선호하는 것입니다(최소한 첫 번째 방문에서는 HTML이 이미 로드된 후 외부 스타일 시트를 캐싱하는 영리한 기술이 있습니다). 이것을 일반적으로 CSS 인라인이라고 합니다. 그러나 실제로는 CSS 포함이라고 해야 합니다.

이 언어 혼합은 내가 죽게 될 언덕이 아니지만(그 언덕은 블로그 게시물을 블로그로 지칭할 것입니다) 지적할 가치가 있다고 생각했습니다.