Autor Tema: Versiones CSS Algo de historia propiedades CSS clip overflow animation CU01022D  (Leído 2737 veces)

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
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
Código: [Seleccionar]
<!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
Código: [Seleccionar]
/* 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;
}
« Última modificación: 22 de Agosto 2016, 17:31 por Ogramar »
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Re:VERSIONES CSS. ALGO DE HISTORIA (CU01022D)
« Respuesta #1 en: 22 de Agosto 2016, 17:30 »
Buenas Hugo el ejercicio muy bien, has hecho más de lo que se pedía ya que no solo has dado las respuestas sino que las has maquetado en una página web. Una cosa a pedirte, no escribas los nombres de los temas en mayúsculas. No uses VERSIONES CSS. ALGO DE HISTORIA (CU01022D) sino Versiones CSS. Algo de historia. En este hilo se explica el motivo - > https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0

En el código tienes un pequeño error al poner <uo>...</uo> en lugar de <ul>...</ul>. Esto me generaba una pequeña distorsión y se veía mal en mi navegador, pero en cuanto he corregido eso ya se ve todo bien.

Salu2

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Hola Ogramar, ouch, no suelo escribir nada en mayúsculas, a mi tampoco me gusta que me griten  ;)

y lo del <uo> bueno... es una etiqueta que queria crear, pero todavia no funciona en los navegadores!!!!

Ya esta corregido. Gracias!!!!
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".