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

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on email
Share on print
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.

Deja un comentario

TAMBIÉN TE INTERESA

iPhone y Air Pods.

Las características destacadas de iOS 14

Cada año en septiembre, Apple lanza una nueva versión de su sistema operativo – iOS 14 –, el año pasado sucedió el 16 de septiembre. El nombre “iOS” se compone de la típica “i” de Apple y la abreviatura “OS”, que significa “sistema operativo”. En principio, iOS no es más que un sistema operativo estándar para iPhones.

Todo lo que debes saber del nuevo iPhone 12

Las características destacadas del nuevo iPhone 12

Probablemente hay pocos eventos que los fanáticos de los teléfonos inteligentes esperan tanto como el lanzamiento de nuevos dispositivos. Los partidarios de Apple, en particular, están en llamas cuando el próximo iPhone está a punto de ser lanzado. Como ninguna otra compañía de teléfonos inteligentes, Apple sabe cómo presentar a sus usuarios nueva tecnología en grandes notas

tendencias en low code

Tendencias en el área de Low Code

¿Qué pasará con la transformación digital en 2021 y qué papel jugarán las tecnologías de low code en esto? hemos identificado las tendencias con miras al desarrollo de software basado en modelos. ¿Será el 2021 el “año de Low-Code “? Al menos los analistas estiman que tres cuartas partes de todas las aplicaciones comerciales de este año se desarrollarán

seguridad y mantenimiento smartphone

Mantenimiento smartphone: consejos para un mejor cuidado y seguridad de tu teléfono

Hablamos de consejos de mantenimiento smartphone. Ya sea en el trabajo o en la vida privada, la seguridad de tu smartphone se ha convertido en una parte integral de muchas áreas. En los servicios de mensajería se envían mensajes privados y Clouds almacena fotos personales. Para no perder esta información confidencial, los propietarios de teléfonos móviles deben proteger sus teléfonos inteligentes. No se debe

tecnología QLED de Samsung

Televisores QLED, OLED, Micro-LED y Mini-LED

Los sistemas OLED, QLED, etc. ofrecen una excelente nitidez de imagen con detalles impresionantes, colores brillantes y un contraste gigantesco del negro profundo al blanco brillante: los televisores han alcanzado un nivel de calidad notable. Varias tecnologías de pantalla compiten por la mejor calidad de imagen. Las primeras pantallas planas tuvieron que ponerse al día en

Cómo instalar Linux junto con Windows

Cómo instalar Linux junto con Windows en 8 pasos

¿Te gustaría saber cómo instalar Linux en Windows, pero solo tienes una computadora? No hay problema, ambos funcionan en paralelo, con muy poco esfuerzo. Ejecutar Linux y Windows en la misma máquina es bastante fácil: simplemente eliges qué sistema iniciar al arrancar. Todos los pasos necesarios se pueden encontrar aquí muy sencillamente explicados. Índice de contenidos1 ¿Cómo