Estilos CSS para Sigil「Tutorial」

561 19 8
                                    

Está a punto de cumplir un año desde que hice el tutorial para maquetar ebooks con Sigil y hoy os traigo un pequeño suplemento para decorar nuestros ebooks y dejarlos aún más bonitos. Yo hablaré poco, por no decir nada, ya que la autora de esta guía para sobrevivir con los estilos CSS en Sigil es Laura Herranz Hernández, escritora y autora del relato corto Soldado (¡gratis en Lektu!) que ha montado con Sigil.

Como me enteré que sabía de códigos, le pedí que me echase una mano para ampliar esa ridiculez que os puse en el tutorial. Y, para mi sorpresa, me hizo una guía de oro. En serio, Laura, muchísimas gracias.

 En serio, Laura, muchísimas gracias

¡Ay! Esta imagen no sigue nuestras pautas de contenido. Para continuar la publicación, intente quitarla o subir otra.

El formato ebook no es un diseño fijo como un libro físico, hay que tener en cuenta que es un diseño fluido, como si fuese un pergamino. No existe el concepto de página y por eso hay que trabajar cada parte en un archivo diferente. También hay que tener en cuenta que aunque trabajemos el diseño, la mayoría de lectores electrónicos van a imponer sus tipografías, interlineados y márgenes.

Con esto claro, vamos con la parte de los estilos o CSS.

Hay distintas partes del libro a las que les podemos dar el aspecto que queramos, aunque hay que tener en cuenta que esto se verá más reflejado en la versión epub o PDF que en la mobi, porque esta última al ser el formato nativo de Amazon utiliza sus propias tipografías y no se verá igual que lo que hayamos creado en Sigil.

Por partes, ¿qué es cada elemento?:

head = cabecera, parte no visible que almacena metadatos. Aquí es donde se enlaza la página de estilos. Se puede hacer manual con la vista de código o con la nueva versión de Sigil seleccionamos el archivo .xhtml que queremos con botón derecho y elegimos la opción "Enlazar hojas de estilos...".

body = cuerpo del texto, engloba tanto a los títulos de texto como a los párrafos.

h1, h2, h3, h4, h5, h6 = Títulos de texto. Van por jerarquías, de mayor a menor tamaño. El más grande es h1 y es el más importante de todos, es el que debería tener asignado el título de nuestra obra y ningún otro texto más ha de usarlo. Si se hace no pasa nada, pero mejor respetar las jerarquías.

p = párrafo, la P va en minúscula. El texto principal de nuestro escrito.

span = etiqueta invisible para asignar estilos, id o clases a una parte específica del texto.

Una vez claras las partes básicas que más vamos a utilizar, pasamos a cómo darles estilos a estas partes.

Cada vez que queramos darle estilos a una parte hay que utilizar llaves para abrir y cerrar el "diálogo", son estas { }. El orden quedaría así:

1º A qué queremos darle estilo.

2º Abrir llave.

3º Escribir los estilos separados por punto y coma.

Consejos para escribirDonde viven las historias. Descúbrelo ahora