본문에 스타일 시트를 올바르게로드하는 방법은 무엇입니까?

나는 몸에 <link> 태그를 넣을 수 있고 분명히 작동한다는 것을 알고 있지만 "유효한"html이 아니라는 것을 알고 있으며 파이어 폭스와 같은 엄격한 브라우저에서는 웹 디자이너가 예상하는 모든 동작을 무시하는 문제를 피하고자한다. 공식 명세에 정의되지 않았다.본문에 스타일 시트를 올바르게로드하는 방법은 무엇입니까?

그래서 HTML의 본문 영역에 스타일 시트를로드하는 공식 방법이 있습니까?

출처

2014-11-23 thelolcat

왜 이렇게할까요? 어쩌면 다른 문제가있을 수 있습니다. –

아약스 요청을 통해 페이지를 업데이트 할 때 필요한 스타일 시트를로드하는 데 문제가 하나 있습니다. 나는 html 코드에서 스타일 시트를 검색하는 것을 좋아하지 않는다. 그들은 html을 추가 한 후에 자동으로 작동해야합니다 :/ – thelolcat

모든 스타일 시트를 사용하고 처음부터 전체 스타일 시트를로드하지 않는 이유는 무엇입니까? –

당신은 아래와 같이 동적으로뿐만 아니라 머리에 CSS를 추가 할 수 있습니다

jsCode :

var head = document.getElementsByTagName("head")[0], 
    cssLink = document.createElement("link"); 

cssLink.href = "path/to/filenam.css"; 
cssLink.id="dynamic-css"; 
cssLink.media="screen"; 
cssLink.type="text/css"; 

head.appendChild(cssLink);

출처

2014-12-01 08:13:05

크롬 64에서는'cssLink.rel = "stylesheet"를 추가하기 전까지는 작동하지 않았습니다; –

document.head.appendChild(linkElement);

... linkElement은 귀하의 스타일 링크입니다. 아무도 몸에 물건을 추가하도록 강요하지 않습니다. 단지 머리에 추가하십시오.

출처

2014-11-30 14:15:27 Barney

ProBoards는 내가 몸에 물건을 추가하도록 강요하지만 적어도 스크립팅은 그 문제를 해결하는 데 도움이됩니다. – Tcll

실제로 이전 버전의 HTML에서는 요소를 body 요소에 넣는 것은 불법이며 HTML 문서의 헤드 섹션에만 있어야합니다. 이 link에서이

단지 단지 머리 요소에 스타일 시트를로드, 문서 그래서

의 HEAD 섹션에 표시 할 수있다, 더 할 수 없습니다 내용의 섹션이 있습니다 귀하를위한 이유, 또는 W3.org의 규정을 준수하지 않는 불법적 인 문서를 작성한 사람.

<head> 
    <link rel="stylesheet" href="~/css/file.css" /> 
</head>

그러나 독서에 관심이 있고 또 어떤 조건에서 본문 섹션에 link 요소를 추가 할 수 있는지에 대한 또 다른 질문이 있습니다. 답변 here을 읽어보십시오.

출처

2014-11-30 14:19:45

된 StyleSheet 심지어 HTML5의 본문 요소 내부에 위치 할 수 없습니다. W3C HTML5 specs: The link element에서 견적 다음 rel 속성이 사용됩니다

경우, 요소가 head 요소로 제한됩니다.

본문에는 style scoped 요소를 사용하고 외부 StyleSheet는 @import이라고 가정합니다. 이 예는 확인합니다 : 스타일 시트는 스타일 요소의 부모와 그 하위로 제한됩니다

스타일 요소 만의 첫 번째 자식으로 배치 할 수

<!DOCTYPE html> 
<html> 
<head> 
    <title>CSS In Body Test</title> 
    <style> 
     p { background-color: #CCC; } 
    </style> 
</head> 
<body> 
    <p>Paragraph</p> 
    <div> 
     <style scoped> 
      @import url("subset.css"); 
      /* 
      * the above file contains the following line: 
      * p { background-color: #F00; } 
      */ 
     </style> 
     <p>This paragraph should be red</p> 
     <p>This paragraph should be red</p> 
    </div> 
    <p>Paragraph</p> 
</body> 
</html>

그러나 특정 제약이 있습니다 특정 요소 (문서 참조)

Browser support is almost none 작성 당시

요구 사항이 제약 조건과 충돌하지 않는 경우이 방법을 사용할 수 있습니다. 그렇지 않으면 JavaScript 기반 StyleSheet 삽입 기술을 사용하는 것이 더 적절할 것입니다.

출처

2014-12-01 09:05:56

이것은 더 이상 적용되지 않습니다. https://www.w3.org/TR/html5/links.html#element-statedef-link-stylesheet –

@ThomasKold 예,이 기능을 악용 될 수있는 방법을 살펴본 후 사양을 변경했습니다. –

은 링크 요소로 사용할 수있다 본체

스타일 시트 키워드에 스타일 시트 링크 유효하다. 이 키워드는 스타일 처리 모델에 기여하는 외부 자원 링크를 작성합니다. 이 키워드는 본문입니다.

https://html.spec.whatwg.org/multipage/semantics.html#body-ok https://www.w3.org/TR/html5/links.html#element-statedef-link-stylesheet

출처

2017-03-08 20:27:19

본문에 스타일 시트를 올바르게로드하는 방법은 무엇입니까?

답변

관련 문제