Next: Referencias Biblográficas Up: HTML y CSS Previous: Jerarquía CSS

Una CSS de ejemplo

A continuación se muestra la hoja de estilo definida para modificar la apariencia de mi página web www.infor.uva.es/jvegas:

   BODY {
      margin-left: 25px; margin-top: 25px ;
      background-color: white;
   }
   p  { width: 600px; }
   ul { width: 500px; }
   h2 { 
      font-family: Times; font-size: 18; 
      font-weight: 500; color: blue;
   }
   h2 A { text-decoration: none; color: blue; }
   h2 A:link { color: blue; }
   h2 A:visited { color: blue; }
   #logo { 
      position: absolute; top: 20px; 
      left: 50px; width: 102px 
   } 
   #title1 { 
      position: absolute; top: 20px; left: 150px; 
      z-index: 2; height: 40px; 
   }
   #title2 { 
      position: absolute; top: 20px; left: 250px;
      z-index: 2; height: 40px;
   }
   #title3 { 
      position: absolute; top: 20px; left: 400px;
      z-index: 2; height: 40px;
   }
   #title4 { 
      position: absolute; top: 20px; left: 480px;
      z-index: 2; height: 40px;
   }
   #title5 { 
      position: absolute; top: 20px; left: 570px;
      z-index: 2; height: 40px;
   }
   #option1 { 
      position: absolute; top: 75px; left: 25px;
      z-index: 2; height: 20px;
   }
   #option2 { 
      position: absolute; top: 125px; left: 25px;
      z-index: 2; height: 20px;
   }
   #option3 { 
      position: absolute; top: 175px; left: 25px;
      z-index: 2; height: 20px;
   }
   #option4 { 
      position: absolute; top: 225px; left: 25px;
      z-index: 2; height: 20px;
   }
   #option5 { 
      position: absolute; top: 275px; left: 25px;
      z-index: 2; height: 20px;
   }
   #content {
      position: absolute; top: 75px; left: 150px;
   }
   #barra {
      position: absolute; top: 50px; left: 150px; 
      width:600px;
   }
   #resalte { background-color:aqua; }
   #divisor { position: absolute; width:600px; }
   #pie { font-style:italic ; width:600px; }

Y a continuación la página HTML sobre la que se aplica:

<HTML>
<HEAD>
<TITLE>P&aacute;gina de Jes&uacute;s Vegas</TITLE>
<LINK REL=STYLESHEET type="text/css" 
      HREF="menu.css" TITLE="menu">
</HEAD>
<body>
<DIV id=title1>
<H2><a href="./docencia/inicio.html">docencia</a></H2>
</DIV>
<DIV id=title2>
<H2><a href="./investigacion/inicio.html">
       investigaci&oacute;n</a></H2>
</DIV>
<DIV id=title3>
<H2><a href="./cursos/inicio.html">cursos</a></H2>
</DIV>
<DIV id=title4>
<H2><a href="./enlaces/inicio.html">enlaces</a></H2>
</DIV>
<DIV id=title5>
<H2><a href="./busqueda/inicio.html">b&uacute;squeda</a></H2>
</DIV>
<DIV id=barra>
<hr width=600px align=left>
</DIV>
<!--
<DIV id=option1>
<P><a href="./opcion1.html">opcion 1</a></P>
</DIV>
<DIV id=option2>
<P><a href="./opcion2.html">opcion 2</a></P>
</DIV>
<DIV id=option3>
<P><a href="./opcion3.html">opcion 3</a></P>
</DIV>
<DIV id=option4>
<P><a href="./opcion4.html">opcion 4</a></P>
</DIV>
<DIV id=option5>
<P><a href="./menu.html">inicio</a></P>
</DIV>
-->
<DIV id=content>
<H2>Presentaci&oacute;n</H2>
<P>
Actualmente soy Profesor Titular de Escuela Universitaria 
de la <a href="http://www.uva.es">Universidad de
Valladolid</a>.
Me licenci&eacute; en Inform&aacute;tica por esta universidad 
en 1992, y alcanc&eacute; el
grado de Doctor en Inform&aacute;tica en 1999.
</p>
 
<b>English Summary</b>
<p>
I'm an Associate Professor of Computer Science
at the <a href="http://www.uva.es">University of
Valladolid</a>.
I received my Ms. in Computer Science from the University of
Valladolid
in 1992, and the Ph.D. in 1999.  
My research work includes information retrieval systems, 
especially structure and content query languages, 
and user interfaces.
</p>

<h2>Localización</h2>
<p>Despacho 1D008 edificio "Tecnologías de la 
Información y de las Telecomunicaciones", Campus Miguel 
Delibes, C<sup>o</sup> del Cementerio s/n.</p>
<p>Teléfono: 983 423000 ext 25608</p>
<p>Teléfono: 983 423672 ext 25608</p>
<p>Fax: 983 423671</p>
<p>e-mail: jvegas@infor.uva.es</p>

<HR>
<ADDRESS>
Jes&uacute;s Vegas <BR>
Dpto. Inform&aacute;tica <BR>
Universidad de Valladolid <BR>
<A HREF="mailto:jvegas@infor.uva.es">jvegas@infor.uva.es</A>
</ADDRESS>
</OL>
</DIV>
</body>
</HTML>

Jesús Vegas Hernández 2001-02-23