Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: gabrms en 03 de Junio 2018, 18:22
-
A continuación aporto el ejercicio Entrega CU01024D del Tutorial básico del programador web: CSS desde cero de aprenderaprogramar.
Debo aclarar que aunque creo que el ejercicio estará correcto,en caso contrario me gustaría que se rebatiese, no es la primera opción que me planteé.
El codigo de html es prácticamente el mismo, pero en css, he tenido que cambiarlo, tomando la idea del foro. Pego el código y después pegaré el código tal como yo quise hacerlo sin conseguirlo. Si alguién que lo lea, me puede aclarar porque no funciona le estaré agradecido
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Unidades Css: absolutas y relativas</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<table>
<thead>
<tr class="a">
<th>Título </th>
<th>Tamaño px</th>
<th>Tamaño em</th>
<th>Tamaño pt</th>
<th>Tamaño %</th>
</tr>
</thead>
<tbody>
<tr class="b">
<td><h1>h1 pred</h1></td>
<td class="a1">h1 32 px</td>
<td class="a2">h1 2em</td>
<td class="a3">h1 24 pt</td>
<td class="a4">h1 200%</td>
</tr>
<tr class="c">
<td><h2>h2 pred</h2></td>
<td class="b1">h2 24 px</td>
<td class="b2">h2 1.5em</td>
<td class="b3">h2 18 pt</td>
<td class="b4">h2 150%</td>
</tr>
<tr class="d">
<td><h3>h3 pred</h3></td>
<td class="c1">h3 19 px</td>
<td class="c2">h3 1.2em</td>
<td class="c3">h3 14 pt</td>
<td class="c4">h3 117.6%</td>
</tr>
<tr class="e">
<td><h4>h4 pred</h4></td>
<td class="d1">h4 16 px</td>
<td class="d2">h4 1em</td>
<td class="d3">h4 12 pt</td>
<td class="d4">h4 100%</td>
</tr>
<tr class="f">
<td><h5>h5 pred</h5></td>
<td class="e1">h5 13.4 px</td>
<td class="e2">h5 .83em</td>
<td class="e3">h5 10 pt</td>
<td class="e4">h5 80%</td>
</tr>
<tr class="f">
<td><h6>h6 pred</h6></td>
<td class="f1">h6 10 px</td>
<td class="f2">h6 .7em</td>
<td class="f3">h6 8 pt</td>
<td class="f4">h6 70%</td>
</tr>
</tbody>
</table>
</body>
</html>
table{border: 5px dotted pink; width: 100%; text-align:center;
background-color: #cdcdcd;}
th, td{border: 1px solid blue; font-weight: bold;}
.a{background-color: rgb(128,30,250,0.9);
color:rgb(221,221,221,.9); font-size: 24px; height: 48px;}
.a1{font-size: 32px;}
.a2{font-size: 2em;}
.a3{font-size: 24pt;}
.a4{font-size: 200%;}
.b{background-color: rgb(128,30,250,0.8); color:rgb(108,0,88,.4);}
.b1{font-size: 24px;}
.b2{font-size: 1.5em;}
.b3{font-size: 18pt;}
.b4{font-size: 150%;}
.c{background-color: rgb(128,30,250,0.7); color:rgb(108,0,88,.5);}
.c1{font-size: 19px;}
.c2{font-size: 1.2em;}
.c3{font-size: 14pt;}
.c4{font-size: 117.6%;}
.d{background-color: rgb(128,30,250,0.6); color:rgb(108,0,88,.6);}
.d1{font-size:16px;}
.d2{font-size:1em;}
.d3{font-size:12pt;}
.d4{font-size:100%;}
.e{background-color:rgb(128,30,250,0.5); color:rgb(108,0,88,.7);}
.e1{font-size:13.4px;}
.e2{font-size:.83em;}
.e3{font-size: 10pt;}
.e4{font-size: 80%;}
.f{background-color: rgb(128,30,250,0.4); color:rgb(108,0,88,.8);}
.f1{font-size: 10px;}
.f2{font-size: 0.7em;}
.f3{font-size: 8pt;}
.f4{font-size: 70%;}
Ahora pongo el código que no me ha resultado válido
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Unidades Css: absolutas y relativas</title>
<link rel="stylesheet" type="text/css" href="est.css">
</head>
<body>
<table>
<thead>
<tr class="a">
<th>Título </th>
<th>Tamaño px</th>
<th>Tamaño em</th>
<th>Tamaño pt</th>
<th>Tamaño %</th>
</tr>
</thead>
<tbody>
<tr class="b">
<td><h1>h1 pred</h1></td>
<td>h1 32 px</td>
<td>h1 2em</td>
<td>h1 24 pt</td>
<td>h1 200%</td>
</tr>
<tr class="c">
<td><h2>h2 pred</h2></td>
<td>h2 24 px</td>
<td>h2 1.5em</td>
<td>h2 18 pt</td>
<td>h2 150%</td>
</tr>
<tr class="d">
<td><h3>h3 pred</h3></td>
<td>h3 19 px</td>
<td>h3 1.2em</td>
<td>h3 14 pt</td>
<td>h3 117.6%</td>
</tr>
<tr class="e">
<td><h4>h4 pred</h4></td>
<td>h4 16 px</td>
<td>h4 1em</td>
<td>h4 12 pt</td>
<td>h4 100%</td>
</tr>
<tr class="f">
<td><h5>h5 pred</h5></td>
<td>h5 13.4 px</td>
<td>h5 .83em</td>
<td>h5 10 pt</td>
<td>h5 80%</td>
</tr>
<tr class="f">
<td><h6>h6 pred</h6></td>
<td>h6 10 px</td>
<td>h6 .7em</td>
<td>h6 8 pt</td>
<td>h6 70%</td>
</tr>
</tbody>
</table>
</body>
</html>
table{border: 3px solid pink; width: 100%;}
th, td{border: 1px solid lime; }
.a tr{background-color: #801EFA;}
.a tr:nth-child(2){font-size:32px;}
.a tr:nth-child(3){font-size: 2em;}
.a tr:nth-child(4){font-size:24pt;}
.a tr:nth-child(5){font-size:200%;}
.b tr{background-color: #964173;}
.b tr:nth-child(2){font-size: 24px;}
.b tr:nth-child(3){font-size: 1.5em;}
.b tr:nth-child(4){font-size: 18pt;}
.b tr:nth-child(5){font-size: 150px;}
.c tr{background-color: #7DEDF4;}
.ctr:nth-child(2){font-size: 19px;}
.c tr:nth-child(3){font-size: 1.2em;}
.c tr:nth-child(4){font-size: 14pt;}
.c tr:nth-child(5){font-size: 117.6%;}
.d tr{background-color: #56F765;}
.d tr:nth-child(2){font-size:16px;}
.d tr:nth-child(3){font-size:1em;}
.d tr:nth-child(4){font-size:12pt;}
.d tr:nth-child(5){font-size:100%;}
.e tr{background-color: #BAFA0C;}
.e tr:nth-child(2){font-size:13.4px;}
.e tr:nth-child(3){font-size:.83em;}
.e tr:nth-child(4){font-size: 10pt;}
.e tr:nth-child(5){font-size: 80%;}
.f tr{background-color: #F8A30E;}
.f tr:nth-child(2){font-size: 10px;}
.f tr:nth-child(3){font-size: 0.7em;}
.f tr:nth-child(4){font-size: 8pt;}
.f tr:nth-child(5){font-size: 70%;}
-
Hola gabrms: en este caso el título del tema está bien pero le ha faltado el código de ejercicio: CU01024D (ya lo edito yo y lo introduzco).
El ejercicio está bien resuelto, aunque he tenido problemas al visualizarlo porque el color de fondo de la tabla es violeta y la letra también violeta, con lo cual no se ve demasiado bien. Para verlo mejor he introducido esto como última línea del código css: .a, .b, .c, .d, .e, .f{color: black;}
Sobre el problema del segundo código, en este hilo: https://aprenderaprogramar.com/foros/index.php?topic=5124.0 hay una explicación sobre nth-child que quizás sea la explicación a por qué no te funciona el código.
Saludos.
-
Hola, yo lo resolví así:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Aprender a programar</title>
<link rel="stylesheet" type="text/css" href="new1.css">
<meta charset="utf-8">
<meta name="autor" content="Juan Mendoza Vaamonde">
<meta name="keywords" content="aprender a programar, html, css">
<meta name="robots" content="index, follow">
<meta name="description" content="Pruebas de aprendizaje">
<meta name="title" content="Ejercicio comprobación w3c">
</head>
<body>
<header>DIFERENTES ESTILOS DE MEDIDA</header>
<main><table><tr><th>Título</th><th>Tamaño predefinido</th><th>Tamaño px</th><th>Tamaño em</th><th>Tamaño pt</th><th>Tamaño %</th></tr>
<tr><td class="titulo">H1</td><td><h1>medida</h1></td><td class="px" id="uno">medida</td><td class="em" id="uno">medida</td><td class="pt" id="uno">medida</td><td class="porcentaje" id="uno">medida</td></tr>
<tr><td class="titulo">H2</td><td><h2>medida</h2></td><td class="px" id="dos">medida</td><td class="em" id="dos">medida</td><td class="pt" id="dos">medida</td><td class="porcentaje" id="dos">medida</td></tr>
<tr><td class="titulo">H3</td><td><h3>medida</h3></td><td class="px" id="tres">medida</td><td class="em" id="tres">medida</td><td class="pt" id="tres">medida</td><td class="porcentaje" id="tres">medida</td></tr>
<tr><td class="titulo">H4</td><td><h4>medida</h4></td><td class="px" id="cuatro">medida</td><td class="em" id="cuatro">medida</td><td class="pt" id="cuatro">medida</td><td class="porcentaje" id="cuatro">medida</td></tr>
<tr><td class="titulo">H5</td><td><h5>medida</h5></td><td class="px" id="cinco">medida</td><td class="em" id="cinco">medida</td><td class="pt" id="cinco">medida</td><td class="porcentaje" id="cinco">medida</td></tr>
<tr><td class="titulo">H6</td><td><h6>medida</h6></td><td class="px" id="seis">medida</td><td class="em" id="seis">medida</td><td class="pt" id="seis">medida</td><td class="porcentaje" id="seis">medida</td></tr>
</table>
</main>
</body>
</html>
Y ahora el CSS
<!--aplicamos solo al header-->
header{text-align:center;color:red;background-color:lavender;font-size:25px;}
<!--fin del header-->
<!--aplicación de bordes a toda la tabla y de colores a algunos elementos-->
table{text-align:center;margin-left:960px;border:1px solid black;margin-top:15px;}th,td{border:1px solid black;}th{background-color:khaki;}
td.titulo{background-color:tomato;}
<!fin de bordes y colores-->
td.px, .em, .pt, .porcentaje{font-weight:bold;}
<!--aplicación a cada celda su correspondiente formato-->
td#uno,.px{font-size:32px;},.em{font-size:2em;},.pt{font-size:24pt;},.porcentaje{font-size:500%;}
td#dos,.px{font-size:24px;},.em{font-size:1.5em;},.pt{font-size:18pt;},.porcentaje{font-size:150%;}
td#tres,.px{font-size:19px;},.em{font-size:1.22em;},.pt{font-size:14pt;},.porcentaje{font-size:117%;}
td#cuatro,.px{font-size:16px;},.em{font-size:1em;},.pt{font-size:12pt;},.porcentaje{font-size:100%;}
td#cinco,.px{font-size:13px;},.em{font-size:0.8em;},.pt{font-size:10pt;},.porcentaje{font-size:80%;}
td#seis,.px{font-size:10px;},.em{font-size:0.7em;},.pt{font-size:8pt;},.porcentaje{font-size:70%;}
<!--fin de formatos-->