Temas > Programacion > Css > Definicion de un estilo en funcion de contexto CSS
Julio

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:
<?php //esto no va
<html>
<head>
<title>Problema</title>
<style type="text/css">
p b{
  color:#0000ff;
}
h1 b{
  color:#ff0000;
}
</style>
</head>
<body>
<h1>Aquí tenemos un título de nivel uno, luego un bloque con
la marca bold debe aparecer <b>así</b></h1>
<p>
Luego si escribimos un párrafo y encerramos un bloque con la marca bold
debe aparecer <b>así</b>
</p>
</body>
</html>
?>//esto no va
Es importante analizar la sintaxis para la definción de estilos en
función del contexto. Tenemos:
<?php //esto no va
p b{
  color:#0000ff;
}
?>//esto no va
Estamos diciendo que todos los bloques de la página que contengan la marca
b (bold) y que estén contenidas por la marca p (párrafo) se pinten de
azul. Si bien hay dos bloques en la página que están encerrados por la
marca b, solo uno se pinta de color azul, el otro bloque se pinta de color
verde, ya que tenemos:
<?php //esto no va
h1 b{
  color:#ff0000;
}
?>//esto no va
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:
<?php //esto no va
h1,b{
  color:#ff0000;
}
?>//esto no va
Es decir que el texto contenido por las marcas h1 y b deben aparecer de
color rojo.
Se pueden definir estilos en función del contexto, con mayor precisión,
como por ejemplo:
<?php //esto no va
div h1 em {
        color:#ff0000;
}
?>//esto no va
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 página completa queda codificada de la siguiente forma:
<?php //esto no va
<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>
?>//esto no va













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar