body and (*) Properties in css
Are body properties and * properties different?
I always use body and html properties the same way. Can I use * properties with body and html?
And what should be different in * versus body properties?
I don't understand why it is necessary to use both these properties?
If I use one of them does it create any problem开发者_运维知识库s?
I use this
*{
margin:0;
padding:0;
background:#FFF;
}
and in body
body, html{
margin:0;
padding:0;
background:#FFF;
font:normal 12px verdana;
color:#0086ca;
}
when I use body, html it changes the background. When I remove background from * it didn't change bg color.
* (Asterisk) - It is a wildcard, this means it will select all elements within that portion of the DOM.
It's a universal rule which affect on every element.
for example:
Margin every element on the page
* {
margin: 10px;
}
All HTML components will have those attributes.
Body affects only on the body tag...The elements within the tag aren't affected - (they are not getting the same attributes.)
body applies to the <body> tag, while * applies to every tag. An example of the difference can be seen in the following:
body { margin: 2cm; }
versus
* { margin: 2cm; }
The first gives the body a margin – the second gives every element a margin.
On the other hand, the following code:
body { font-family: Courier; }
will change the font family in the whole document since CSS uses cascading styles, i.e. nested tags inherit certain style properties from their parents – in this case, the font.
Using * in CSS matches any element. Using it alone is rarely useful, because you will target every element in the page.
If you for have html code like this:
<html>
<head>
<title></title>
<style>
body { font-size: 50px; }
</style>
</head>
<body>
<div>
<form>
Name: <input type="text"/>
</form>
</div>
</body>
</html>
The font size set for the body will affect the text "Name:", but it will not affect the font size of the input element, as it has a specific size set by default.
If you now add the style * { border: 10px solid red; font-size: 100px; } this will put a border on the body, div, form and input elements, and both the text and the input element will get the font size.
The * selector is more useful in combination with other selectors, like selecting any child element to a specific element:
#Menu > * { float: left; }
Regarding what to use for the html and body element, you only need to set the margin, padding and background for the body element.
加载中,请稍侯......
精彩评论