Veo a veces que las personas aplican estilos de CSS globales a html, a veces los veo aplicarlos a body, tanto con css en bruto como con javascript.¿Deberían establecerse estilos de CSS globales en el elemento html o en el elemento de cuerpo?
¿Hay alguna diferencia entre los dos? ¿Cuál es el estándar para hacer un estilo de CSS global? ¿Hay algo que deba saber al elegir entre ellos?
Supongo que el "estilo de página global" aquí se refiere a elementos como fuentes, colores y fondos.
Personalmente, aplicar un estilo página global, en su mayor parte, a body y los selectores de elementos simples (p, h1, h2, h3..., input, img, etc). Estos elementos están más estrechamente relacionados con la presentación del contenido de una página HTML al usuario.
Mi razón de esto es simple: los atributos de presentación bgcolor, background, text, topmargin, leftmargin y otros recibieron al elemento body, no el elemento html. Estos atributos ahora se convierten en their respective CSS rules with extremely low precedence in the cascade:
La UA puede optar por otorgar atributos de presentación en un documento fuente HTML. Si es así, estos atributos se traducen a las reglas de CSS correspondientes con una especificidad igual a 0, y se tratan como si se insertaran al principio de la hoja de estilos del autor.
mayoría, si no todas las implementaciones yo sepa va a convertir éstos en reglas CSS en body, en base a sus equivalentes HTML. Otros como link, alink y vlink pasarán a ser a:link, a:active y a:visited respectivamente.
Por supuesto, hay que señalar que el CSS en sí no tiene realmente ningún semántica a que per se, ya que es un lenguaje de estilo en sí mismo que es totalmente independiente de la estructura del contenido de un documento HTML. Aunque el introduction to CSS2.1 cubre los aspectos básicos del diseño de un documento HTML, tenga en cuenta que la sección se denomina no normativa (o informativa); esto significa que no establece reglas duras y rápidas para que sigan los implementadores de CSS. En cambio, simplemente proporciona información para los lectores.
Dicho esto, ciertos estilos se pueden aplicar a html para modificar el comportamiento de la ventana gráfica. Por ejemplo, para ocultar las barras de desplazamiento de páginas utilizan:
html {
overflow: hidden;
}
También puede aplicar reglas a ambos htmlbody y para efectos interesantes; consulte las siguientes preguntas para obtener más detalles y ejemplos:
Tenga en cuenta que no es html la ventana; la ventana gráfica establece un bloque contenedor inicial en el que se encuentra html. Ese bloque contenedor inicial no se puede segmentar con CSS, porque en HTML, el elemento raíz es html.
Tenga en cuenta también que, técnicamente, no hay ninguna diferencia entre las propiedades que se aplican a html y body que se heredan de forma predeterminada, tal como font-family y color.
Por último, pero no menos importante, aquí hay una excelente article que detalla las diferencias entre html y body en términos de CSS. En resumen (cita de su primera sección):
- Los
htmlybodyelementos son entidades distintas a nivel de bloque, en una relación padre/hijo.- altura y la anchura del elemento
htmlson controlados por la ventana del navegador.- Es el elemento
htmlque tiene (de forma predeterminada)overflow:auto, lo que provoca que las barras de desplazamiento aparezcan cuando sea necesario.- elemento El cuerpo es (por defecto)
position:static, lo que significa que niños posicionado de la misma son posicionado con relación al sistema de coordenadas del elementohtml.- En casi todos los navegadores modernos, el desplazamiento desde el borde de la página incorporada se aplica a través de un
marginen el elementobody, nopaddingen el elementohtml.
A medida que el elemento raíz, html está más estrechamente asociada con la ventana del navegador que body (que es por eso que dice html tiene overflow: auto de barras de desplazamiento). Sin embargo, tenga en cuenta que las barras de desplazamiento no necesariamente se generan con el elemento html. Por defecto, es el puerto de vista que genera estas barras de desplazamiento; los valores de overflow se transfieren simplemente (o propagan) entre body, html, y el área de visualización, dependiendo de cuáles son los valores que ha establecido. Los detalles de todo esto están cubiertas en la especificación CSS 2.1, que says:
las AU deben aplicar la propiedad 'overflow' situado en el elemento raíz de la ventana gráfica. Cuando el elemento raíz es un elemento HTML "HTML" o un elemento XHTML "html", y ese elemento tiene un elemento HTML "cuerpo" o un elemento XHTML "cuerpo" como un niño, los agentes de usuario deben vez aplicar la propiedad 'overflow' desde el primer elemento secundario de ese tipo hasta la ventana gráfica, si el valor en el elemento raíz es 'visible'. El valor 'visible' cuando se usa para la ventana gráfica debe interpretarse como 'auto'. El elemento a partir del cual se propaga el valor debe tener un valor utilizado para 'desbordamiento' de 'visible'.
El último punto probablemente tiene sus raíces en las mencionadas topmargin y leftmargin atributos del elemento body.
Si desea diseñar solo el contenido que se mostrará, la orientación del elemento <body> guarda las reglas de estilo un nivel innecesario de conexión en cascada.
¿Hay algún motivo por el que desee aplicar estilos a las etiquetas <title>, <meta>, <script> etc ...? Eso sucedería apuntando al <html>.
Dale un golpe. Además: se debe tener en cuenta que el cuerpo funciona como un div, expandiéndose a los contenidos contenidos en el interior, mientras que html abarca toda la ventana gráfica. –