Temas > Programacion > Css > Herencia de propiedades de estilo en CSS
Julio

Herencia de propiedades de estilo
Ahora veremos que el conjunto de marcas HTML forman en sí un árbol que en
su raíz 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:
<?php //esto no va
<html>
<head>
<title>Problema</title>
<style type="text/css">
body {
  color:#0000ff;
  font-family:verdana;
}
</style>
</head>
<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 azul ya que lo hereda de la
marca body.</p>
<a href="pagina2.html">Siguiente ejemplo</a>
</body>
</html>
En este ejemplo hemos definido la siguiente regla para la marca body:
body {
  color:#0000ff;
  font-family:verdana;
}
?>//esto no va
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 recibirán los valores aquí definidos. En este
ejemplo la cabecera de primer nivel es decir h1, el párrafo y el
hipervínculo 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:
<?php //esto no va
<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>
?>//esto no va
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:
<?php //esto no va
body {
  color:#0000ff;
  font-family:verdana;
}
?>//esto no va
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):
<?php //esto no va
em {
  color:#008800;
}
Algo similar hacemos con la marca p para indicar que sea de color gris:
p{
  color:#999999;
}
?>//esto no va
Pero podemos ver que todas las marcas heredan la fuente verdana ya que
ninguna marca la sobreescribe.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google






LunMarMieJueVieSabDom
      1
2345678
9 101112131415
16171819202122
23242526272829
3031     

Martes 10 de Diciembre 2024
Semana 50

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