Sangría francesa en CSS

30/Nov/2007 CSS 8 Comentarios
Ejemplos Programación CSS

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. Añadiendo al listado de ejemplos que tenemos sobre CSS, en el artículo de hoy, veremos cómo hacer una sangría francesa en CSS.

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.

Podemos observar los desplazamientos de todas las líneas, menos de la priemra.

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. Estas propiedades buscan que el párrafo esté desplazado a la derecha, lo cual conseguimos mediante padding-left y que la primera línea esté adelantada hacía la izquierda, lo cual vamos a obtener utilizando text-indent.

El estilo CSS para poder aplicar nuestra sangría francesa nos quedará de la siguiente forma:

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

En este código vemos que asignamos la propiedades al elemento p y en concreto a la clase «francesa». Así que tendremos que utilizar esta clase y el elemento p dentro de nuestra página HTML. La página nos quedará de la siguiente forma:

<p class="francesa">En un lugar de la Mancha, de...</p>

De esta manera tan sencilla y manejando las propiedades padding-lefttext-indent, podemos crear una sangría en CSS. Espero que lo utilicéis mucho y así podáis mejorar las sangrías dentro del contenido de vuestras webs.

8 comentarios en “Sangría francesa en CSS”

Víctor Cuervo

Vicente

Gracias me resultó muy útil.

Víctor Cuervo

Víctor Cuervo

Vicente, me alegra mucho que te haya resultado útil. Saludos.

Víctor Cuervo

Diseñador

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

Víctor Cuervo

Víctor Cuervo

@Diseñador,
Me alegro mucho que te haya sido de utilidad :-D

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

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.