Mostrar Mensajes
1
Aprender a programar desde cero / Re: Unidades de medida CSS relativas o absolutas. in, cm, mm, pt, pc, pixel CU01024D
« en: 11 de Mayo 2021, 16:12 »
Hola, yo lo resolví así:
Y ahora el CSS
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-->
RSS