Redefinición de etiquetas
Por Lola Cárdenas.
rinconprog.metropoli2000.com
Suele ocurrir es que queremos definir estilos que se apliquen a
todas las etiquetas del documento, es decir, queremos que todo el
documento tenga un cierto tipo de letra, que las tablas tengan otro,
que las cabeceras tengan un color determinado, para ello, definiremos
estilos globales por medio de la etiqueta <STYLE> ... </STYLE>
como sigue:
<STYLE TYPE="text/css">
<!--
Etiqueta1, Etiqueta2 : {propiedad1:valor}
Etiqueta3 : {propiedad1:valor;...;propiedadS:valor}
Etiqueta4 : {propiedad1:valor;...;propiedadT:valor}
.Clase1 : {propiedad1:valor;...;propiedadT:valor}
//-->
</STYLE>
Podemos aplicar el mismo estilo a varias etiquetas, escribiéndolas separadas por comas y, a continuación, la especificación del estilo según pares propiedad:valor separados por punto y coma y encerrados entre llaves {}. En un bloque de estilo global podremos definir cuantos estilos queramos. Aparece un .Clase1; se refiere a las llamadas clases, que nos permitirán que una etiqueta concreta tenga una apariencia distinta a la definida como global.
Es recomendable que definamos estos estilos globales dentro de la cabecera del documento (entre <HEAD> ... </HEAD>) para asegurarnos de que se aplicarán a todas las etiquetas para las que se haya definido un estilo. Veamos un ejemplo:
<!-- Manual de CSS de WebEstilo.com -->
<HTML>
<HEAD>
<TITLE> Ejemplo con bloque de estilo </TITLE>
<STYLE TYPE="text/css">
<!--
BODY {font-family:Verdana,sans-serif;font-size:x-small;
margin-left:0.25in; margin-right:0.25in}
H2 {font-family:Verdana,sans-serif;font-size:14pt;color:red}
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}
//-->
</STYLE>
</HEAD>
<BODY BGCOLOR=white>
<H2>Prueba de definición de estilos en un bloque aparte</H2>
Como puede verse, la apariencia de esta página queda
completamente definida por los estilos que hemos
especificado en el bloque STYLE en la cabecera del
documento. Los márgenes son más amplios de lo habitual,
la <B>negrita</B> tiene un tamaño y un color
fijos, los
trozos de texto en teletipo como <TT>este fragmento</TT>
también tienen definida su fuente, tamaño y color,
y vamos a ver cómo quedan las tablas, para finalizar
el ejemplo: <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>
</TABLE>
</CENTER>
</BODY>
</HTML>
Usuarios que han visto este tema también han visto...
- Opacity en CSS
- Evitar que una página se imprima en CSS
- Maquetación CSS
- Decorar un campo select de formulario con CSS
- Menú rollover en CSS
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.