Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 86

Visitas el mes pasado: 72

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




3. Selectores (IV)

3.4 Prioridades.

html

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




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








manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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