Búsqueda personalizada
 
 
 
 
Definición de un estilo en función del contexto
 

Este otro recurso que provee las css es la definición de un estilo para una marca HTML siempre y cuando la misma esté contenida por otra marca determinada. Sólo en ese caso el estilo para dicha marca se activará.

Supongamos que queremos que cuando disponemos un texto encerrado por la marca b (bold) dentro de un párrafo el color de la misma sea verde. Pero si la marca b está contenida por la marca h1 el color debe ser rojo, luego la sintaxis del problema es:

<html>
<head>
<title>Problema</title>
<style type="text/css">
p b{
  color:#0000ff;
}
h1 b{
  color:#ff0000;
}
</style>
</head>
<body>
<h1>Ac tenemos un ttulo de nivel uno, luego un bloque con 
la marca bold debe aparecer <b>as</b></h1>
<p>
Luego si escribimos un prrafo y encerramos un bloque con la marca bold 
debe aparecer <b>as</b>
</p>
</body>
</html>

Es importante analizar la sintaxis para la defincin de estilos en funcin del contexto. Tenemos:

p b{
  color:#0000ff;
}

Estamos diciendo que todas los bloques de la pgina que contengan la marca b (bold) y que estn contenidas por la marca p (prrafo) se pinten de azul. Si bien hay dos bloques en la pgina que estn encerrados por la marca b, solo uno se pinta de color azul, el otro bloque se pinta de color verde, ya que tenemos:

h1 b{
  color:#ff0000;
}

Es decir, activar el color rojo para el contenido encerrado por la marca b, siempre y cuando se encuentre contenido por la marca h1.
No confundir con la sintaxis para definir reglas de estilo a dos marcas que se hace separando por coma las marcas HTML:

h1,b{
  color:#ff0000;
}

Es decir que el texto contenido por las marcas h1 y b deben aparecer de color rojo.

Se pueden definir estilos en funcin del contexto, con mayor precisin, como por ejemplo:

div h1 em {
            color:#ff0000;
}

Con esto estamos diciendo que se debe pintar de color rojo el texto contenido por la marca em siempre y cuando est contenida en un bloque con la marca h1 y esta a su vez dentro de un div.
La pgina completa queda codificada de la siguiente forma:

<html>
<head>
<title>Problema</title>
<style type="text/css">
div h1 em {
  color:#ff0000;
}
</style>
</head>
<body>
<div>
<h1>Este es un titulo de nivel 1 dentro de un <em>div</em></h1>
</div>
<h1>Este es un titulo de nivel 1 fuera de un <em>div</em></h1>
</body>
</html>
 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion