Búsqueda personalizada
 
 
 
 
Herencia de propiedades de estilo
 

Ahora veremos que el conjunto de marcas HTML forman en sí un árbol que en su raiz podemos identificar la marca body del cual se desprenden otras marcas contenidas en esta sección, como podrían ser las marcas h1,h2,h3,h4,h5,h6,p,div luego estas en su interior contienen otras marcas HTML como podrían ser em,b,i,pre etc.

Ahora veremos con ejemplos que hay muchos estilos que se heredan (todos los vistos hasta el momento se heredan), es decir si definimos la propiedad color para la marca h1, luego si dicha marca incorpora un texto con la marca b (bold) en su interior, la propiedad color de la marca b tendrá el mismo valor que la propiedad h1 (es decir la marca b hereda las propiedades de la marca h1).

Con un ejemplo veremos el resultado de la herencia de propiedades entre las marchas HTML:

<html>
<head>
<title>Problema</title>
<style type="text/css">
body {
  color:#0000ff;
  font-family:verdana;
}
em {
  color:#008800;
}
p {
  color:#999999;
}
</style>
</head>
<body>
</body>
<h1>Este es un ttulo de nivel 1 y con la marca 'em' la palabra: 
<em>Hola</em></h1>
<p>Todo este prrafo debe ser de color gris ya que lo redefine la 
marca p y no lo hereda de la marca body.</p>
</html>

En este ejemplo hemos definido la siguiente regla para la marca body:

body {
  color:#0000ff;
  font-family:verdana;
}

Inicializamos la propiedad color con el valor de azul y la fuente de tipo verdana. Con esto todas las marcas contenidas en el body que no redefinan estas dos propiedades recibirn los valores aqu definidos. En este ejemplo la cabecera de primer nivel es decir h1, el prrafo y el hipervnculo tienen como color el azul y la fuente es de tipo verdana.

Ahora bien en muchas situaciones podemos redefinir propiedades para marcas contenidas, veamos como podemos hacer que el texto contenido en las marcas em y p aparezcan de color distinto:

<html>
<head>
<title>Problema</title>
<style type="text/css">
body {
  color:#0000ff;
  font-family:verdana;
}
em {
  color:#008800;
}
p {
  color:#999999;
}
</style>
</head>
<body>
</body>
<h1>Este es un título de nivel 1 y con la marca 'em' la palabra: 
<em>Hola</em></h1>
<p>Todo este párrafo debe ser de color gris ya que lo redefine la 
marca p y no lo hereda de la marca body.</p>
</html>

Ahora hemos definido tres reglas, la primera igual que el problema anterior, define la propiedad color en azul y la fuente de tipo verdana para la marca body:

body {
  color:#0000ff;
  font-family:verdana;
}

La segunda regla define la propiedad color en verde para la marca em, con esto no heredar el color azul de la marca body (que es la marca padre):

em {
  color:#008800;
}

Algo similar hacemos con la marca p para indicar que sea de color gris:

p {
  color:#999999;
}

Pero podemos ver que todas las marcas heredan la fuente verdana ya que ninguna marca la sobreescribe.

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion