image
Valora:   4.33/5 de 21
Inicio » CSS » Manual » Aplicaci�n




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>

Ejecutar ejemplo Ver c�digo






Comparte


Aportaciones de usuarios A�adir una aportaci�n



Enlaces
Cocina Facil  
Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.