Autor Tema: Unidades de medida CSS relativas o absolutas cm, mm, pt, pc, px,%,em,ex CU01024D  (Leído 1805 veces)

LuisM

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 131
    • Ver Perfil
Hola a todos !! Coloco a continuación la página html del ejercicio CU01024D del tutorial de programación CSS que se ofrece en esta página web, y su hoja de estilos CSS. Desde ya muchas gracias por la atención.

Un saludo, Luis

EJERCICIO

Los navegadores aplican un tamaño por defecto a los títulos h1 a h6, aunque estos tamaños no son siempre los mismos sino que dependen del navegador que se emplee. Para el navegador que estés empleando, divide la página web en una cuadrícula con 5 espacios a lo ancho y 6 espacios a lo alto, tal y como se ve en la siguiente tabla. En cada espacio, muestra un texto y la forma en que se ha definido el tamaño. Por ejemplo: h1 (predefinido), h1 (px), h1 (em), h1 (pt), h1 (%). El resultado ha de ser que todo se vea del mismo tamaño y modo, pero sin embargo la forma de definir el estilo será diferente en cada caso.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>"Ejercicio CU01024D"</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/CSS" href="estilos.css">
</head>
<body>
<div>
<table>
<tr>
<td>Título</td>
<td>Tamaño px</td>
<td>Tamaño em</td>
<td>Tamaño pt</td>
<td>Tamaño %</td>
</tr>
<tr>
    <td><h1>h1 (predefinido)</h1></td>
<td id="td12">h1 (px)</td>
<td id="td13">h1 (em)</td>
<td id="td14">h1 (pt)</td>
<td id="td15">h1 (%)</td>
</tr>
<tr>
<td><h2>h2 (predefinido)</h2></td>
<td id="td22">h2 (px)</td>
<td id="td23">h2 (em)</td>
<td id="td24">h2 (pt)</td>
<td id="td25">h2 (%)</td>
</tr>
<tr>
<td><h3>h3 (predefinido)</h3></td>
<td id="td32">h3 (px)</td>
<td id="td33">h3 (em)</td>
<td id="td34">h3 (pt)</td>
<td id="td35">h3 (%)</td>
</tr>
<tr>
<td><h4>h4 (predefinido)</h4></td>
<td id="td42">h4 (px)</td>
<td id="td43">h4 (em)</td>
<td id="td44">h4 (pt)</td>
<td id="td45">h4 (%)</td>
</tr>
<tr>
<td><h5>h5 (predefinido)</h5></td>
<td id="td52">h5 (px)</td>
<td id="td53">h5 (em)</td>
<td id="td54">h5 (pt)</td>
<td id="td55">h5 (%)</td>
</tr>
<tr>
<td><h6>h6 (predefinido)</h6></td>
<td id="td62">h6 (px)</td>
<td id="td63">h6 (em)</td>
<td id="td64">h6 (pt)</td>
<td id="td65">h6 (%)</td>
</tr>
</table>
</div>
</body>
</html>

estilos.css

Código: [Seleccionar]
/* Curso CSS estilos aprenderaprogramar.com*/
#td12{font-size:32px; font-weight:bold;}
#td13{font-size:2em; font-weight:bold;}
#td14{font-size:24pt; font-weight:bold;}
#td15{font-size:200%; font-weight:bold;}
#td22{font-size:24px; font-weight:bold;}
#td23{font-size:1.5em; font-weight:bold;}
#td24{font-size:18pt; font-weight:bold;}
#td25{font-size:150%; font-weight:bold;}
#td32{font-size:19px; font-weight:bold;}
#td33{font-size:1.17em; font-weight:bold;}
#td34{font-size:14pt; font-weight:bold;}
#td35{font-size:125%; font-weight:bold;}
#td42{font-size:16px; font-weight:bold;}
#td43{font-size:1.0em; font-weight:bold;}
#td44{font-size:12pt; font-weight:bold;}
#td45{font-size:100%; font-weight:bold;}
#td52{font-size:13px; font-weight:bold;}
#td53{font-size:0.83em; font-weight:bold;}
#td54{font-size:10pt; font-weight:bold;}
#td55{font-size:80%; font-weight:bold;}
#td62{font-size:11px; font-weight:bold;}
#td63{font-size:0.70em; font-weight:bold;}
#td64{font-size:8pt; font-weight:bold;}
#td65{font-size:70%; font-weight:bold;}
table{border-collapse: collapse;
}
td {text-align:center;
        width:230px;
border-color:#000000;
border-width:2px;
border-style:solid;
}
« Última modificación: 04 de Junio 2018, 19:25 por Ogramar »

paramonso

  • Intermedio
  • ***
  • Mensajes: 241
  • El ignorante afirma, el sabio duda y reflexiona.
    • Ver Perfil
Hola LuisM.

Bien resuelto el ejercicio.

un saludo
 :D

 

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