Buenas buenas!!! dejo mi resolución al ajercicio CU01022D del tutorial de desarrollo web desde cero con CSS.
Siempre tratando de aplicar (lo mejor que puedo) lo aprendido hasta acá.
Atento a todos los comentarios :-)
Saludos!!!
CU01022D.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Versiones CSS - curso aprenderaprogramar.com</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="Algo de historia y perspectiva sobre CSS" />
<meta name="keywords" content="curso, aprender a programaar, html, css, W3C, (CU01022D)" />
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="CU01022D.css"/>
</head>
<body>
<h1 id="ejercicio">Resolución ejercicio número CU01022D</h1>
<h2 id="entrega">Entrega número 22</h2>
<div id="div_principal">
<table id="tabla_principal">
<!-- Encabezado -->
<tr class="resaltado">
<td rowspan="2">Propiedad CSS</td>
<td rowspan="2">Descripción</td>
<td rowspan="2">Version CSS</td>
<td rowspan="2">Estado Actual</td>
<td colspan="5">Browser Soportados</td>
</tr>
<tr class="resaltado">
<td><img src="http://i.imgur.com/ReS0w5d.png" alt="Chrome" width="50px" height="50px"/></td>
<td><img src="http://i.imgur.com/W7b8ed1.png" alt="Internet Explorer" width="50px" height="50px"/></td>
<td><img src="http://i.imgur.com/z0jQ3pj.png" alt="Firefox" width="50px" height="50px"/></td>
<td><img src="http://i.imgur.com/07heIP4.png" alt="Safari" width="50px" height="50px"/></td>
<td><img src="http://i.imgur.com/OLJjSpQ.png" alt="Opera" width="50px" height="50px"/></td>
</tr>
<!-- Clip -->
<tr>
<td class="resaltado">Clip</td>
<td>La propiedad clip permite especificar un rectángulo para recortar un elemento con posición absoluta . El rectángulo se especifica con cuatro coordenadas desde la esquina superior izquierda del elemento a ser cortado.</td>
<td>CSS2</td>
<td>En uso</td>
<td>1.0</td><td>8.0</td><td>1.0</td><td>1.0</td><td>7.0</td>
</tr>
<!-- font-weight -->
<tr>
<td class="resaltado">font-weight</td>
<td>La propiedad font-weight establece cómo se deben mostrar los caracteres: finos o gruesos</td>
<td>CSS1</td>
<td>En uso</td>
<td>2.0</td><td>4.0</td><td>1.0</td><td>1.3</td><td>3.5</td>
</tr>
<!-- overflow -->
<tr>
<td class="resaltado">overflow</td>
<td>La propiedad overflow especifica qué hacer con los bordes superior e inferior del contenido, si este se desborda el área de contenedor del elemento.</td>
<td>CSS3</td>
<td>En uso</td>
<td>4.0</td><td>9.0</td><td>3.5</td><td>3.0</td><td>9.5</td>
</tr>
<!-- animation -->
<tr>
<td class="resaltado">animation</td>
<td>Mostrar una animación a un elemento div, usando las sub-propiedades:
<uo>
<li>animation-name</li>
<li>animation-duration</li>
<li>animation-timing-function</li>
<li>animation-delay</li>
<li>animation-iteration-count</li>
<li>animation-direction</li>
<li>animation-fill-mode</li>
<li>animation-play-state</li>
</uo>
</td>
<td>CSS3</td>
<td>En uso</td>
<td>43.0</td><td>10.0</td><td>16.0</td><td>9.0</td><td>30.0</td>
</tr>
</table>
</div>
<p>Todos los datos fueron extraidos de <a href="http://www.w3schools.com/cssref/" target="_blank"> w3schools</a>.<strong> NOTA:</strong> Si bien algunas de estas propiedades son reconocidas por navegadores de versiones anteriores a las citadas, las mismas, son las versiones donde esta confirmado su funcionamiento correcto.</p>
</body>
</html>
CU01022D.css
/* Curso CSS estilos aprenderaprogramar.com*/
#ejercicio {
text-align: center;
}
#entrega {
text-align: center;
}
table {
width: 100%;
border: 1px solid #000000;
}
td {
width: 25%;
text-align: justify;
vertical-align: top;
border: 1px solid #000000;
border-spacing: 0;
border-collapse: collapse;
padding: 0.5%;
}
.resaltado {
background-color: bisque;
}