Sangría de primera línea con CSS

28/nov/2007 CSS 3 Comentarios
css

En tipografía, una sangría es la introducción de uno o varios caracteres en blanco delante de una línea. Se suele emplear en textos que están alineados a la izquierda.

En el caso de la sangría de primera línea, los caracteres en blanco solo se introducen en la primera de un párrafo.

Un ejemplo de sangría de primera línea sería el siguiente:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.

Si queremos utilizar la sangría de primera línea en nuestra página web lo podremos hacer mediante hojas de estilo CSS. En concreto necesitamos manejar la propiedad text-indent.

Esta propiedad establece una separación entre el borde y el inicio de la primera frase de un párrafo. El valor que le podemos dar a la propiedad puede ser un valor absoluto o porcentual.

De esta manera nuestro código CSS quedaría de la siguiente forma:

  1. p.primeralinea {
  2. text-indent: 40px;
  3. }

Hay que ver que la propiedad se la estamos aplicando al elemento P, pero cuando este aplique la clase "primerlinea". Es decir, que funcionará cuando incluyamos un párrafo, dentro de nuestra página HTML, cuyo valor para el atributo class sea "primeralinea".

El párrafo sería de la siguiente forma:

  1. <p class="primeralinea">En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.</p>

Vídeos sobre CSS

Ningún video coincide

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “Sangría de primera línea con CSS”

Víctor Cuervo

moncholo

no sean tontossss
como no van a saberr
gilless

Víctor Cuervo

bianca correa puertas

me gustaria saber la sangria isquierda

Víctor Cuervo

maria isabel lopez perez

cual es el signo de la sangria me gustaria saberlo

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*