Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Pandemia en 30 de Marzo 2016, 22:15
-
Buenas noches amigos aquí os dejo un ejercicio más para ver que tal está.
Y aunque ya se que este no es el el lugar para preguntar esto, lo preguntaré porqué no sé por donde tirar, ya estoy acabando el curso de css y quería seguir con el de javascript, y mirando el curso pone que tienes que tener nociones de programación, y yo no he programado nunca, vamos que no tengo ni idea, y mi pregunta es que si es mejor que haga primero el de fundamentos de programación, o me tiro a la piscina y empiezo el de javascript, bueno espero que me aconsejéis, mientras voy leyendo el de fundamentos; sin más como siempre daros las gracias de antemano.
saludos...
<!DOCTYPE html>
<html lang="es">
<head>
<title>Diseños de tablas css. border-spacing, caption-side, empty-cells, colores de filas intercalados</title>
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="diseños de tablas css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos29.css">
</head>
<body>
<table>
<caption>PROPIEDADES DE LOS ELEMENTOS HALÓGENOS</caption>
<thead>
<tr>
<th>propiedades</th>
<th>Flúor</th>
<th>Cloro</th>
<th>Bromo</th>
<th>Yodo</th>
<th>Astato</th>
</tr>
</thead>
<tr>
<th>Número atómico</th>
<td>9</td>
<td>17</td>
<td>35</td>
<td>53</td>
<td>85</td>
</tr>
<tr>
<th>Peso atómico</th>
<td>18,9984</td>
<td>35,453</td>
<td>79,904</td>
<td>126,904</td>
<td>(210)</td>
</tr>
<tr>
<th>Color</th>
<td>Amarillo verdoso</td>
<td>Amarillo verdoso</td>
<td>Castaño rojizo</td>
<td>Violeta oscuro</td>
<td> ------------ </td>
</tr>
<tr>
<th>Punto de fusión (ºc)</th>
<td>-219,62</td>
<td>-100,98</td>
<td>-7,25</td>
<td>113,5</td>
<td>~300</td>
</tr>
<tr>
<th>Punto de ebullición</th>
<td>-118,14</td>
<td>-34,05</td>
<td>58,8</td>
<td>184,4</td>
<td>~370</td>
</tr>
<tr>
<th>Números de oxidación</th>
<td>-1</td>
<td>-1,+1,+3,+4,+5,+6,+7</td>
<td>-1,+5,+3,+4,+5,+7</td>
<td>-1,+1,+3,+4,+5,+6,+7</td>
<td>-1,+1,+3,+5,+7</td>
</tr>
</table>
</body>
</html>
Y ahora el CSS...
/*curso css aprenderaprogramar.com*//*ejercicio CU01052D diseños de tablas css border-spacing, caption-side, empty-cells;
colores de filas intercalados alternos*/
table{
color: #333;
font-family: helvetica,arial,sans-serif;
width:640px;
border-collapse: collapse;
}
td, th {
border: 1px solid transparent;
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;
}
/*Ejercicio*/
/*a) Describe cuál es el efecto que genera cada una de las especificaciones que hemos incluido en el código CSS (Ejemplo: color: #333 da lugar a que se muestren todos los textos dentro del elemento table con color #333333, que es un color gris oscuro. Font-family: Helvetica, Arial, sans-serif; da lugar a que …).*/
/*
table => color #333 da lugar a que se muestren todos los textos dentro del elemento table con color #333333, que es un color gris oscuro.font-family: Helvetica, Arial, Sans-serif; da lugar a que sigan una correlación de tipos de fuentes de familia, primero buscara helvetica, si no la encuentra buscara arial y si no sans-serif. width: 640px; este será el ancho total de la tabla. border-collapse: collapse, con este atributo da lugar a que los espacios entre celdas desaparezcan.
td, th => border: 1px da lugar al grueso de los bordes, con estilo solido y fondo transparente, da lugar a que las celdas tengan 1px de grosor de tipo continuo y transparente. height: 30px, aquí le damos una altura a las celdas de 30 pixeles.
th => background: #D3D3D3; aquí le damos un color de fondo a las celdas de la cabecera de color gris. font-weight: bold, da lugar a que el texto aparezca en negrita en las celdas de la cabecera.
td => background: #FAFAFA realmente no hace nada porque en las siguientes lineas se reescribe el color de fondo de las celdas, así que se podría quitar para simplificar el còdigo , text-align: center, damos lugar a centrar el texto en las celdas de datos.
tr:nth-child(even) td => background: #F1F1F1; da lugar a un color de fondo gris claro, y solo a los elemetos td pares.
tr:nth-child(odd) td => background: #FEFEFE; da lugar a un color de fondo gris mas claro y solo a los elemetos td inpares.
tr td:hover => background: #666; le damos un color de fondo gris oscuro, color #FFF, le damos al texto un color transparente; y con la propiedad :hover, damos lugar a que cuando pasamos el puntero del ratón por encima de cualquier celda (td) esta cambie de color, poniendo fondo gris oscuro y texto transparente.
*/
/*b) Indica qué modificación habría que hacer en el código para que se muestren bordes dobles con grosor 2 píxeles.*/
/* Respuesta:
En la linea table le quitariamos el atributo border-collapse: collapse; y pondriamos border: 2px solid; y en la linea td th tendríamos que poner border: 2px solid, quitando border: 1px solid transparent.
*/
/*c) Indica qué modificación habría que hacer en el código para que se muestren bordes simples de color naranja de grosor 3 píxeles.
Respuesta:
Habría que cambiar td th{border: 1px solid transparent} por td th {border: 3px solid orange}
*/
EJERCICIO
Crea el código HTML de una tabla con un título de tabla, cinco columnas y 7 filas (la primera ella, fila de encabezados que no son datos propiamente dichos). Aplícale los siguientes estilos, comprueba la visualización obtenida y responde a las siguientes cuestiones:
a) Describe cuál es el efecto que genera cada una de las especificaciones que hemos incluido en el código CSS (Ejemplo: color: #333 da lugar a que se muestren todos los textos dentro del elemento table con color #333333, que es un color gris oscuro. Font-family: Helvetica, Arial, sans-serif; da lugar a que …).
b) Indica qué modificación habría que hacer en el código para que se muestren bordes dobles con grosor 2 píxeles.
c) Indica qué modificación habría que hacer en el código para que se muestren bordes simples de color naranja de grosor 3 píxeles.
/*Ejercicio*/
/*a) Describe cuál es el efecto que genera cada una de las especificaciones que hemos incluido en el código CSS (Ejemplo: color: #333 da lugar a que se muestren todos los textos dentro del elemento table con color #333333, que es un color gris oscuro. Font-family: Helvetica, Arial, sans-serif; da lugar a que …).*/
/*
table => color #333 da lugar a que se muestren todos los textos dentro del elemento table con color #333333, que es un color gris oscuro.font-family: Helvetica, Arial, Sans-serif; da lugar a que sigan una correlación de tipos de fuentes de familia, primero buscara helvetica, si no la encuentra buscara arial y si no sans-serif. width: 640px; este será el ancho total de la tabla. border-collapse: collapse, con este atributo da lugar a que los espacios entre celdas desaparezcan.
td, th => border: 1px da lugar al grueso de los bordes, con estilo solido y fondo transparente, da lugar a que las celdas tengan 1px de grosor de tipo continuo y transparente. height: 30px, aquí le damos una altura a las celdas de 30 pixeles.
th => background: #D3D3D3; aquí le damos un color de fondo a las celdas de la cabecera de color gris. font-weight: bold, da lugar a que el texto aparezca en negrita en las celdas de la cabecera.
td => background: #FAFAFA realmente no hace nada porque en las siguientes lineas se reescribe el color de fondo de las celdas, así que se podría quitar para simplificar el còdigo , text-align: center, damos lugar a centrar el texto en las celdas de datos.
tr:nth-child(even) td => background: #F1F1F1; da lugar a un color de fondo gris claro, y solo a los elemetos td pares.
tr:nth-child(odd) td => background: #FEFEFE; da lugar a un color de fondo gris mas claro y solo a los elemetos td inpares.
tr td:hover => background: #666; le damos un color de fondo gris oscuro, color #FFF, le damos al texto un color transparente; y con la propiedad :hover, damos lugar a que cuando pasamos el puntero del ratón por encima de cualquier celda (td) esta cambie de color, poniendo fondo gris oscuro y texto transparente.
*/
/*b) Indica qué modificación habría que hacer en el código para que se muestren bordes dobles con grosor 2 píxeles.*/
/* Respuesta:
En la linea table le quitariamos el atributo border-collapse: collapse; y pondriamos border: 2px solid; y en la linea td th tendríamos que poner border: 2px solid, quitando border: 1px solid transparent.
*/
/*c) Indica qué modificación habría que hacer en el código para que se muestren bordes simples de color naranja de grosor 3 píxeles.
Respuesta:
Habría que cambiar td th{border: 1px solid transparent} por td th {border: 3px solid orange}
*/
-
Hola pandemia, si no has programado nunca yo te recomiendo que hagas primero el de fundamentos de progamación. Esto te servirá para tener las nociones básicas para porder aprender cualquier lenguaje de programación posteriormente.
También te digo que la programación también es mucho de escribir código y escribir código y escribir código ............
Sáludos
-
Sí, ya me lo imaginaba yo, empezaré por fundamentos de programación y de ahí en adelante paso a paso, y como tu bien dices escribiendo código, y escribiendo y escribiendo....
Haber que te parece el ejercicio, como lo ves si no es mucho pedir...
gracias y saludos....
-
Sobre el ejercicio yo lo veo resuelto bien.
Saludos !!!
-
Muchísimas gracias por tu tiempo bermartinv, me ayudas muchísimo, no te imaginas lo que te lo agradezco....
Saludos..