Estilo en función del contexto
Por
Lola Cárdenas.
rinconprog.metropoli2000.com
Otro tema a comentar aquí es la posibilidad de definir, en lugar de un estilo para una etiqueta, sin más, es definir un estilo en función del contexto.
Por ejemplo, es posible que sólamente queramos que el texto en negrita sea de color verde cuando se encuentre en una celda de una tabla, o que sea de color púrpura cuando forme parte de una lista.
Esto lo definiríamos como sigue:
<!-- Manual de CSS de WebEstilo.com -->
<HTML>
<HEAD>
<TITLE> Ejemplo de estilos segun el contexto </TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="ejemplo.css">
<STYLE TYPE="text/css">
<!--
TD B {color:green}
UL B {color:purple}
//-->
</STYLE>
</HEAD>
<BODY BGCOLOR=white>
En este ejemplo, seguimos con los estilos de la hoja
externa, pero vamos a comprobar que se verifican los
estilos definidos en función del contexto: la negrita
de una celda cualquiera de una tabla debe ser de color
verde, y la negrita de una lista debe ser de color
púrpura. <P>
<UL TYPE=DISC>
<LI>Un elemento cualquiera</LI>
<LI>Un elemento con una palabra en <B>negrita</B></LI>
<LI>Otro elemento cualquiera</LI>
</UL><P>
<CENTER>
<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=2>
<TR><TH>Cabecera 1</TH><TH>Cabecera 2</TH></TR>
<TR><TD>Celda (1,1)</TD><TD>Celda (1,2)</TD></TR>
<TR><TD><B>Celda (2,1) en negrita</B></TD><TD>Celda (2,2)</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
ejemplo.css
/* Manual de CSS de WebEstilo.com */
/* Definición de estilos en un archivo aparte */
/* Estilo para el documento */
BODY {font-family:Verdana,sans-serif;font-size:x-small;
margin-left:0.25in; margin-right:0.25in}
/* Estilo para la cabecera de nivel 2 */
H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red}
/* Estilos para otras etiquetas */
B, TD {font-family:Verdana,sans-serif;font-size:x-small;
color:olive}
TH {font-family:Verdana,sans-serif;font-size:x-small;
color:white;background-color:#0080C0}
PRE, TT, CODE {font-family:Courier New,Courier;
font-size:9pt;color:maroon}
Herencia de estilos