- CÓDIGO HTML=
<html>
<head><title>Ejercicio Web</title><link rel="stylesheet" href="estilo.css" type="text/css" media="all" /></head>
<body>
<h1 id="titulo_principal">Lorem ipsum dolor sit amet</h1>
<p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse gravida</strong>, metus a scelerisque sollicitudin, lacus velit
ultricies nisl, nonummy tempus neque diam quis felis. <span class="importante">Etiam sagittis tortor</span> sed arcu sagittis tristique.</p>
<h2 id="titulo2">Aliquam tincidunt, sem eget volutpat porta</h2>
<p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <a href="https://asgardia.space/en/" target="_blank">Aenean turpis metus, <em>aliquam non</em>, tristique in</a>, pretium varius, sapien. Proin vitae nisi. Suspendisse <span class="destacado">porttitor purus ac elit</span>. Suspendisse eleifend odio at dui. In in elit sed metus pretium elementum.</p>
<table summary="Descripción de la tabla y su contenido">
<caption>Título de la tabla</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col" class="especial">Título columna 1</th>
<th scope="col" class="especial">Título columna 2</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col"></th>
<th scope="col">Título columna 1</th>
<th scope="col">Título columna 2</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" class="especial">Título fila 1</th>
<td>Donec purus ipsum</td>
<td>Curabitur <em>blandit</em></td>
</tr>
<tr>
<th scope="row">Título fila 2</th>
<td>Donec <strong>purus ipsum</strong></td>
<td>Curabitur blandit</td>
</tr>
</tbody>
</table>
<div id="adicional">
<p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac, lorem</span>. Curabitur blandit, eros sed gravida aliquet, risus justo
porta lorem, ut mollis lectus tortor in orci. Pellentesque nec augue.</p>
<p>Fusce nec felis eu diam pretium adipiscing. <span id="especial">Nunc elit elit, vehicula vulputate</span>, venenatis in,
posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam nisi feugiat ante, eu congue magna mi non nisl.</p>
<p>Vivamus ultrices aliquet augue. <a href="https://www.nasa.gov/" target="_blank">Donec arcu pede, pretium vitae</a>, rutrum aliquet, tincidunt blandit, pede.
Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut ullamcorper nisi quis mi.</p>
</div>
</body>
</html>
- CÓDIGO CSS=
table, tr, th, td {border:1px solid #000; border-collapse:collapse; padding:5px;}
h1#titulo_principal { color: teal; }
strong { color: red; }
span.importante { color: orange; }
h2#titulo2 { color: blue; }
span.desetacado { color: purple; }
a { color: red; }
a em { color: blue; }
a:hover{color: blue;
font-style: italic;}
div#adicional p { color: olive; }
div#adicional span#especial { color: fuchsia; }
div#adicional a { color: green; }
div#adicional a:hover{color: blue;
letter-spacing: 10px;
}
caption { color: blue; }
td { color: green; }
td strong { color: orange; }
th { color: red; }
th.especial { color: orange; }
No hay comentarios:
Publicar un comentario