Sangría francesa en CSS

30/nov/2007 CSS , , , , 6 Comentarios

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

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

6 comentarios en “Sangría francesa en CSS”

Víctor Cuervo

Víctor Cuervo

@Diseñador,
Me alegro mucho que te haya sido de utilidad 😀

Víctor Cuervo

Diseñador

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

Víctor Cuervo

bbrenda rolong

que bien me ayuda mi¿ucho nerds

Víctor Cuervo

sergio antonio linares castro

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

Víctor Cuervo

vale

Gracias aprendí mucho :)

Víctor Cuervo

Karina Diaz Chavez

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

¿Algo que nos quieras comentar?

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

*


*