image
Valora:   4.17/5 de 35
Inicio » CSS » Manual » Aplicación




Separar HTML de CSS

Por Lola Cárdenas.
rinconprog.metropoli2000.com

Como sabemos definir estilos globales, sería interesante tenerlos definidos en un archivo aparte, pues si queremos dotar a todas las páginas de los mismos estilos, no es tarea grata copiar y pegar la definición de los estilos en cada una de las páginas.

Afortunadamente, sí podemos definir los estilos en un fichero distinto al documento HTML, y después referenciarlo desde el propio documento HTML. Esto lo haremos con la siguiente etiqueta, dentro de la cabecera del documento (entre <HEAD> ... </HEAD>):

<LINK REL="stylesheet" TYPE="text/css" HREF="URL_Hoja.css">

Veamos un ejemplo:
<!-- Manual de CSS de WebEstilo.com -->
<HTML>
<HEAD>
<TITLE> Ejemplo con hoja de estilo externa </TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="ejemplo.css">
</HEAD>
<BODY BGCOLOR=white>
<H2>Prueba de definición de estilos en una hoja de
estilo externa</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

Si quisiéramos que otros documentos tuvieran el mismo estilo, sólo tendríamos que usar la etiqueta LINK para aplicarlos. Esa es la ventaja de las hojas de estilo externas.

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}

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.