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

all ia

all ia, el primer buscador de herramientas de inteligencia artificial

Ha llegado el punto en que uno ya se pierde con las herramientas de inteligencia artificial. A lo largo de este último año han surgido infinidad de soluciones que se distribuyen en todos los rincones de internet. Se podría decir que hay una para cada inquietud, sea a nivel personal en el terreno profesional. Pero

login-y-contraseña

El método definitivo para tener una contraseña segura: 9 pasos

Tener una contraseña segura es el primer paso para tener cierta seguridad en nuestra vida digital. Correo electrónico, claves del banco, Amazon, por poner unos ejemplos… son plataformas que estamos acostumbrados a usar casi a diario. Para todos ellos y el resto de plataformas a las que estemos suscritos, la contraseña segura es fundamental para

meta-quest-3

Meta Quest 3: características del nuevo adalid de la realidad virtual

La realidad virtual (VR) ha experimentado un crecimiento exponencial en los últimos años, y Meta Quest 3 se presenta como el pináculo de esta evolución. Como la tercera generación de dispositivos de realidad virtual autónomos desarrollados por Meta, anteriormente conocida como Facebook, el Meta Quest 3 representa una amalgama de tecnología de vanguardia y diseño

Wacom-Movink

Wacom Movink, el panel interactivo OLED más fino y ligero del mercado

Parecía estar ya todo escrito sobre monitores y panales y en éstas, llega el Wacom Movink para sorprendernos a todos. Dirigido especialmente para diseñadores y creadores de contenido, esta pantalla representa un avance significativo por su combinación única de rendimiento, portabilidad y calidad visual excepcional. El dispositivo llega acompañado de un nuevo lápiz digital, su