Atom

Increíble editor web, uno de mis favoritos.
Gratis, multiplataforma, de código abierto, ligero y personalizable. No se le puede pedir más.
En esta ocasión te mostraré como crear indentaciones (tabulaciones) en el texto y espacios en blanco.
Empecemos con esta hoja html:
Utilizo la clase "tabulado" en el primer párrafo. Por cierto, he visto que en el vídeo dejé el cierre de este párrafo como un cierre de enlace (</a>
). Fallo mío, ignoraló como hace el navegador .
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Indentaciones y espacios con CSS</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p class="tabulado">Este párrafo está tabulado.</p>
<p>Este párrafo no está tabulado.</p>
</body>
</html>
.tabulado {
text-indent: 25px;
}
Ahora, el párrafo que tiene la clase, se queda con 25px de indentación.
Este párrafo está tabulado.
Este párrafo no está tabulado.
Gracias a la siguiente propiedad CSS, podemos determinar el espacio que se deja entre palabras.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
</head>
<body>
<p class="espaciado">Quiere la boca exhausta vid, kiwi, piña y fugaz jamón.
Fabio me exige, sin tapujos, que añada cerveza al whisky.
Jovencillo emponzoñado de whisky, ¡qué figurota exhibes!
La cigüeña tocaba cada vez mejor el saxofón y el búho pedía
kiwi y queso. El jefe buscó el éxtasis en un imprevisto baño
de whisky y gozó como un duque. Exhíbanse politiquillos zafios,
con orejas kilométricas y uñas de gavilán. El cadáver de Wamba,
rey godo de España, fue exhumado y trasladado en una caja de zinc
que pesó un kilo. El pingüino Wenceslao hizo kilómetros bajo
exhaustiva lluvia y frío, añoraba a su querido cachorro. El
veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña
tocaba el saxofón detrás del palenque de paja.Quiere la boca
exhausta vid, kiwi, piña y fugaz jamón. Fabio me exige, sin
tapujos, que añada cerveza al whisky. Jovencillo emponzoñado
de whisky, ¡qué figurota exhibes! La cigüeña tocaba cada vez
mejor el saxofón y el búho pedía kiwi y queso. El jefe buscó
el éxtasis en un imprevisto baño de whisky y gozó como un duque.
Exhíbanse politiquillos zafios, con orejas kilométricas y uñas de
gavilán. El cadáver de Wamba, rey godo de España, fue</p>
</body>
</html>
.espaciado {
word-spacing:50px;
font-size:25px;
}
Otra de las cosas que se pueden hacer con CSS para manipular el texto, es utilizar la siguiente propiedad capaz de establecer una determinada separación para cada una de las letras de un texto.
.espaciado {
font-size:25px;
letter-spacing: 10px;
}
Para terminar con este capítulo, veamos como se aplica el espaciado entre líneas de texto.
.espaciado {
font-size:25px;
line-height: 100px;
}
En el vídeo tienes muchos más ejemplos de uso de estas propiedades CSS.
Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.
Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.
No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.