Bien diseño web a menudo se trata de una buena tipografía. Dado que gran parte del contenido de una página web se presenta como texto, ser capaz de diseñar ese texto para que sea atractivo y eficaz es una habilidad importante que debe poseer como diseñador web. Desafortunadamente, no tenemos el mismo nivel de control tipográfico en línea que tenemos en forma impresa. Esto significa que no siempre podemos diseñar el texto de manera confiable en un sitio web de la misma manera que podríamos hacerlo en una pieza impresa.
Un estilo de párrafo común que se ve a menudo en forma impresa (y que podemos recrear en línea) es donde la primera línea de ese párrafo tiene una sangría. espacio de pestaña. Esto permite a los lectores ver dónde comienza un párrafo y dónde termina otro.
No ve este estilo visual tanto en las páginas web porque los navegadores, de forma predeterminada, muestran párrafos con espacio debajo de ellos como una forma de mostrar dónde termina uno y comienza otro, pero si desea darle estilo a una página para tener ese inspirado en la impresión
estilo de sangría en los párrafos, puede hacerlo con el guion de texto propiedad de estilo.La sintaxis de esta propiedad es simple. Así es como agregaría una sangría de texto a todos los párrafos de un documento.
pag {
sangría de texto: 2em;
}
Personalizar las sangrías
Una forma de especificar exactamente los párrafos a sangrar es agregar una clase a los párrafos que desea sangrar, pero eso requiere que edite cada párrafo para agregarle una clase. Eso es ineficiente y no sigue Codificación HTML mejores prácticas.
En su lugar, debe considerar cuándo aplica sangría a los párrafos. Aplica sangría a los párrafos que siguen directamente a otro párrafo. Para hacer esto, puede usar el selector de hermanos adyacente. Con este selector, está seleccionando cada párrafo que está inmediatamente precedido por otro párrafo.
p + p {
sangría de texto: 2em;
}
Dado que está sangrando la primera línea, también debe asegurarse de que sus párrafos no tengan ningún espacio adicional entre ellos (que es el valor predeterminado del navegador). Estilísticamente, debes tener espacio entre párrafos o sangra la primera línea, pero no ambas.
pag {
margen inferior: 0;
fondo acolchado: 0;
}
p + p {
margen superior: 0;
acolchado superior: 0;
}
Sangrías negativas
También puede utilizar el guion de texto propiedad, junto con un valor negativo, para hacer que el inicio de una línea vaya a la izquierda en lugar de a la derecha como una sangría normal. Puede hacer esto si una línea comienza con una comilla para que el carácter de la cita aparezca en el un ligero margen a la izquierda del párrafo y las letras en sí todavía forman una bonita izquierda alineación.
Digamos, por ejemplo, que tiene un párrafo que es descendiente de una cita en bloque y desea que tenga una sangría negativa. Podrías escribir este CSS:
blockquote p {
sangría de texto: -.5em;
}
Esto haría que el comienzo del párrafo, que presumiblemente incluye el carácter de la cita de apertura, se mueva ligeramente hacia la izquierda para crear puntuación colgante.
Respecto a los márgenes y el relleno
A menudo, en el diseño web, utiliza valores de margen o relleno para mover elementos y crear espacios en blanco. Sin embargo, esas propiedades no funcionarán para lograr el efecto de párrafo con sangría. Si aplica cualquiera de estos valores al párrafo, el texto completo de ese párrafo, incluidas todas las líneas, se espaciará en lugar de solo la primera línea.