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}
*/
Tema: Diseños de tablas CSS. Colores de filas intercalados alternos Ejercicio CU01052D (Leído 6096 veces)
RSS -
WAP2