Usando a propiedade do sangrado de texto e os selectores adyacentes do irmán
O bo deseño web adoita ser unha boa tipografía. Unha vez que a gran parte do contido dunha páxina web é presentado como texto, o estilo de que o texto sexa atractivo e efectivo é unha habilidade importante para posuír como diseñador web. Desafortunadamente, non temos o mesmo nivel de control tipográfico en liña que o que facemos en impresión. Isto significa que non podemos sempre un estilo de texto de forma fiable nun sitio web do mesmo xeito que poderiamos facelo nunha peza impresa.
Un estilo de parágrafo común que ves moitas veces en impresión (e que podemos recrear en liña) é onde a primeira liña de devandito parágrafo ten sangría un espazo de tabulación . Isto permite aos lectores ver onde comeza un parágrafo e outro termina.
Non ve este estilo visual tanto nas páxinas web porque os navegadores, de xeito predeterminado, mostran parágrafos con espazo debaixo deles como unha forma de mostrar onde se termina e outro comeza, pero se quere que unha páxina tivese esa impresión, estilo inspirado en sangría nos parágrafos, podes facelo coa propiedade do estilo de sangría de texto .
A sintaxe para esta propiedade é sinxela. Velaquí como engadirá un guión de texto a todos os parágrafos dun documento.
p {text-indent: 2em; }Personalización das sangrías
Unha forma de especificar exactamente os parágrafos para sangrar, pode engadir unha clase aos parágrafos que quere sangrar, pero iso require que edite todos os parágrafos para engadir unha clase a ela. Isto é ineficiente e non segue as mellores prácticas de codificación HTML .
En cambio, debes considerar cando sangra os parágrafos. Indica parágrafos que están directamente seguindo outro parágrafo. Para facelo, pode usar o selector de irmáns adxacentes. Con este selector, está a seleccionar cada parágrafo que está inmediatamente precedido por outro parágrafo.
p + p {text-indent: 2em; }Xa que está sangrando a primeira liña, tamén debe asegurarse de que os seus parágrafos non teñan espazo extra entre eles (que é o navegador por defecto). De forma estilística, debería ter espazo entre os parágrafos ou a sangría da primeira liña, pero non os dous.
p {marxe inferior: 0; padding-bottom: 0; } p + p {margin-top: 0; padding-top: 0; }Sangos negativos
Tamén pode usar a propiedade do sangrado de texto , xunto cun valor negativo, para facer que o comezo dunha liña vaia á esquerda fronte á dereita como unha sangría normal. Podes facelo se unha liña comeza cunha comiña para que o personaxe de cita apareza na lixeira marxe á esquerda do parágrafo e as mesmas letras aínda forman un bo aliñamento esquerdo.
Digamos, por exemplo, que ten un parágrafo que é descendente dun bloque de bloque e que quere que estea indentado negativamente. Podería escribir este CSS:
blockquote p {text-indent: -5em; }Isto daría o inicio do parágrafo, que presumiblemente inclúe o carácter de cita de apertura, que se moverá un pouco cara á esquerda para crear unha puntuación colgada.
Respecto de márgenes e recheo
Moitas veces, no deseño web, usa valores de marxe ou padding para mover elementos e crear espazo en branco. Non obstante, esas propiedades non funcionarán para lograr o efecto de parágrafo sangrado. Se aplica algún destes valores ao parágrafo, todo o texto dese parágrafo, incluída cada liña, estará espazado en vez de só a primeira liña.