html - para - lista de codigos css
¿Cuál es la diferencia si pongo el archivo css dentro de<head> o<body>? (11)
Normalmente los archivos css se ponen dentro de <head></head> , ¿qué pasa si lo pongo dentro de <body></body> , qué diferencia hará?
¿Qué diferencia hará?
Pros: A veces es más fácil aplicar ciertos atributos en ciertos lugares, especialmente si el código se genera sobre la marcha (como crear a través de php y cada una de las listas de tamaño dinámico necesita su propia clase ... como por ejemplo, los tiempos de los cambios).
Contras: Un poco más lento, puede que no funcione algún día en un futuro lejano.
Mi opinión general al respecto: No lo hagas, no es necesario, pero si tienes que hacerlo, no te quedes dormido.
Además de las respuestas anteriores, aunque poner un bloque de código de estilo dentro del elemento puede funcionar en navegadores modernos (aunque eso todavía no lo hace correcto), siempre existe el peligro, particularmente con navegadores antiguos, de que el navegador muestre el código como texto a menos que la sección de estilo esté incluida dentro de una sección CDATA.
Por supuesto, la otra cosa con ponerlo dentro del elemento, aparte de los estilos en línea, es que no cumple con las especificaciones de W3C HTML / XHTML es que cualquier página que contenga el cuerpo fallará en el validador W3C. Siempre es más fácil buscar errores en los problemas de visualización inesperados si todo el código es válido, lo que facilita la detección de errores. Un elemento HTML no válido puede afectar adversamente el desgarro de cualquier elemento más allá de donde ocurre en el código, por lo que puede obtener efectos inesperados que tienen elementos en lugares donde no deberían estar, porque cuando un navegador encuentra un elemento no válido, simplemente hace que sea mejor adivinar cómo debería mostrarlo, y diferentes navegadores pueden tomar decisiones diferentes sobre cómo lo representan.
Ya sea que use un tipo de documento transitorio o estricto, aún no sería válido de acuerdo con las especificaciones de HTML (X).
Al poner CSS en el cuerpo, significa que se carga más tarde. Es una técnica que algunos usan para permitir que el navegador empiece a dibujar la interfaz más rápido (es decir, elimina un paso de bloqueo). Esto es importante para la experiencia del usuario en SmartPhones.
Hago lo mejor que puedo para mantener una pequeña CSS en el <head> y muevo el resto en la parte inferior. Por ejemplo, si una página usa JQuery UI CSS, siempre la muevo en la parte inferior de <body> , justo antes de los enlaces a JQuery javascript. Al menos, todo el elemento no Jquery ya puede dibujarse.
Aunque la etiqueta de style no está permitida en el cuerpo, la etiqueta de link es, por lo que siempre que haga referencia a una hoja de estilo externa, todos los navegadores deberían representar y usar el CSS correctamente cuando se usen en el body .
Fuente: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
De hecho, vencerías el propósito de usar CSS al poner los estilos en el cuerpo. El punto sería separar el contenido de la presentación (y la función). De esta manera, cualquier cambio en el estilo se puede hacer en la hoja de estilo, no en el contenido. Una vez que utiliza el método de estilo en línea, cada página que tiene un estilo en línea necesita cambiarse una por una. Tedioso, y arriesgado ya que podría perder una página o tres, o diez.
Usando una hoja de estilo, solo necesita cambiar la hoja de estilo; los cambios se propagan automágicamente a cada página HTML que se vincula a la hoja de estilo.
El punto de Neonble es también otra gran razón; si desordena el HTML al agregar CSS en línea, la representación se convierte en un problema. HTML no arroja excepciones a su código. En cambio, se apaga y lo renderiza de la mejor manera posible, y continúa.
Adherirse a los estándares web mediante el uso de una hoja de estilo lo convierte en un mejor sitio web. Y cuando necesite ayuda porque las cosas en su página no son exactamente de la manera que usted las quiere, colocar su CSS en la cabeza y no en el cuerpo lo convierte en una mejor solución de problemas para usted y para cualquier persona que solicite ayuda.
Head está diseñado para (Citando el W3C):
"información sobre el documento actual, como su título, palabras clave que pueden ser útiles para los motores de búsqueda y otros datos que no se consideran contenido del documento "
Ver la estructura global de un documento HTML . Como CSS no es contenido del documento, debe estar en la cabeza.
Además, cualquier otro desarrollador web esperará verlo allí, así que no confundas las cosas poniéndolo en el cuerpo, ¡incluso si funciona!
El único CSS que debes poner en el cuerpo es CSS en línea , aunque normalmente evito los estilos en línea.
La diferencia es. La carga de la página es asincrónica, por lo que si tiene una hoja de estilo externa, cargará el archivo css inmediatamente cuando llegue a la etiqueta de enlace, por eso es bueno tenerlo en la parte superior de la cabeza.
Las versiones más recientes de la especificación HTML ahora permiten la etiqueta <style> dentro de los elementos del cuerpo. https://www.w3.org/TR/html5/dom.html#flow-content También el atributo de scoped que solía ser un requisito previo para tener una etiqueta de style en el body ahora está obsoleto.
Esto significa que puede usar la etiqueta de style cualquier lugar que desee, las únicas implicaciones son la disminución del rendimiento de la página debido a posibles reflujos / repintes una vez que el explorador golpea los estilos más abajo en el árbol de la página.
Respuesta obsoleta:
La etiqueta <style> no está permitida dentro de <body> acuerdo con las especificaciones de w3. (Por supuesto, puede aplicar estilos en línea a través de <div style="color:red"> si es necesario, pero generalmente se considera una mala separación de estilo y contenido)
Los estándares ( HTML 4.01: el elemento de estilo ) especifican claramente que la etiqueta de estilo solo está permitida dentro de la etiqueta de cabecera. Si coloca etiquetas de estilo en la etiqueta corporal, los navegadores intentarán sacar el máximo provecho de ellas de ser posible.
Es posible que un navegador ignore una etiqueta de estilo en el cuerpo si especifica un tipo de documento estricto. No sé si algún navegador actual hace esto, pero no cuento con que todas las versiones futuras estén tan relajadas sobre dónde colocas el elemento de estilo.
Poner el <style> en el cuerpo funciona bien con todos los navegadores modernos.
Yo había estado usando esto en eBay.
Si funciona, no lo patees.
Solo para agregar a lo que jdelStrother ha mencionado sobre las especificaciones de w3 y ARTstudio sobre la representación del navegador.
Se recomienda porque cuando tienes el CSS declarado antes de que comience <body> , tus estilos ya se han cargado. De esta forma, los usuarios ven rápidamente que algo aparece en sus pantallas (por ejemplo, colores de fondo). De lo contrario, los usuarios ven la pantalla en blanco durante un tiempo antes de que el CSS llegue al usuario.
Además, si deja los estilos en algún lugar de <body> , el navegador tiene que volver a procesar la página (nueva y antigua al cargar) cuando se hayan analizado los estilos declarados.