Autor Tema: CSS Equivalencia en pixeles y em de titulos h1, h2, h3, h4, h5 y h6 CU01044D (Leído 8606 veces)

Dimitar Stefanov · « **en:** 16 de Enero 2016, 15:54 »

Códigos del ejercicio CU01044D del curso CSS (basándome que el valor del h4 se toma como 1em.

Código HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="estilos75.css"/>
	<title>Portal web</title>
</head>
<body>
	<div id="caja1">
		<table>
		<h1 id="a">Mozilla Firefox</h1>
			<tr>
				<td>Tipo de título</td>
				<td>Píxeles</td>
				<td>em</td>
			</tr>
			<tr>
				<td><h1>h1</h1></td>
				<td>46</td>
				<td>1.91</td>
			</tr>
			<tr>
				<td><h2>h2</h2></td>
				<td>35</td>
				<td>1.45</td>
			</tr>
			<tr>
				<td><h3>h3</h3></td>
				<td>27</td>
				<td>1.125</td>
			</tr>
			<tr>
				<td><h4>h4</h4></td>
				<td>24</td>
				<td>1</td>
			</tr>
			<tr>
				<td><h5>h5</h5></td>
				<td>20</td>
				<td>0.83</td>
			</tr>
			<tr>
				<td><h6>h6</h6></td>
				<td>16</td>
				<td>0.66</td>
			</tr>
		</table>
	</div>
	<div id="caja2">
		<table>
		<h1 id="a">Chrome</h1>
			<tr>
				<td>Tipo de título</td>
				<td>Píxeles</td>
				<td>em</td>
			</tr>
			<tr>
				<td><h1>h1</h1></td>
				<td>37</td>
				<td>2.05</td>
			</tr>
			<tr>
				<td><h2>h2</h2></td>
				<td>27</td>
				<td>1.5</td>
			</tr>
			<tr>
				<td><h3>h3</h3></td>
				<td>22</td>
				<td>1.22</td>
			</tr>
			<tr>
				<td><h4>h4</h4></td>
				<td>18</td>
				<td>1</td>
			</tr>
			<tr>
				<td><h5>h5</h5></td>
				<td>16</td>
				<td>0.88</td>
			</tr>
			<tr>
				<td><h6>h6</h6></td>
				<td>12</td>
				<td>0.66</td>
			</tr>
		</table>
	</div>
</body>
</html>

Código CSS: "estilos75.css"

Código: [Seleccionar]

div {
	width: 400px;
}
#caja1 {
	float: left;
}
#caja2 {
	float: left;
	margin-left: 100px;
}
table {
	width: 400px;
	height: 400px;
	text-align: center;
	border: solid #9F89B8;
	border-collapse: collapse;
	/* la propiedad border-collapse sirve para colapsar las celdas entre sí */
}
table tr td {
    border-top: solid #9F89B8;
	border-bottom: solid #9F89B8;
	width: 100px;
}
table tr:first-child {
	background-color: #8063A1;
	color: white;
}
table tr:nth-child(2) {
	background-color: #DFD7E8;
}
table tr:nth-child(4) {
	background-color: #DFD7E8;
}
table tr:nth-child(6) {
	background-color: #DFD7E8;
}
#a {
	text-align: center;
}

Ogramar · « **Respuesta #1 en:** 20 de Enero 2016, 16:56 »

Buenas dimiste el ejercicio parece bien resuelto

Los valores que tengo de referencia son estos:

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

Más o menos coincide con los que has puesto, hay que tener en cuenta que hay variaciones según los navegadores

Salu2

Dimitar Stefanov · « **Respuesta #2 en:** 22 de Enero 2016, 00:27 »

Buenas, Ogramar.

La verdad que este ejercicio me puso algunas dificultades, pero como explico en la resolución, tomé de referencia los h4 como valores de la letra normal de los navegadores y de allí hice los cálculos necesario para llegar al resultado final.

Saludos.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: