Practica trabajando con CSS y Estilos.

En esta parctica e trabajado con CSS externos y con estilos , una simple tabla que cuando pasas el raton por encima se van señalando las celdas.

Captura

Codigo HTML——————————————————————————————————

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>Documento sin título</title>

<link rel=”stylesheet” type=”text/css” href=”externo.css” />

</head>

<body>

<table summary=”Tipos de cambio”>

<tr>

<th scope=”col”>Cambio</th>

<th scope=”col”>Compra</th>

<th scope=”col”>Venta</th>

<th scope=”col”>Maximo</th>

<th scope=”col”>Minimo</th>

</tr>

<tr>

<th scope=”row”>Euro/Dolar</th>

<td>1.2524</td>

<td>1.2527</td>

<td>1.2539</td>

<td>1.2488</td>

</tr>

<tr>

<th scope=”row”>Dolar/Yen</th>

<td>119.01</td>

<td>119.05</td>

<td>119.82</td>

<td>119.82</td>

</tr>

<tr>

<th scope=”row”>Libra/Dolar</th>

<td>1.8606</td>

<td>1.8611</td>

<td>1.8651</td>

<td>1.8522</td>

</tr>

<tr>     <th scope=”row”>Yen/Euro</th>

<td>0.6711</td>

<td>0.6705</td>

<td>0.6676</td>

<td>0.6713</td>

</tr>

</table>

</body>

</html>

Aquí el archivo externo CSS —————————————————————————————

@charset “utf-8”;
table {
font: .9em Arial, Helvetica, sans-serif;
border: 1px solid #333;
border-collapse: collapse;
text-align: center;
}
table th {
background: #F5F5F5 url(imagenes/fondo_gris.gif) repeat-x;
padding: 0 .3em;
}
table th.euro {
background: #E6F3FF url(imagenes/euro.png) no-repeat left center;
padding: 0 .3em 0 1.2em;
}
table th.dolar {
background: #E6F3FF url(imagenes/dolar.png) no-repeat left center;
padding: 0 .3em 0 1.2em;
}
table th.libra {
background: #E6F3FF url(imagenes/libra.png) no-repeat left center;
padding: 0 .3em 0 1.2em;
}
table th.yen {
background: #E6F3FF url(imagenes/yen.png) no-repeat left center;
padding: 0 .3em 0 1.2em;
}
table th, table, td {
border: 1px solid #333;
line-height: 2em;
}
.fila {
text-align: left;
}
.par {
background-color:#FFFFCC;
}
table tr:hover {
background: #FFFF66;
}
</style>

Anuncios

Publicado el 14 noviembre, 2013 en Desarrollo de Interfaces Web. Añade a favoritos el enlace permanente. Comentarios desactivados en Practica trabajando con CSS y Estilos..

Los comentarios están cerrados.

A %d blogueros les gusta esto: