How to make css styles in the document body only specific to a div
On a basic level, we have:
<html>
<head>
</head>
<body>
<div id="Template"></div>
<div i开发者_开发百科d="Content">
<style>h1... h2....</style>
<h1></h1><p></p>.... (Content)
</div>
</body>
</html>
How do i get the style tag within 'Content', to only apply to the Content div, and not the whole page, but I can't alter the content of the style tag (ie adding #Content before each declaration wont work)
We're pulling content in from Google Docs, and want to use their stylesheet on the document to style the content, without destroying the template around the document.
So far - iFrame seems like the only option, I just don't want the container to be fixed height...
Perhaps you can make your style rules for your template be more specific than the Google rules so that your template always uses your rules and not Google's.
You can use jQuery to resize the iframe if it's less of a headache for you:
http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html
Does the importance rule solve this? http://webdesign.about.com/od/css/f/blcssfaqimportn.htm
style tags should only be in the head section.
To get the styles within it to only apply to stuff in the "Content" tag, prefix your selectors with:
#Content h1{
/*only styles for h1 tags inside the Content element*/
}
#Content p{
/*only styles for p tags inside the Content element*/
}
PS although the style tag should be in the head, most browsers will let you place them anywhere. The advantage to putting it in the head is that it can be parsed and be ready to apply before you render any DOM elements that might match it... thus avoid the "FOUC" (Flash Of Unstyled Content)
加载中,请稍侯......
精彩评论