Curso de CSS, parte 9

Curso de CSS, parte 9

Curso de CSS, parte 9

Diseño

CURSO DE CSS, PARTE 9



 



Esta nota es una continuación de otras 8 publicadas anteriormente, donde te mostramos algunos aspectos de la programación de páginas web. Te dejo el enlace para que leas las anteriores. 



Curso de CSS, lista de enlaces



Continuamos con el curso. Las dos reglas que rigen el comportamiento de CSS son la herencia y la especificidad.



La herencia en cascada



 



La herencia en cascada



¿Por qué se llaman en cascada estilos CSS? Cuando varias reglas que se han escrito se contradicen entre sí, se llevará a cabo la última norma escrita. De esta manera, los estilos en cascada se veran hacia abajo y se aplica la última regla escrita. Veamos un ejemplo. Vamos a escribir dos reglas CSS en una hoja de estilo interna que se oponen directamente entre sí.



Head>



    Style>



        p {color: red;}



        p {color: blue;}



    / Style>



/ Head>



Body>



¿De qué color será el texto de este párrafo?



/ Body>



 



El navegador caerá en cascada a través de los estilos y aplicará el último estilo encontrado, invalidando todos los estilos anteriores. Como resultado, el título es de color azul.



Este mismo efecto en cascada entra en juego cuando el uso de hojas de estilo externas. Es común para múltiples stylsheets externos que deben utilizarse. Cuando esto sucede, las hojas de estilo se cargan en el orden en que aparecen en el elemento de cabecera del documento HTML. Cuando se produzcan conflictos entre las reglas de estilo, las reglas CSS contenidos en cada hoja de estilo se impondrán las contenidas en las hojas de estilo cargados anteriormente. Toma el siguiente código como ejemplo:



Head>



 refencia 1



referencia 2>



/ Head>



Las reglas en styles_2.css se aplicarán si hay conflictos entre los estilos contenidos en estas dos hojas de estilo.



La herencia de estilos es otro ejemplo del comportamiento en cascada de estilos CSS.



Al definir un estilo para un elemento principal los elementos secundarios reciben el mismo estilo. Por ejemplo, si aplicamos un estilo de color a una lista desordenada, en los elementos de la lista se mostrarán los mismos estilos.



Head>



    Style>



        ul {color: red;}



    / Style>



/ Head>



Body>



    Ul>



        Li> Artículo 1



        Li> Artículo 2



    / Ul>



/ Body>



 



No todos los bienes pasan de un padre a sus elementos secundarios. Los navegadores consideran ciertas propiedades como propiedades no heredadas. Los márgenes son un ejemplo de una propiedad que no se transmite de un padre a un elemento secundario.   

Xnechijli01Curso de CSS, parte 9
posicionamiento en buscadores