Hoja de estilos para ebook

A raíz de unos vídeos que estoy compartiendo en TikTok sobre cómo maquetar un ebook en Sigil, os dejo por aquí una hoja de estilos sencilla para dar formato a vuestro proyecto, ideal para aquellas y aquellos que no sabéis lenguaje CSS, pero que aún así queréis que el ebook quede bonito y presentable.

Se trata de una propuesta muy simple, ideal para novelas o antologías. Para utilizarla solo hace falta copiar el texto que hay a continuación, pegarlo en la hoja de estilos en blanco de vuestro proyecto y seguir las instrucciones de uso incluidas.

Ya me contaréis si la habéis utilizado y qué tal os ha ido.


/* SOBRE ESTA HOJA DE ESTILOS */

/* Esta hoja de estilos ha sido diseñada por Anna Roldós */

/* Está pensada para usar en la maquetación de ebooks con el programa Sigil */

/* Sirve para novelas sencillas y otro tipo de texto muy sencillos */

/* Tiene 4 niveles de título; permite marcar negrita y cursiva; permite marcar los enlaces y diferenciar los visitados de los no visitados; muestra el texto justificado, con una sangría en la primera frase de cada párrafo, exceptuando en el primer párrafo de cada capítulo; permite marcar los saltos de párrafo, con o sin «***»  */

/* INSTRUCCIONES DE USO */

/* 1. Copia y pega este texto tal y como está en la hoja de estilos en blanco de la carpeta «styles». */

/* 2. Marca el texto de los archivos html de la carpeta «text» con las etiquetas correspondientes: <p> para párrafos, es decir, todo el texto; <h1>, para títulos; <h2> para subtítulos; <h3> y <h4> para títulos menores; <em> para cursiva; <strong> para negrita; <a> para enlaces. */

/* 3. Para los estilos especiales, descritos en esta hoja como CREDITOS y TEXTO: */

/* a. Lee las instrucciones para cada caso. */

/* b. Copia la etiqueta que se especifica para cada estilo (la que va dentro de los corchetes), y pegarla dentro de la etiqueta del párrafo correspondiente, en el archivo de texto html de la carpeta «text». Ver ejemplo siguiente */

/* EJEMPLO PARA CENTRAR UN PÁRRAFO */

/* Copia la etiqueta correspondiente que encontrarás en esta hoja. En este caso ——> class=”centrado” */

/* Ve a la hoja de texto html en la que se encuentra el párrafo que quieres centrar */

/* Pega el código dentro de la etiqueta del párrafo SIN LOS CORCHETES ——>

<p>Texto normal. </p>

<p class=”centrado”>Este texto va centrado. </p>

<p>Texto normal. </p>

*/

/* Has terminado : ) */

/* GENERAL */

body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {

                margin:0;

                padding:0;

                border-width:0;

    widows:2;

    orphans:2;

}

@page {

    margin-top: 5px;

    margin-bottom: 5px;

    margin-left: 20px;

    margin-right: 20px;

}

p {

   font-family:serif;

                font-size:1em;

                font-style:normal;

                font-variant:normal;

                font-weight:normal;

                line-height:1.5;

                margin-bottom:0%;

                margin-left:0%;

                margin-right:0%;

                margin-top:0%;

                text-align:justify;

                text-decoration:none;

   text-indent: 1em;

}

h1 {

                font-family: sans-serif;

                font-size:2em;

                font-style:normal;

                font-variant:normal;

                font-weight:bold;

                line-height:1.2;

                margin-bottom:0em;

                margin-left:0em;

                margin-right:0em;

                margin-top:3em;

                text-align:center;

                text-decoration:none;

                text-indent:0em;

                }

h2 {

                font-family: sans-serif;

                font-size:1.5em;

                font-style:normal;

                font-variant:normal;

                font-weight:normal;

                line-height:1.2;

                margin-bottom:2.5em;

                margin-left:0%;

                margin-right:0%;

                margin-top:0em;

                text-align:center;

                text-decoration:none;

                text-indent:0em;

}

h3 {font-family: sans-serif;

                font-size:1.3em;

                font-style:normal;

                font-variant:normal;

                font-weight:normal;

                line-height:1.2;

                margin-bottom:0.8em;

                margin-left:0%;

                margin-right:0%;

                margin-top:2em;

                text-align:left;

                text-decoration:none;

                text-indent:0em;

}

h4 {font-family:serif;

                font-size:1em;

                font-style:normal;

                font-variant:small-caps;

                font-weight:600;

                line-height:1.2;

                margin-bottom:0.8em;

                margin-left:0%;

                margin-right:0%;

                margin-top:2em;

                text-align:left;

                text-decoration:none;

                text-indent:0em;

}

em {

    font-family:serif;

    font-style:italic;

}

strong {

    font-family:serif;

    font-weight:bold;

}

a:link{

    color: #808080;

    text-decoration: underline;

}

a:visited{

    color:#808080;

    text-decoration: underline;

}

a:hover{

    color:#C0C0C0;

    text-decoration: underline;

    font-weight: bold;

}

/* CREDITOS */

/* en la página de créditos usaremos dos etiquetas distintas, una para el primer párrafo y la otra para todos los demás, hay que marcar cada párrafo con la etiqueta correspondiente */

/* etiqueta para el primer párrafo [ class=”creditos01” ] */

/* etiqueta para el resto de párrafos [ class=”creditos01” ] */

p.creditos01{

    font-family: serif;

    font-size: 0.8em;

    text-align: left;

    text-indent: 0em;

    margin-top: 50%;

    margin-bottom: 1em;

    margin-left: 1em;

}

p.creditos02{

    font-family: serif;

    font-size: 0.8em;

    text-align: left;

    text-indent: 0em;

    margin-top: 0em;

    margin-left: 1em;

    }

/* TEXTO */

/* usamos esta etiqueta para el primer párrafo de cada capítulo */

/* etiqueta: class=”primer_parrafo” */

p.primer_parrafo{

    font-family:serif;

}

/* texto centrado */

/* etiqueta: [ class=”centrado” ] */

p.centrado{

        text-align: center;

                }

/* texto alineado a la derecha */

/* etiqueta: [ class=”derecha” ] */

p.derecha {

                 text-align: right;

                 }

/* saltos de párrafo */

/* en el salto de párrafo con asteriscos solo marcar el párrafo que contiene los asteriscos, es decir <p>***</p> */

/* etiqueta: [ class=” salto_parrafo_con_asteriscos” ] */

p.salto_parrafo_con_asteriscos{

                text-align: center;

                margin-top:2em;

                margin-bottom:2em;

}

/*en el salto de párrafo normal, en el que dejamos un par de líneas en blanco, debemos marcar el párrafo anterior al salto y el posterior, cada uno con su etiqueta correspondiente*/

/* etiqueta para el párrafo anterior: [ class=” salto_parrafo_antes” ] */

/*etiqueta para el párrafo posteior: [class=” salto_parrafo_después] */

p.salto_parrafo_antes{

                margin-bottom:2em;

}

p. salto_parrafo_después {

       text-indent: 0em;

}

/*IMAGENES*/

/* para imágenes */

/* etiqueta [ class=”imgpag” ] */

.imgpag {

                 text-align: center;

                 margin:0;

                 text-indent:0;

                 max-height:100%;

                 page-break-before:always;

}

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

A %d blogueros les gusta esto: