selectores - ¿Cuál es la diferencia entre aplicar reglas css a html en comparación con el cuerpo?
selectores css (5)
Alguien escribió aquí que siempre tiene una altura del 100%, ¡pero no es cierto!
Trate de hacer (probado en FF4):
html{
background:yellow;
}
body{
background:red;
height:100px;
}
<body> color <body> afecta el color <html> solo cuando <html> no tiene un conjunto de colores. Lo más molesto aquí es cuando <body> tiene color y <html> , algunas versiones del navegador tendrán problemas con el último elemento de bloque secundario directo con margen. El color se cortará después del elemento y el margen será de color <html> . Siempre es cierto cuando se establece el color <html> .
Por otro lado, cuando se establece el fondo <html> , <body> puede tener, por ejemplo, márgenes. Esto es simplemente un desastre.
La mejor práctica hasta ahora es aplicar color de fondo, fuentes, etc. a ambos. Simplemente cada vez que escribas:
body{}
cambiarlo a
body,html{}
No use ninguna de las propiedades del modelo de caja CSS en <body> y <html> (o no la modifique, solo para tener tranquilidad). Cree un elemento interno (puede ser de un ancho del 100%) y trabaje con él en su lugar.
No veo la diferencia entre:
html {
background: #f1f1f1;
}
y
body {
background: #f1f1f1;
}
Alguna explicacion
Mientras que el body y el html menudo se pueden tratar de la misma manera, no son lo mismo. El body puede tener márgenes, relleno y bordes, y se puede mover en relación con el elemento html . A veces uso el margen del cuerpo y el relleno para hacer una "página" blanca sobre un fondo claro, y se imprime igual que se ve.
Vea este violín para ver un ejemplo simple que muestra que los dos pueden tener diferentes colores de fondo.
El CSS relevante es como he comentado en la respuesta de nomulous:
html {
background-color: #ffffc0;
}
body {
padding: 2em;
margin: 2em;
background-color: white;
border: 1px solid black;
}
También está el elemento :root porque no todos los navegadores (cough.ie.cough) tratan el elemento html como la raíz del DOM.
No hay una diferencia real (si está hablando de dónde aplicar el background , de lo contrario, la respuesta de BoltClock a esta otra pregunta es una mejor opción). html es un elemento, al igual que el body es.
Ambas son opciones válidas y ambas funcionarán en todos los navegadores comunes.
El YUI Reset, por ejemplo, elige establecer un background en el elemento html lugar del body :
http://yui.yahooapis.com/3.3.0/build/cssreset/reset.css
Esto requiere que establezca su background en html , por ejemplo, vea: no se puede cambiar el color de fondo del cuerpo utilizando el restablecimiento de CSS
Consulte: http://dev.w3.org/csswg/css3-background/#special-backgrounds
El fondo del elemento raíz se convierte en el fondo del lienzo y su área de pintura de fondo se extiende para cubrir todo el lienzo, aunque todas las imágenes tienen un tamaño y una posición relativas al elemento raíz como si estuvieran pintadas solo para ese elemento. (En otras palabras, el área de posicionamiento de fondo se determina como para el elemento raíz). Si el valor de ''color de fondo'' de la raíz es ''transparente'', el color de fondo del lienzo depende de la AU. El elemento raíz no vuelve a pintar este fondo, es decir, el valor utilizado de su fondo es transparente.
Y:
Para documentos cuyo elemento raíz es un elemento HTML HTML [HTML401] o un elemento html XHTML [XHTML11]: si el valor computado de ''background-image'' en el elemento raíz es ''none'' y su ''background-color'' es ''transparente'' '', los agentes de usuario deben propagar los valores calculados de las propiedades de fondo del primer elemento HTML BODY o XHTML body child de ese elemento. Los valores utilizados de las propiedades de fondo de ese elemento BODY son sus valores iniciales, y los valores propagados se tratan como si estuvieran especificados en el elemento raíz. Se recomienda que los autores de documentos HTML especifiquen el fondo del lienzo para el elemento BODY en lugar del elemento HTML.
Lo que dice ese muro de texto se demuestra aquí:
-
backgroundsobre solobody: http://jsfiddle.net/hhtzE/ -
backgroundsobrehtmlybody: http://jsfiddle.net/hhtzE/1/ -
backgroundsolohtml: http://jsfiddle.net/hhtzE/2/
Normalmente no debería haber ninguna diferencia en absoluto, ya que se supone que ambos elementos ocupan la pantalla completa. Es como tener un div dentro de otro div. Pero creo que es más correcto diseñar la etiqueta del cuerpo, porque html no es realmente parte del diseño.
html es el padre del cuerpo. Una forma de ver la diferencia es hacer:
html {
overflow: scroll;
}
body {
overflow: scroll;
}
Verá que hay dos conjuntos anidados de barras de desplazamiento, uno que pertenece a html y el que está dentro del cuerpo.