feed twitter facebook LinkedIn facebook

CSS » Sangria de primera línea con CSS

noviembre 28, 2007 por Víctor Cuervo 5 Comentarios Imprimir Imprimir

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:

<style text="text/css">
p.primeralinea {
	text-indent: 40px;
}
</style>

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:

<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>

Visualizar el ejemplo | Descargar el código

tags: , , ,

Artículos relacionados:

5 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. maria isabel lopez perez
    marzo 9, 2008 #

    cual es el signo de la sangria me gustaria saberlo

  2. bianca correa puertas
    mayo 16, 2008 #

    me gustaria saber la sangria isquierda

  3. moncholo
    mayo 4, 2009 #

    no sean tontossss
    como no van a saberr
    gilless

  4. SEO
    abril 2, 2014 #

    I’m no longer positive the place you are getting your info, but great topic.
    I must spend a while learning much more or understanding more.
    Thanks for fantastic info I used to be searching for this info for my
    mission.

  5. Website Design Company
    abril 19, 2014 #

    Incredible! Continue the good work. :-D

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*