Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: 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"
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;
}
-
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
-
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.