Aprender CSS - Estilo en función del contexto

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:

<HTML>
<HEAD>
<TITLE> Ejemplo de estilos segun el contexto </TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="ejemplo.css">
<STYLE TYPE="text/css">

</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}

Usuarios que han visto este tema también han visto...

- Optimizar el CSS sin usar PHP
- Enlace en el encabezado
- Barra de desplazamiento a la izquierda con CSS
- Página HMTL centrada horizontal y verticalmente con CSS
- Relativamente Absoluto

- Versión imprimible de este documento

- Enviar por e-mail este documento