Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

.

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

3. Selectores (IV)

3.4 Prioridades.

Herencia

Uno de los conceptos característicos del código CSS (y que puede darnos problemas si no lo tenemos en cuenta) es la herencia de estilos.

Cuando se establece el valor de alguna propiedad en un elemento, todos sus descendientes heredan inicialmente ese mismo valor; es decir que si una etiqueta lleva asociado un cierto estilo (por ejemplo, letra en negrita), todas las etiquetas anidadas que estén dentro de ella, tendrán en principio ese estilo. Ejemplo:

body { font-family: arial; color: blue; }

En este ejemplo todos los elementos de la página tendrán las características indicadas para la etiqueta body (letra tipo arial, y color azul), ya que esta etiqueta delimita la parte visible de la página y engloba a todas las demás.

Siguiendo con el ejemplo anterior, si queremos que alguna etiqueta no tenga el estilo indicado en la etiqueta body debemos indicarlo en otra regla. Esta otra regla tendrá prioridad sobre la anterior, ya que siempre tiene prioridad la regla referida a la propia etiqueta sobre la regla heredada, y en todo caso tendrá prioridad la regla que esté en un nivel más profundo. así por ejemplo al aplicar el siguiente código:

i { color: blue }

b { color: red }

hay una clara diferencia entre estas dos líneas de html:

<i><b><u> Texto en negrita, cursiva y subrayado</u></b></i>

<b><i><u> Texto en negrita, cursiva y subrayado</u></i></b>

en el primer caso veremos el texto en color rojo (red), y en el segundo lo veremos en azul (blue).

Hay que tener en cuenta que no todas las propiedades CSS se heredan, ni en todas las etiquetas. Por eso es conveniente estudiar estos casos aparte.

colisión de estilos.

al escribir código CSS para una página, sobre todo en páginas complejas, puede ser que se apliquen diferentes valores en una propiedad, para una misma etiqueta. El navegador debe decidir qué estilo aplicar en función de unas prioridades:

Ejemplo: Se aplican estas dos etiquetas a la misma página:

p { color: red }

p { color: blue }

El navegador debe decidir si el color de los párrafos será rojo (red) o azul (blue), en este caso, y si no influye ninguna otra circunstancia, tendrá prioridad el valor designado en segundo lugar. Pueden darse otros casos. Para ello se establece una lista de prioridades. Normalmente lo más específico tiene mayor prioridad

• Especifidad del selector: A mayor especifidad del selector, mayor prioridad en su aplicación. así por ejemplo el selector universal (*) es el menos prioritario, luego estarían los selectores de etiqueta, luego los de clase e id, más específicos serían los descendentes, y más especificos aún el selector de hijos y el adyacente.
• Especifidad tipo de hoja de estilo: Hay tres formas de enlazar el código css, desde un archivo exterior, que sería el menos específico, desde una etiqueta style en la cabecera, más específico que el anterior, y desde el atributo style=".." en la propia etiqueta, que sería el que tiene mayor prioridad.
• Si después de lo anterior, varias reglas tienen la misma especifidad, tendrá prioridad la última regla indicada en el código.
• Podemos hacer una excepción en las normas de prioridad mediante la palabra clave !important. Al escribirla detrás de cualquier valor damos prioridad a esa propiedad sobre cualquier otra con la que colisione.

---

Llegados a este punto si seguimos el curso de HTML y CSS al mismo tiempo, volveremos al HTML con el tema de los enlaces:

Enlaces en HTML

Pero si seguimos sólamente el curso de CSS continuaremos el curso en el siguiente tema: enlaces y listas.

Enlaces y listas

---

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com