style - title tag html

¿Deberían establecerse los estilos css globales en el elemento html o el elemento del cuerpo? (2)

A veces veo que la gente aplica estilos css globales a html , a veces veo que los aplican al body , tanto con css como con javascript.

¿Hay alguna diferencia entre los dos? ¿Cuál es el estándar para hacer un estilo css global? ¿Hay algo que deba saber al elegir entre ellos?

Si solo desea aplicar un estilo al contenido que se mostrará, la orientación al elemento <body> guarda las reglas de estilo en un nivel innecesario de cascada.

¿Hay alguna razón por la que desee aplicar estilos a las etiquetas <title> , <meta> , <script> etc ...? Eso sucedería al apuntar a <html> .

Supongo que el "estilo de página global" aquí se refiere a cosas como fuentes, colores y fondos.

Personalmente, aplico el estilo de página global, en su mayor parte, al 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 razonamiento para esto es simple: los atributos de presentación bgcolor , background , text , topmargin , leftmargin y otros fueron dados al elemento del body , no al elemento html . Estos atributos ahora se convierten a sus respectivas reglas CSS con una prioridad extremadamente baja en la cascada :

La UA puede optar por respetar los atributos de presentación en un documento fuente HTML. Si es así, estos atributos se traducen a las reglas CSS correspondientes con una especificidad igual a 0, y se tratan como si se insertaran al comienzo de la hoja de estilo del autor.

La mayoría, si no todas las implementaciones que conozco, las convertirán en reglas de CSS en el body , en función de sus equivalentes de HTML. Otros, como link , alink y vlink se convertirán en vlink a:link , a:active y a:visited respectivamente.

Por supuesto, debe tenerse en cuenta que el CSS en sí no tiene ninguna semántica, ya que es un lenguaje de estilo en sí mismo que está completamente separado de la estructura de contenido de un documento HTML. Si bien la introducción a CSS2.1 cubre los aspectos básicos del diseño de un documento HTML, tenga en cuenta que la sección se llama a sí misma no normativa (o informativa); esto significa que no establece reglas estrictas para que los implementadores de CSS sigan. En su lugar, simplemente proporciona información para los lectores.

Dicho esto, ciertos estilos pueden aplicarse a html para modificar el comportamiento de la ventana gráfica. Por ejemplo, para ocultar la página usa barras de desplazamiento:

html { overflow: hidden; }

También puede aplicar reglas tanto a html como a body para efectos interesantes; Vea las siguientes preguntas para detalles y ejemplos:

Tenga en cuenta que html no es la ventana gráfica; la ventana gráfica establece un bloque de contención inicial en el que se encuentra html . Ese bloque inicial que contiene no se puede apuntar con CSS, porque en HTML, el elemento raíz es html .

Tenga en cuenta también que, técnicamente, no hay diferencia entre aplicar propiedades a html y al body que se heredan de forma predeterminada, como font-family y el color .

Por último, pero no menos importante, aquí hay un excelente article que detalla las diferencias entre html y body en términos de CSS. En resumen (citado de su primera sección):

Los elementos html y body son entidades distintas a nivel de bloque, en una relación padre / hijo.
La altura y el ancho del elemento html están controlados por la ventana del navegador.
Es el elemento html que tiene (por defecto) overflow:auto , lo que hace que aparezcan barras de desplazamiento cuando sea necesario.
El elemento del cuerpo es (por defecto) la position:static , lo que significa que los hijos posicionados del mismo están posicionados en relación con el sistema de coordenadas del elemento html .
En casi todos los navegadores modernos, el desplazamiento incorporado desde el borde de la página se aplica a través de un margin en el elemento del body , no el padding en el elemento html .

Como elemento raíz, html está más estrechamente asociado con la ventana del navegador que con el body (por lo que dice que html tiene un overflow: auto para barras de desplazamiento). Sin embargo, tenga en cuenta que las barras de desplazamiento no son necesariamente generadas por el propio elemento html . Por defecto, es la ventana que genera estas barras de desplazamiento; los valores de overflow simplemente se transfieren (o propagan ) entre el body , html y la ventana gráfica, según los valores que establezca. Los detalles de todo esto están cubiertos en la especificación CSS2.1, que says :

Los UA deben aplicar la propiedad de ''desbordamiento'' establecida en el elemento raíz a 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 "BODY" o un elemento XHTML "cuerpo" como elemento secundario, los agentes de usuario deben aplicar la propiedad ''overflow'' desde el primer elemento secundario a 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 ''automático''. El elemento a partir del cual se propaga el valor debe tener un valor usado para "desbordamiento" de "visible".

El último punto de la bala probablemente tenga sus raíces en los atributos de leftmargin topmargin e leftmargin del elemento del body .