Categoria: Programacion Tema: Css Titulo: Herencia de propiedades de estilo en CSS
Fecha del Tema: 2013-02-03 17:09:49Herencia 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.
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.
