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



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