- index.html
- style.css
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Superíndices y subíndices con CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Mobile first!</h1>
<p>Al mismo tiempo apareció un enfoque parecido llamado Mobile First <sup>[literalmente:</sup> <span class="sup">primero para móviles]</span>. En esencia, es el mismo diseño adaptable, pero con un requisito obligatorio: empezar a diseñar la interfaz desde la versión móvil <sub>[es decir,</sub> <span class="sub">desde la pantalla más pequeña]</span>.</p>
<hr>
<p>Hagamos una pausa en el artículo para ver ejemplos de fórmulas:</p>
<ul>
<li>H<sub>2</sub>O y</li>
<li>H<span class="sub">2</span>O<br></li>
<li>sin<sup>2</sup>x y</li>
<li>sin<span class="sup">2</span>x</li>
</ul>
</body>
</html>
CSS
body {
font-size: 16px;
}
h1 {
font-size: 24px;
}
.sub {
}
.sup {
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
Imitamos las etiquetas sup y sub con CSS:
- Para la clase
.sub, añadevertical-align: sub;. - Para la clase
.sup, añadevertical-align: super;. - Añade a ambas reglas
font-size: 12px;.
Compara las etiquetas nativas de índices con la variante en CSS.