when add such css <style> tags:
* { display:block; } it never interpreted correctly. instead, see? somehow inside <style> becomes part of html body. e.g.:
* { display:block; }<p>paragraph</p> <phrase>phrase</phrase> <pet>pet</pet>this happens anywhere. first time, thought problem stacksnippets. (i.e. live demo stack overflow, 1 i've provided above), checked code pen. jsfiddle. i've gone ahead , made file on server, giving contents inserted in snippet above.
the outcome same. css gets included in html, though applied. (the fix create stylesheet , include using <link>)
the interesting thing, is, seem happen display:*. e.g., following works:
* { color:green; background:red; border:2px solid orange; border-radius:5px; }<p>paragraph</p> <phrase>phrase</phrase> <pet>pet</pet>but once put in styles of last snippet display:*, styles are, again, magically included in html.
* { color:green; background:red; border:2px solid orange; border-radius:5px; display:inline-block; }<p>paragraph</p> <phrase>phrase</phrase> <pet>pet</pet>why happen?
it's styling <head> element , in it, including <style> element css resides in, because css appears character data within <style> element. <link> element on other hand doesn't have content — points separate resource altogether, there nothing inside element displayed.
most browsers implement <head> display: none (and propagate value every descendant), able override targeting them display style. rest of properties still applied <head> , descendants regardless of whether this, without it, won't show in page don't see happening. that's there — there isn't else that's special <head> or related elements.
in other words, far css concerned, following (yes, <style> element style attribute...):
<style style="display: block; font-family: monospace"> p { color: red; } </style>is no different this:
<code style="display: block; font-family: monospace"> p { color: red; } </code>
Comments
Post a Comment