Fundamentos de la herencia de estilos css3

Video: Curso CSS Fundamentos: 5 Herencia

los en cascada parte de la hoja de estilo en cascada (CSS 3) lo dice todo. Un estilo en la parte superior de la jerarquía de páginas caerá en cascada hacia abajo en la parte baja de la página. Al definir un estilo en el nivel adecuado de la jerarquía, se reduce el trabajo necesario para poner en práctica ese estilo en todos los lugares en los que se necesita el estilo.

Por ejemplo, un estilo que se define con el etiqueta fluirá hacia abajo en el

etiqueta que es un hijo de la
etiqueta. Si ha definido el estilo en el
nivel, lo que tendría que definirlo para cada

Video: Fundamentos de CSS Profesional. Clase 1

que requiere el estilo. Definiéndola en el

Video: Qué es el CSS, Reglas de Estilo, Sintaxis y Herencia

nivel, se emplea un acceso directo en forma de un estilo en cascada.

El uso de una arquitectura en cascada significa que defina estilos que afectan a la página en su conjunto a un nivel más alto que los estilos específicos que se utilizan para definir los elementos particulares.

Por ejemplo, si la página se basa principalmente en una sola fuente, a continuación, se deben definir ese tipo de letra en el etiqueta. A pesar de que el modelo de objetos de documento (DOM) jerarquía comienza con el documento, se desplaza hacia la raíz (la tag), y sólo entonces se divide en el y etiquetas, la tag es el primer elemento visualizable.

La herencia también viene en otra forma. Se pueden definir estilos en tres lugares diferentes. La ubicación de esa definición modifica la prioridad de ese estilo. Estos son los tres lugares de estilo y sus prioridades:

  • Inline (máxima prioridad): Un estilo en línea aparece específicamente con un objeto particular. Modifica solamente ese objeto y ningún otro objeto en el documento o en cualquier otro documento. Localizar y cambiar un estilo en línea es mucho tiempo y propenso a errores, por lo que se debe evitar siempre que sea posible.

  • Interno: Un estilo interno aparece como parte de la

    Utilización de estilos internos puede ayudar a proporcionar dinamismo especial a una página en particular, pero debería utilizar un estilo interno sólo cuando el estilo es único a esa página, y nunca la intención de utilizar ese estilo en cualquier otro lugar. Teniendo en cuenta que normalmente no puede hacer esa garantía, lo mejor es evitar los estilos internos siempre que sea posible, pero aún así, ellos son preferibles a inline estilos.

  • Externa (prioridad más baja): Un estilo externa aparece en un archivo .css externo. Debe crear una referencia a este archivo usando una etiqueta en el de un documento. Los estilos afectan a cada documento vinculado al archivo .CSS.

    Usando este enfoque hace que las actualizaciones más fácil y da a su sitio una apariencia uniforme en general. Además, el uso de estilos externos hace que sea fácil para las personas con necesidades especiales para el suministro de una hoja de estilo alternativa que mejor se adapte a sus necesidades.

    Puede asociar tantas hojas de estilo externa según sea necesario con una página mediante el uso de múltiples las etiquetas. Este enfoque le permite utilizar estilos de diversas fuentes, de manera que se puede dar formato a su página con la menor cantidad de esfuerzo.

    hojas de estilo externas se procesan en el orden en el que aparecen. Si dos archivos .CSS contienen el mismo nombre de estilo que modifican las mismas propiedades, el estilo procesa en último lugar es el estilo que tiene precedencia.

El último nivel de la herencia a considerar es el selector de sí mismo. Puede crear selectores que sólo actúan sobre los objetos contenidos dentro de otros objetos o que cumplen los criterios especiales. Un selector específica siempre anulará la configuración proporcionada por un selector genérico, por lo que sólo debe utilizar esta técnica cuando sea necesario (imagine tratar de encontrar todos esos cambios específicos en todos los archivos en su sitio).

Cuanto más específico sea el selector, mayor es su prioridad se convierte. Sin embargo, es necesario considerar los efectos del nivel del selector dentro del documento - y la forma en que se define el estilo - como parte de la imagen global.

Artículos Relacionados