Sangría de un párrafo en una página web mediante el uso de CSS

Sangría de un párrafo en una página web mediante el uso de CSS

Sangría de un párrafo en una página web mediante el uso de CSS

VALORACIÓN DEL ARTÍCULO:
5/5


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.

TAMBIÉN TE INTERESA

Zoom AI Companion

Zoom afina su asistente inteligente: descubre todo lo que puede hacer AI Companion 2.0

En su más reciente apuesta por la integración de inteligencia artificial, Zoom ha lanzado AI Companion 2.0, la última versión de su asistente inteligente. Anunciada en el evento Zoomtopia y ahora disponible para los usuarios de la plataforma, esta actualización del asistente AI Companion llega con un conjunto de nuevas herramientas y capacidades avanzadas que

TicWatch Atlas

TicWatch Atlas se presenta como el reloj inteligente de los aventureros

Mobvoi, conocida por su línea de relojes inteligentes TicWatch, ha presentado su última incorporación: el TicWatch Atlas. Este nuevo modelo, diseñado para resistir en los entornos más hostiles, promete revolucionar el mercado de los relojes inteligentes orientados a la aventura. Con un diseño robusto y una serie de características avanzadas, el TicWatch Atlas apunta a

TucomunidApp

Tasación de casas con TucomunidApp: más allá de una venta

Cuando se habla de tasación de casas, la mayoría de las personas asocian automáticamente este proceso con la compraventa del inmueble. Sin embargo, contar con una valoración actualizada de una propiedad tiene múltiples ventajas que van mucho más allá de una simple transacción. Entender el verdadero valor de una vivienda es crucial no solo para

Rakuten TV Enterprise Services

Rakuten TV abre un nuevo negocio para el mercado B2B

Rakuten TV, una de las principales plataformas de streaming en Europa, ha presentado en el evento Mipcom su nueva apuesta estratégica: Rakuten TV Enterprise Services. Este anuncio marca un hito importante en la evolución de la empresa, que busca expandir sus servicios en el mercado del entretenimiento digital, facilitando la creación, gestión y monetización de