¿Cómo se especifican los atributos de fuente para todos los elementos en una página web html?

Cuando configuro la familia de fuentes, el tamaño de fuente, el color, etc., parece que algunos elementos anidados anulan estos con valores predeterminados de navegador desagradables.¿Cómo se especifican los atributos de fuente para todos los elementos en una página web html?

¿Debo realmente especificar esas docenas de veces para cualquier tipo de elemento en mi página, o hay una manera de configurarlas globalmente de una vez y para siempre?

¿Cómo hacer eso?

Fuente

2010-10-15 Proud Member

¿Cómo es exactamente lo que actualmente marcan la familia de fuentes, tamaño ...? – thecoop

166

* { 
font-size: 100%; 
font-family: Arial; 
}

El asterisco implica todos los elementos.

Fuente

2010-10-15 12:57:14 Bazzz

+12

Esto funciona, pero no es la mejor solución. Cuando el navegador ve el '*', recorre todos los elementos HTML de la página y les aplica el CSS. Incluso para elementos donde la regla no tiene ningún sentido. Dependiendo del tamaño del HTML, esto puede ralentizar la renderización de la página. –

De acuerdo, pero aplica el CSS a TODOS los elementos, como solicitó BugAlert. Si uno quiere efectuar TODOS los elementos, uno puede esperar que el rendimiento se reduzca un poco. :) – Bazzz

También puede agregar! Important al final de cada declaración de estilo para estar a salvo de otras declaraciones de estilo que superan a esta. – Sam

Si especifica los atributos CSS para su elemento body, debe aplicarse a cualquier elemento dentro de <body></body>, siempre que no los anule posteriormente en la hoja de estilo.

Fuente

2010-10-15 12:37:23

se puede establecer en el cuerpo de la etiqueta

body 
{ 
    font-size:xxx; 
    font-family:yyyy; 
}

Fuente

2010-10-15 12:37:42 jimplode

+12

Esto no es exacto porque la mayoría de los navegadores no aplicarán esta fuente a algunos elementos (los elementos no heredarán el estilo de fuente) –

@ travis-146 ¿qué navegadores? ¿Qué elementos? usted sabe que hay una especificación que todos los navegadores deben seguir. – Bamieh

Si está utilizando Internet Explorer, lo más probable es que volverá a los valores por defecto del navegador para ciertos elementos, como las tablas. Puede contrarrestarlo con algo como el siguiente CSS:

html, body, form, fieldset, table, tr, td, img { 
    margin: 0; 
    padding: 0; 
    font: 100%/150% calibri,helvetica,sans-serif; 
} 

input, button, select, textarea, optgroup, option { 
    font-family: inherit; 
    font-size: inherit; 
    font-style: inherit; 
    font-weight: inherit; 
} 

/* rest of your styles; like: */ 
body { 
    font-size: 0.875em; 
}

Editar: es posible que desee leer sobre restablecimientos de CSS; ver hilos como this one

Fuente

2010-10-15 12:43:46 Paul

No puedo enfatizar suficientemente este consejo: use una hoja de estilo de restablecimiento, luego configure todo explícitamente. Reducirá a la mitad el tiempo de desarrollo de CSS entre navegadores.

Trate de Eric Meyer reset.css.

Fuente

2010-10-15 19:07:58

Para utilizar este reset.css, ¿acabo de vincular la hoja de estilo en mi página o tengo que modificarla? Básicamente, necesito tener la misma familia de fuentes y tamaño en todos los principales navegadores. ¿El reset.css me ayuda a hacer eso por defecto? –

Tiendo a copiar y pegar al principio de mi hoja de estilo en lugar de vincularlo por separado, guarda una solicitud HTTP. Le ayudará a establecer estilos coherentes en todos los navegadores, ya que pone a cero todo: los únicos estilos serán los que escriba. –

¡Gracias! Lo intenté y ha resuelto la mayoría de mis problemas. Sin embargo, todavía puedo ver una diferencia en el tamaño de fuente entre Chrome y Firefox a pesar de las especificaciones de mi hoja de estilos de la misma. Alguna idea sobre esto? Además, ¿es esta una buena práctica? –

¿Cómo se especifican los atributos de fuente para todos los elementos en una página web html?

Respuesta

Cuestiones relacionadas