Autor Tema: Estilos y herencia CSS tablas distinto aspecto según filas Ejercicio CU01051D  (Leído 1230 veces)

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Buenas queridos! ;D

Adjunto mi ejercicio CU01051D del tutorial de desarrollo web con CSS y editor Notepad++ y aguardo las correcciones

CSS - Punto a:

Código: [Seleccionar]

table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse;}
/* Definde el color de texto #333 (gris oscuro), la familia tipografica; en primera instancia Helvetica, si el usuario no tiene dicha fuente, se mostrará, Arial y si tampoco la tiene se visualizara cualquier familia que tenga siempre siendo "sans-serif". El largo de la tabla sera de 640px y los bordes colapsados.*/
td, th { border: 1px solid transparent; height: 30px;}
/* El borde de las columnas y filas sera de 1px, solida y transparente. La altura de 30px.*/
th { background: #D3D3D3; font-weight:bold; }
/*El fondo del titulo de cada columna con el color #d3d3d3 (tono gris) y el ancho de tipografia "bold" (negrita)*/
td { background: #FAFAFA; text-align: center;}
/*Color de fondo de cada celda (tono de gris claro) y el texto alineado en cada una de las mismas*/
tr:nth-child(even) td { background: #F1F1F1; }
/* Represanta las filas pares de la tabla  con color de tono gris claro*/
tr:nth-child(odd) td { background: #FEFEFE; }
/* Represanta las filas impares de la tabla  con color de tono gris levemente mas fuerte que el anterior*/
tr td:hover { background: #666; color: #FFF; }
/*Al pasar el mouse por cada una de las celdas, el color de fondo se hace gris oscuro y cada palabra de color blanco*/

CSS - Punto b:

Código: [Seleccionar]

table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border: double 2px;}
td, th { border: 2px double; height: 30px;}
th { background: #D3D3D3; font-weight:bold; }
td { background: #FAFAFA; text-align: center;}
tr:nth-child(even) td { background: #F1F1F1; }
tr:nth-child(odd) td { background: #FEFEFE; }
tr td:hover { background: #666; color: #FFF; }


CSS-Punto C:

Código: [Seleccionar]

table {color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border: solid 3px orange; border-collapse: collapse;}
td, th { border: 3px solid orange; height: 30px;}
th { background: #D3D3D3; font-weight:bold; }
td { background: #FAFAFA; text-align: center;}
tr:nth-child(even) td { background: #F1F1F1; }
tr:nth-child(odd) td { background: #FEFEFE; }
tr td:hover { background: #666; color: #FFF; }

« última modificación: 17 de Junio 2017, 17:46 de Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola alefatti, en este ejercicio pareque que falta el código HTML ¿Puedes agregarlo?

Saludos

andrea lozano

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 1
    • Ver Perfil
Muchas gracias!

ElisCastro

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 1
    • Ver Perfil
Que genial, muchas gracias. A mi me encanta este tema, pero no lo sé manejar mucho, on esto seguro me ayudo.
Hola mi nombre es Elis Castro y quiero aprender mucho más sobre estos temas, por eso quiero que me ayuden en todo lo que necesite ¿Qué dicen?

 

Esto es un laboratorio de ideas...
Aprender a programar

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".