Styling the `<html>` element in CSS?
Can anyone explain to me why can we style the element html?
What are differences between it and body?
I usually see tutorials and multi
-
Offhand, I would say:
<html>is not a visible element per se, and it contains sections for semantic (e.g.<head>) and presentation data (<body>).On the other hand,
<body>is a block for visible elements, so it can be given a presentation style.But people do apply styles to the
<html>element for a couple cases: (a) because all of its child elements will inherit that style, and (b) in special cases like the scrollbar trick that Jamie Dixon mentioned.讨论(0) -
Quite often you'll find people styling the HTML element since it does have an affect on the way the page is rendered.
The most notable style you're likely to see is
html,body{ min-height:101%; }This is used to ensure that the scroll bars in browsers like Firefox, always show on the page. This stops the page shifting left and right when changing between long and short pages.
讨论(0) -
html is the containing element for the whole document, it contains the
<body>which is what is rendered by the browser and<head>which contains meta information on the page/document you are viewing. It has actually no use to be able to style the html element since it isn't rendered by the browser.It can however be used to build you css selectors with (
html div.dataView { color: red }for example)讨论(0) -
The reason we're allowed to style the html element is because it is a DOM element like any other. All DOM elements can be styled to be something they are not, like a container. Take this example:
<html><body>This is my page.</body></html>Using CSS to limit the body to 80% width, setting borders on the body and giving the html a different background color (creating an "off page" effect) would be perfectly acceptable, keeping the semantics of the markup intact without resorting to div clutter.
Here's a technique I discovered for centering containers (vertically and horizontally) on the screen without using tons of divs or tables, or even having to know the size of the centered container.
html { display:table; width:100%; height:100%; } body { display:table-cell; vertical-align:middle; } body > div { # "shrink wraps" the div so you don't have to specify a width. # there's probably a better way to do precisely that, but this works. display:table; margin:0 auto; # center the div }讨论(0) -
You can style the
htmlelement (heck you canhead, title { display: block; }if you like), but browser support is a bit weak (IIRC, Internet Explorer <8 has issues).讨论(0) -
I don't believe you can, but styling
<body>should work for you讨论(0)
加载中...
- 热议问题