Un buen diseño web es a menudo una buena tipografía. Dado que gran parte del contenido de una página web se presenta como texto, ser capaz de estilizar ese texto para que sea atractivo y efectivo es una habilidad importante para poseer como diseñador web. Desafortunadamente, no tenemos el mismo nivel de control tipográfico en línea que en la versión impresa. Esto significa que no siempre podemos dar un estilo fiable al texto de un sitio web de la misma manera que lo haríamos en una pieza impresa.
Un estilo de párrafo común que se ve a menudo en la impresión (y que podemos recrear en línea) es donde la primera línea de ese párrafo tiene un espacio de tabulación sangrado. Esto permite a los lectores ver dónde comienza un párrafo y dónde termina otro.
Este estilo visual no se ve tanto en las páginas web porque los navegadores, de forma predeterminada, muestran los párrafos con espacio debajo de ellos como una forma de mostrar dónde termina uno y dónde comienza otro, pero si desea cambiar el estilo de una página para que tenga ese estilo de sangría inspirado en la impresión en los párrafos, puede hacerlo con la propiedad text-indent style.
La sintaxis de esta propiedad es simple. A continuación se explica cómo añadir un sangrado de texto a todos los párrafos de un documento.
p {
sangría del texto: 2em;
}
> } } } } } } } } } } } } }
Personalización de los sangrados
Una forma de especificar exactamente los párrafos a sangrar, puede agregar una clase a los párrafos que desea sangrar, pero eso requiere que edite cada párrafo para agregarle una clase. Esto es ineficiente y no sigue las mejores prácticas de codificación HTML.
En su lugar, debe tener en cuenta al sangrar párrafos. Se sangran los párrafos que están directamente después de otro párrafo. Para ello, puede utilizar el selector de hermanos adyacente. Con este selector, usted está seleccionando cada párrafo que es inmediatamente precedido por otro párrafo.
p + p {
sangría del texto: 2em;
}
> } } } } } } } } } } } } }
Dado que está sangrando la primera línea, también debe asegurarse de que sus párrafos no tengan ningún espacio extra entre ellos (que es el valor predeterminado del navegador). Estilísticamente, debe tener espacio entre los párrafos o sangrar la primera línea, pero no ambos.
p {
margen-inferior: 0;
acolchado en el fondo: 0;
}
p + p {
margen-tapón: 0;
acolchado: 0;
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>)}
>
Sangrados negativos
También puede utilizar la propiedad text-indent , junto con un valor negativo, para hacer que el inicio de una línea vaya a la izquierda y no a la derecha como una sangría normal. Puede hacer esto si una línea comienza con una comilla de modo que el carácter de comillas aparezca en el pequeño margen a la izquierda del párrafo y las letras mismas todavía formen una bonita alineación a la izquierda.
Digamos, por ejemplo, que usted tiene un párrafo que es un descendiente de una cita en bloque y quiere que se sangren negativamente. Podrías escribir este CSS:
blockquote p {
sangría de texto: -.5em;
}
>
Esto daría al comienzo del párrafo, que presumiblemente incluye el carácter de la cita inicial, un ligero desplazamiento hacia la izquierda para crear una puntuación colgante.
Con respecto a los márgenes y el relleno
A menudo en el diseño web, se utilizan valores de margen o relleno para mover elementos y crear espacio en blanco. Sin embargo, esas propiedades no funcionarán para lograr el efecto de párrafo sangrado. Si aplica cualquiera de estos valores al párrafo, el texto completo de ese párrafo, incluyendo cada línea, estará espaciado en lugar de sólo la primera línea.
