Subtitles of the Movie

ÿþ [00:00:00.0] Hasta ahora hemos visto las diferentes formas en que usted puede darle estilo a sus documentos. Pero qué pasa cuando a un elemento [00:00:08.0] se le ha aplicado más de un estilo? Para entender cómo funciona esto, vamos a explorar el concepto de herencia. [00:00:15.0] En este documento usted puede ver que el texto aparece sobre un fondo azul. Y que el color del texto es blanco. [00:00:22.0] Al cambiar a la vista de código se ve que se ha aplicado h1 al encabezado, y que el texto "galaxy héroes" ha sido [00:00:29.0] marcado utilizando el elemento de frase "strong". Al mirar la hoja de estilo, vemos que a la etiqueta Body se le ha aplicado estilo de esa manera. [00:00:36.0] La razón por la cual aparecen en blanco la copia, el encabezado y el texto en negrilla "galaxy heroes", es porque todos los elementos [00:00:45.0] están heredando el rol definido en la etiqueta Body. En este árbol de etiquetas, usted puede ver que la etiqueta Body es el ancestro de todas las demás etiquetas. [00:00:56.0] O como lo indica el borde rojo punteado, cada etiqueta debajo de la etiqueta Body es un descendiente. Así como los hijos heredan [00:01:04.0] los genes de sus padres, en CSS un hijo puede heredar un estilo de sus padres. Entonces en este ejemplo, el estilo [00:01:12.0] establecido en la etiqueta Body bajó por el árbol y afectó a sus descendientes - h1, p, y Strong. Esto también significa que si agregamos [00:01:20.0] otro conjunto de etiquetas, como por ejemplo las etiquetas de listas, y rápidamente agregamos un ítem, nuevamente se hereda el estilo. [00:01:33.0] Digamos que ahora queremos hacer que el encabezado se destaque del resto de la página. Para explicar esto, [00:01:38.0] rápidamente voy a enlazarme a otra hoja de estilo. Ahora, aunque h1 es un elemento hijo de la etiqueta Body, sus reglas entran en conflicto con [00:01:46.0] aquellas establecidas en la etiqueta Body. El encabezado aparece en la forma que lo hace, debido al estilo que le ha sido aplicado a la etiqueta h1. [00:01:55.0] Este estilo gana porque es más específico. Dicho de forma sencilla, las reglas de la etiqueta Body son muy generales y afectan [00:02:02.0] todos los elementos de la página. La regla h1 que sólo afecta las etiquetas h1, es más específica. Sin embargo, es importante [00:02:12.0] señalar que no todas las reglas se heredan - como por ejemplo el fondo. Esto es porque la propiedad del fondo es transparente, [00:02:17.0] a menos que se haya señalado en las CSS. En esta instancia, no hemos señalado un color de fondo para nuestras etiquetas 'p', [00:02:24.0] de tal forma que el color de fondo es transparente. El fondo está establecido como transparente por defecto, con el fin de que [00:02:30.0] los fondos puedan presentarse rápidamente, puesto que no hay nada que presentar. [00:02:36.0] [00:02:37.0]