La aplicación de estilos a la etiqueta del cuerpo se aplicará a toda la página, por lo que
body { font-family: Verdana }
se aplicará a toda la página. Esto también podría hacerse con
* {font-family: Verdana}
que se aplicaría a todos los elementos y, por lo tanto, parecería tener el mismo efecto.
Entiendo el principio de que, en primera instancia, el estilo se aplica a una etiqueta, cuerpo para toda la página, mientras que en el segundo ejemplo, la fuente se aplica a cada elemento html individual. Lo que pregunto es cuál es la diferencia práctica al hacer eso, cuáles son las implicaciones y cuál es la razón, la situación o la mejor práctica que lleva a usar uno sobre otro.
Un efecto secundario es sin duda la velocidad (+1 Rob). Estoy más interesado en la razón real para elegir uno sobre el otro en términos de funcionalidad.
fuente
Respuestas:
Diferencias funcionales entre estas dos opciones de selector CSS ... (mi opinión)
cuerpo
El selector universal * (todos los elementos)
Sugerencias
fuente
Intenta algo como esto
en contra
Y vea qué estilos se aplican a las celdas de la tabla.
Hay una diferencia entre "aplicado a todo el documento" y "aplicado a cada elemento del documento" cuando se trata de hojas de estilo en cascada .
Al aplicar un estilo en cascada al cuerpo, se aplica a todas las etiquetas dentro del cuerpo hasta que una etiqueta lo sobrescribe. Luego, el estilo sobrescrito se aplica a todas las etiquetas dentro de esa.
Sin embargo, hay algunos estilos que no caen en cascada, como el margen y el relleno (generalmente donde no tiene sentido). Esos solo se pueden aplicar a etiquetas específicas y ahí es donde un comodín puede ser útil (aunque rara vez).
La mayoría de los estilos no en cascada también tienen un valor de herencia (p. Ej.
margin: inherit
), Que significa "tomar los valores de la etiqueta principal".fuente
He olvidado los detalles completos pero, con el selector *, el rendimiento se ralentiza a medida que se evalúa cada elemento a medida que el navegador analiza el CSS y aplica el estilo. iirc, establecer la fuente, en este caso, solo para el padre hace una referencia para cada elemento y no se necesita trabajo adicional.
También hay otros problemas, pero, una vez más, no los recuerdo todos y no los he usado * en años.
fuente
La pauta general para un buen diseño de CSS es ser lo más específico posible, pero no más.
Entonces, en su ejemplo, aplicar el estilo al elemento del cuerpo sería lo más específico posible y ciertamente más específico que el selector '*'.
fuente
Como otros han mencionado,
body { font-family: Verdana }
seleccionará la fuente Verdena solo para aquellos elementos que hereden lafont-style
propiedad de sus padres, de modo que todos sus padres también hereden la propiedad eventualmente delbody
elemento, y* {font-family: Verdana}
seleccionará la fuente Verdena para todos los elementos. Me gustaría ilustrar la diferencia con un ejemplo:Usando el selector de cuerpo:
Usando el selector universal
*
:Use los códigos css y html de los ejemplos que reconocerá que el
<input>
elemento no hereda el estilo de fuente en absoluto y, por lo tanto, lo que escriba en el formulario obtiene el estilo de fuente predeterminado de la hoja de estilo de agente de usuario. En el segundo ejemplo, el selector universal*
establece explícitamente el estilo de fuente para cada elemento, incluido elinput
elemento.fuente