2013-12-20 9 views
3

이것은 이상한 질문 일 수 있습니다. 그러나 HTML 메일 메시지의 미리보기 창으로 사용할 div를 만들려고합니다. 스타일은 인라인으로 처리됩니다. 그래서 div와 그 내용이 외부 페이지에서 스타일을받지 못하게하고 싶습니다.div 스타일과 CSS 스타일의 내용

CSS 또는 자바 스크립트에서이 작업을 수행 할 수있는 방법이 있습니까? 아니면 이전에 설정 한 모든 개별 스타일을 재정의해야합니까?

나는 약간의 코드를 보여줄 것이지만, 나는이 질문을하기를 바랬다. 예를 들어, 내가 사업부 있다고 가정 해 봅시다 : 그것은 그 내용은 유행에 따라 디자인 될 수 있습니다,이 사업부는 큰 페이지의 일부이기 때문에

<div id="somediv"> 
    <h2>Message Header</h2> 
    <p>This is some content</p> 
</div> 

(예 : 여백, 패딩, 글꼴, 글꼴 크기, 색상 등, 등) 및 CSS 파일이 포함되어 있습니다. 스타일을 개별적으로 무시하는 대신 모든 스타일을 무효화 할 수있는 방법이 있습니까?

+1

코드를 표시 – Hiral

+6

왜 그런 목적으로 iframe을 사용하지 않습니까? 어떤 스타일도 상속받지 않습니다. – Pavlo

답변

1

나중에 모든 속성을 all: unset declaration으로 재설정했지만 Firefox 27 이상에서만 사용할 수 있습니다.

지금, 당신은 별도의 문서에서 "내부"콘텐츠를 저장할 수 있으며, iframe을 통해 그것을 포함 :

<iframe src="content.html"></iframe> 

content.html (최소 유효 HTML5 문서) :

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Content</title> 
    </head> 
    <body> 
    <h2>Message Header</h2> 
    <p>This is some content</p> 
    </body> 
</html> 
+0

iframe의 html을 javascript를 통해 설정하려면? – tubaguy50035

+0

@ tubaguy50035'iframe.src = 'content.html''이지만이 내용은이 질문의 범위를 벗어납니다. – Pavlo

0

상속 된 CSS를 다시 작성하고 browser-default-CSS를 사용하지 않으려는 경우 모든 속성 뒤에 !important을 추가 할 수 있습니다. 예 :

#noInherit { 
    background-color: #fff !important; 
} 

상속을 중지 할 수 있는지 확실하지 않습니다. 어쩌면 다른 사람이 당신에게 더 나은 대답을 줄 수 있습니다.

0

CSS에서 null이 없기 때문에 모든 스타일을 제거 할 수 있다고 생각하지 않습니다. 당신은 하나의 큰 덤프

.noStyle{ 
    width: auto; 
    height: auto; 
    etc... 
} 

자동으로 모든 것을 넣을 수 있습니다하지만 난 그냥 부모 (들)의에서 DIV 모든 것을 상속 할 것 같은 그건 당신이 후에있는 효과를 얻을 것이라고 생각하지 않습니다. 당신이 성취하고자하는 바에 대한 더 자세한 내용은 당신이 실행 가능한 해결책을 찾을 수 있도록 도와 줄 수 있지만 현재 제기 된 문제는 "해결 가능하다"고 생각하지 않습니다.

1

주어진 컨테이너 내 모든 항목에 CSS reset 일종의 일을 한 다음 가장 기본적인 여백을 추가하고 다시 "스타일이 바뀌지 않는"것으로 나타날 때까지 기다려야합니다. 그런 다음 인라인 CSS로 가져 가십시오.

또 다른 완전히 다른 접근 방식은 적용된 스타일이 전혀없는 iframe에 메일을 표시하는 것입니다. 아마 할 수 있지만 구현하기가 더 복잡한 것일 수 있습니다.

0

당신은 사용할 수 있습니다 부정 선택 자. 그냥 추가 : 그 div에 적용하지 않으려는 CSS 규칙 전에.

http://www.w3.org/TR/css3-selectors/#negation

하드 작업을 수동으로 할 수 있지만, 당신이 좋아 느낀다면 당신이 그것을 자동화 할 수 있습니다. 최신 브라우저에서만 작동합니다.

다른 방법은 iframe을 사용하는 것입니다. 권장하지 않습니다.

+0

iframe을 "권장하지 않는 이유"는 무엇입니까? – Pavlo

+0

이것은 아마도 iframe에 사용할 수있는 아주 적은 수의 하나 일 것입니다. – tubaguy50035

+0

북마크 및 탐색 문제로 인해 iframe을 사용하지 않는 것이 좋습니다. 어쨌든, 기본 솔루션으로 나쁘지 않습니다. 내 규칙은 : iframe의 url이 변경 될 수있는 경우 iframe을 사용하지 마십시오. – SRachamim