¿Por qué y no toman font-family y font-size del cuerpo?

¿Por qué Textarea y textfield no toman la font-family y font-size de font-size del cuerpo?

Vea el ejemplo en vivo aquí http://jsbin.com/ucano4

Código

      texearea font  body { font-family: Verdana, Geneva, sans-serif; font-size:16px }    

some text here

Si es un comportamiento habitual, ¿debería escribir en CSS así? Necesito el mismo estilo en todos

 body,textarea,input { font-family: Verdana, Geneva, sans-serif; font-size:16px } 

¿Y cuántos otros elementos en XHTML que no tomarán estilo de fuente del body {....} ?

De forma predeterminada, los navegadores representan la mayoría de los elementos de formulario (áreas de texto, cuadros de texto, botones, etc.) utilizando los controles del sistema operativo o los controles del navegador. Así que la mayoría de las propiedades de fuente están tomadas del tema que el sistema operativo está usando actualmente.

Tendrá que dirigirse a los elementos del formulario si desea cambiar sus estilos de fuente / texto; sin embargo, debería ser lo suficientemente fácil seleccionándolos, como acaba de hacer.

Hasta donde yo sé, solo los elementos de forma se ven afectados. Fuera de mi cabeza: input , button , textarea , select .

Ciertos controles no están predeterminados para heredar la configuración de fonts. Puede anular esto colocando esto en su CSS:

 textarea { font-family: inherit; font-size: inherit; } 

Todos los navegadores tienen hojas de estilo predeterminadas incorporadas. Por eso, cuando crea una página sin estilos definidos, las tags

son grandes y audaces, y hace que el texto sea negrita. De forma similar, los estilos de fuente para los elementos y se definen en los estilos predeterminados.

Para ver esta hoja de estilo en Firefox, coloca esto en tu barra de direcciones: resource://gre/res/forms.css

De todos modos, debe anular estos estilos como lo haría con cualquier otro estilo como lo hizo en el último ejemplo.

En caso de que se pregunte qué otros estilos están definidos, consulte los archivos CSS en sus recursos. Puede acceder a ellos a través de la url anterior, o buscando en su carpeta res en el directorio de Firefox (por ejemplo: c:\program files\mozilla firefox\res ). Estos son los que pueden estar afectando a los estilos de las páginas normales:

  • html.css
  • forms.css
  • quirk.css
  • ua.css

Creo que lo que quiere decir es que algunos elementos son más específicos que otros en el DOM, o tienen un scope menor. Dado que existe un área de texto dentro del cuerpo, cualquier estilo definido para textarea sobrescribirá los estilos de cuerpo {}. Así que el estilo de texto predeterminado de FF sobrescribe el estilo de su cuerpo, aunque el suyo se defina más adelante (por lo general, algo más reciente tendrá prioridad, pero no si se trata de un ámbito más amplio / menos específico).