feed twitter facebook LinkedIn facebook

CSS » Sangría francesa en CSS

noviembre 30, 2007 por Víctor Cuervo 6 Comentarios Imprimir Imprimir

Una sangría francesa incluye un desplazamiento de todas las líneas de un párrafo excepto la primera. Las sangrías francesas son útiles cuando se quieren agregar gráficos al comienzo del párrafo.

Un ejemplo de párrafo con sangría francesa 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.

Mediante CSS podemos definir un estilo para poder tener párrafos con sangría francesa. Para ello tenemos que buscar las propiedades que cumplan las características de la sangría francesa: que el párrafo esté desplazado a la derecha (padding-left) y que la primera línea esté adelantada hacía la izquierda (text-indent).

El estilo CSS nos quedará de la siguiente forma:

<style text="text/css">

p.francesa {
	text-indent: -30px;
	position: absolute;
	padding-left: 40px
}

</style>

En este código vemos que asignamos la propiedades al elemento P y en concreto a la clase "francesa". A si que tendremos que utilizar esta clase dentro de nuestra página HTML. La página nos quedará de la siguiente forma:

<p class="francesa">...</p>

Visualizar el ejemplo | Descargar el código

tags: , , , ,

Artículos relacionados:

6 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Karina Diaz Chavez
    diciembre 1, 2007 #

    Tengo que crear una Agenda en JAVA donde la información se guarde en una base de datos, ya tengo la conexion, pero no puedo insertar contactos, me podrian ayudar con el codigo para poder insertar, borrar, consultar y modificar contactos… porfavor….

    ya se q pido mucho…. pero no se nada!!!!

  2. vale
    noviembre 22, 2008 #

    Gracias aprendí mucho :)

  3. sergio antonio linares castro
    enero 26, 2009 #

    en que casose ocupa la sangria francesa y en cuales la de preimera linea

  4. bbrenda rolong
    febrero 10, 2011 #

    que bien me ayuda mi¿ucho nerds

  5. Diseñador
    noviembre 27, 2012 #

    Gracias por el aporte, será de mucha utilidad. Un saludo.

  6. Víctor Cuervo
    diciembre 16, 2012 #

    @Diseñador,
    Me alegro mucho que te haya sido de utilidad :-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>

*