« anterior próximo »
Páginas: [1]

Autor Tema: Unidades de medida CSS relativas o absolutas. in, cm, mm, pt, pc, pixel CU01024D  (Leído 3256 veces)

gabrms

  • Sin experiencia
  • *
  • Mensajes: 2
  • El saber no ocupa lugar
    • Ver Perfil
Unidades de medida CSS relativas o absolutas. in, cm, mm, pt, pc, pixel CU01024D
« 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

Código: [Seleccionar]
<!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>
Código: [Seleccionar]
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

Código: [Seleccionar]
<!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>
Código: [Seleccionar]
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%;}

« Última modificación: 07 de Julio 2018, 19:48 por Alex Rodríguez »
En línea

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Unidades de medida CSS relativas o absolutas. in, cm, mm, pt, pc, pixel px, porc
« Respuesta #1 en: 07 de Julio 2018, 19:47 »
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.
En línea

Russo

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 1
    • Ver Perfil
Re: Unidades de medida CSS relativas o absolutas. in, cm, mm, pt, pc, pixel CU01024D
« Respuesta #2 en: 11 de Mayo 2021, 16:12 »
Hola, yo lo resolví así:

Código: [Seleccionar]
<!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
Código: [Seleccionar]
<!--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-->
« Última modificación: 12 de Abril 2022, 19:34 por Alex Rodríguez »
En línea
Páginas: [1]
« anterior próximo »
 

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