아래 코드에서는 머리에 넣지 않고 내부 스타일 시트를 본문 태그에 배치했습니다. 단일 페이지 응용 프로그램의 경우 별도의 pagespecific.css 파일이 아닌 해당 페이지에만 적용되는 스타일에 대해이 작업을 수행하려고합니다.
헤드 섹션에 똑같이 넣지 않아 단점이있는 시나리오가 있습니까?
<!-- myPartial.html starts here -->
<!-- Like to keep styles unique to this html right here in this file -->
<div>
<style>
body { background-color: red; }
#myText { color: white; }
</style>
<span id='myText'>Hello</span>
</div>
<!-- myPartial.html ends here --> 답변:
style내부 요소 body요소는 HTML 문법 규칙을 위반하는 것입니다. HTML5 초안에 따르면 scoped속성이 존재하는 경우 일부 조건에서 허용되며이 속성은 일부 브라우저에서 지원됩니다. 반면에 브라우저는 신경 쓰지 않습니다. head와 body요소 의 구분 은 이론적입니다.
그러나 style내부 배치와 반대되는 잘못된 구문을 사용하면 아무것도 얻지 못합니다 head. 일부 저작 환경에서는 기술적 인 한계만으로도 head부품 에 어떤 것도 넣지 못할 수 있습니다 .
style요소와 외부 스타일 시트를 사용하는 문제는 link이 질문과 완전히 직교합니다.
head요소 가 없는지 알 수 없습니다 . HTML 페이지에는 항상 하나가 있습니다.
(SE.SX에 있기 때문에보다 전략적인 접근 방식은 일반적인 기술적 고려 사항에 대한 귀중한 보강 일 수 있습니다.)
[preamble] HTML5 사양은 지속적으로 변화하는 목표이며 확립 된 공통 관행에 대한 후속 정책이 있습니다. 그들은 과거에는 기능을 폐기하고 부활 시켰으며, 다른 사람들의 의미를 바꾸었고, 체계적인 추천의 초점을 바 꾸었습니다. 인류의 모든 지혜를 한 번에 이용할 수있는 것은 영원 토록 쓰여진 것이 아닙니다. 사양은 신성한 진리의 원천이 아닙니다. 때때로 브라우저가 올바른 것은 당연합니다. [/전문]
OP의 상황은 압도적으로 일반적이며 유효합니다.
CMS를 테마로 디자인하고 설치했으며 모든 CSS를 HEAD에서 올바르게로드 한 다음 페이지 편집기를 사용하면 "WhySIWYG"상자가 남게되어 "고맙습니다!" "소스 모드"로 전환하고 HTML 마크 업에서 유형 (붙여 넣기)을 입력합니다 (이전에 다른 곳에서보다 적합한 도구로 제작). 다행히도 STYLE태그를 포함 할 수도 있습니다 (아마도 필터에서 우연히 빠졌기 때문에). 반복되는 영혼을 파괴하는 많은 작업에서 하루가 저장됩니다. 그러나 여전히 페이지 편집 시나리오에서 시스템의 HEAD 요소를 방해 할 수단은 없습니다.
스펙이 그렇게 말했기 때문에 CSS를 HTML 조각으로 간단하게 사용하지 못하게해야합니까?
또는 단일 페이지 AJAX 응용 프로그램이 있습니다.
긴 세션 동안 다시로드하지 않고 실행되며 다양한 임의 소스에서 나오는 신디케이트 된 컨텐츠가 있으며 모두 독립적이고 독립적으로 스타일이 지정되어 있습니다. STYLE내장 STYLE요소 와 함께 제공되는 대신 인라인 속성 만 사용하도록 먼저 변환 해야하는 것은 터무니없는 것입니다.
또한 : a) 속성을 BODY통해 CSS의 어느 곳에 나 이미 CSS를 내장 할 수 STYLE있으므로 CSS는 "이론적으로"합법적입니다. b) Javascript에서 원할 때마다 원하는 스타일로 원하는 것을 이미 수행 할 수 있으므로 CSS는 이미 병리학 적 비 수행 방식으로 오용 할 수 있습니다. 그리고 우리 중 어느 누구도 그러한 기능에 반대하지 않을 것입니다. W3C도 마찬가지입니다.
따라서 STYLE요소의 요소에 대해 무엇이 그렇게 악한가 BODY? HTML 구조에 대한 광범위한 남용에 추가 될 수있는 추가적인 부작용은 무엇입니까? 더 나쁜 성능? 아마. 때때로.
이것이 모든 브라우저에서 지원되는이 매우 유용한 방법을 폐지해야 할 정당한 이유입니까? 백만 마일이 아닙니다!
우리는 바보가 아닙니다. 글쎄요, 전부는 아니거나 항상 그런 것은 아닙니다 ...;) 성능 저하의 위험이있는 기술은 단순히 금지 된 것이 아니라 문서화 할 수 있습니다 . 우리는 웹 초기에 Java 애플릿을 가지고 있었고 살아 남았습니다. 자동차는 잘못 사용되어 불행을 초래할 수 있으며 음식조차도 혼란스럽고 비효율적 인 방식으로 사용될 수 있으며, 먹을 수있는 운전자는 평균 웹 디자이너보다 평균적으로 더 어리 석습니다. 게다가, W3C에게, 걱정할 필요가 없습니다. HTML 땜장이의 화난 무리가 여전히 다리에 STYLE요소를 쏘아서 BODYW3C를지나 복수를 할 수는 없습니다. 그들은 주소를 모른다. 그리고 그들은 다리가 없습니다.
그러니 제발 : STYLE합법화되었다는 목소리를 들으십시오 BODY! 텍스트를 솔직하게 인용하지만 현재 상황보다 나은 실행 가능한 대안을 제공하지 못하는 것은 도움이되지 않습니다. 실제로이 최후의 해결 방법 기술에 대한 위협입니다.
기억하십시오 : HTML5 스펙은 권장 사항 이라고합니다 .
HTML 사양 상태가
범위가 지정된 속성이없는 스타일 요소는 문서 헤드에 표시되도록 제한됩니다.
scoped 속성은 스타일 요소의 부모 요소에 뿌리를 둔 하위 트리에만 적용되어야 함을 나타내는 부울 값입니다.
현재 Firefox 만 범위 속성을 지원합니다. http://www.w3schools.com/tags/att_style_scoped.asp
CSS를 파일과 스타일 태그로 묶어야하는 몇 가지 기술적 이유가 있습니다.
파일을 사용해야하는 의견 기반 이유 :
개인적으로 선호하는 것은 Compass를 사용하여 각 페이지마다 별도의 파일을 유지 한 다음이를 사용하여 모든 파일을 하나의 파일로 컴파일하는 것입니다. 이 단일 파일은 모든 페이지에 포함됩니다. 길을 가면 파일을 항상 어떤 이유로 든 분리해야하지만 그 동안 번거롭지 않습니다.