Está en la página 1de 8

20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A


Celia Añó

Escritora de fantasía · Dibujante

Estilos CSS para Sigil「Tutorial」

EN 11 SEPTIEMBRE, 201831 OCTUBRE, 2018 / POR CELIA


AÑÓ
Está a punto de cumplir un año desde que hice el tutorial para
maquetar ebooks con Sigil
(h ps://labrujadelteatro.wordpress.com/2017/10/03/enmaquetar-un-
ebook-con-sigil-tutorial/) 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
(h ps://lektu.com/l/lhh-writing/soldado/9806)!) 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.

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.
20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A

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.
4. Cerrar llave.

Ejemplo:

p {text-align: justify;

font-size: 12px;

Con la estructura básica, ahora hay que saber qué cosas podemos
poner. Las básicas vienen ya con el propio Sigil y simplemente con
tener escrito p { } y dejar el cursor entre las llaves, podemos clicar en
las opciones de estilo y se escribirán automáticamente.
20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A

Pero si te gusta escribir código y quieres más opciones que las básicas
de negrita, cursiva, subrayado, tachado o alineación de texto, también
puedes usar estas otras.

Para darle color al texto utilizaremos código hexadecimal y para ello


podemos crear nuestro color utilizando la paleta de Adobe y
copiando el código HEX, pondremos delante almohadilla y después
los 6 números (h ps://color.adobe.com/es/create/color-wheel/
(h ps://color.adobe.com/es/create/color-wheel/) )

Ejemplo para texto negro:

p {color: #000000;

Propiedades para las fuentes utilizando font:

font-family: cuando queremos asignar una tipografía. Podemos


poner tipografías genéricas o una específica. Para las genéricas, se
utiliza Serif, Sans-serif o Monospace. Para las específicas se suele
poner el nombre entre comillas rectas, como podría ser ‘Montserrat’.

Ejemplo para Times New Roman y Georgia:

p {font-family: Serif;

Ejemplo para Arial y Verdana:

p {font-family: Sans-serif;

Ejemplo para Courier New y Lucida Console:

p {font-family: Monospace;

font-size: tamaño de la fuente, lo asignaremos en píxeles (px),


aunque también se puede asignar en em. El em es una medida para
los navegadores, que equivale al tamaño estándar de la fuente,
1m=16px. Pero para hacerlo más fácil por ahora usaremos los píxeles.

p {font-size: 20px;

font-style: el estilo de la fuente. Puede ser normal, italic u oblique,


pero esta última es menos soportada.

Ejemplo de cursiva:
20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A

p {font-style: italic;

font-weight: grosor de la fuente. Puede ser normal, bold, bolder,


lighter o ir entre el 100 y el 900 de 100 en 100.

Ejemplos:

p {font-weight: 400;

p {font-weight: bold;

font-variant: variantes de la fuente, puede ser normal o small-caps


(versalitas).

p {font-variant: small-caps;

Así quedaría el código completo para indicar cómo queremos un


texto como el siguiente:

p {font-family: Serif;

font-size: 50px;

font-style: italic;

font-weight: 900;

font-variant: small-caps;

color: #FF530D;

Si queremos que solo una parte de nuestro texto tenga estas


propiedades, entonces tendremos que utilizar la etiqueta span en la
vista de código de nuestro archivo xhtml y después reflejar la clase
asignada en la hoja de estilos.

Ejemplo en la vista de código del archivo xhtml:

<span class=”final”>Fin</span>

Las clases llevan un punto delante de la palabra asignada como el


identificador de la clase. Si el texto es párrafo después irá la p, si es un
título irá la h correspondiente.

Ejemplo en la hoja de estilos:


20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A

.final p {font-size: 100px;

color: #242424;

font-weight: bolder;

Algo importante si no queremos ir párrafo por párrafo asignando la


sangría de la primera línea en todo el cuerpo de nuestro escrito, es
utilizar text-indent. En este caso sí utilizaremos la medida em para
definir el tamaño de la sangría en la primera línea.

Ejemplo:

body p {text-align: justify;

text-indent: 1.7em;

También podemos controlar el interlineado utilizando line-height. Se


puede definir con número, longitud o porcentaje.

Ejemplo con número:

body p {line-height: 1.2;

Ejemplo con longitud:

body p {line-height: 25px;

Ejemplo con porcentaje:

body p {line-height: 80%;

Si se quiere asignar una tipografía propia que tengamos descargada


en nuestro ordenador, lo primero que hay que hacer es ir a la carpeta
Fonts, botón derecho y “Añadir archivos existentes…”. Después en la
hoja de estilos pondremos las diferentes formas de los archivos que
hayamos importado.

Para la tipografía Century Gothic quedarían así:


20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A

@font-face {

font-family: ‘Century Gothic’;

font-style:normal;

font-weight:normal;

src : url(“../Fonts/GOTHIC.TTF”);

@font-face {

font-family: ‘Century Gothic’;

font-style:normal;

font-weight:bold;

src : url(“../Fonts/GOTHICB.TTF”);

@font-face {

font-family: ‘Century Gothic’;

font-style:italic;

font-weight:bold;

src : url(“../Fonts/GOTHICBI.TTF”);

@font-face {

font-family: ‘Century Gothic’;

font-style:oblique;

font-weight:bold;

src : url(“../Fonts/GOTHICBI.TTF”);

@font-face {

font-family: ‘Century Gothic’;

font-style:italic;

font-weight:normal;

src : url(“../Fonts/GOTHICI.TTF”);
20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A

@font-face {

font-family: ‘Century Gothic’;

font-style:oblique;

font-weight:normal;

src : url(“../Fonts/GOTHICI.TTF”);

Hay muchísimas más opciones a la hora de dar estilos y puedes


adornarlo todo lo que desees.

Si quieres saber más, esta web es la más completa que hay sobre CSS
h ps://www.w3schools.com/css/default.asp
(h ps://www.w3schools.com/css/default.asp)

Los estilos que más podrías utilizar son estos:

Colores: h ps://www.w3schools.com/css/css_colors.asp
(h ps://www.w3schools.com/css/css_colors.asp)
Bordes: h ps://www.w3schools.com/css/css_border.asp
(h ps://www.w3schools.com/css/css_border.asp)
Texto: h ps://www.w3schools.com/css/css_text.asp
(h ps://www.w3schools.com/css/css_text.asp)
Fuentes: h ps://www.w3schools.com/css/css_font.asp
(h ps://www.w3schools.com/css/css_font.asp)
Listas: h ps://www.w3schools.com/css/css_list.asp
(h ps://www.w3schools.com/css/css_list.asp)
Tipografías propias:
h ps://www.w3schools.com/css/css3_fonts.asp
(h ps://www.w3schools.com/css/css3_fonts.asp)
Sangría: h ps://www.w3schools.com/cssref/pr_text_text-
indent.asp (h ps://www.w3schools.com/cssref/pr_text_text-
indent.asp)
Interlineado: h ps://www.w3schools.com/cssref/pr_dim_line-
height.asp (h ps://www.w3schools.com/cssref/pr_dim_line-
height.asp)

Y aquí otro tutorial que puede resultarnos útil:

HTML y CSS básico para hacer epub2 con Sigil


(h ps://dieguintosh.gitbooks.io/html-y-css-basico-para-hacer-
epub2-con-sigil-/index.html)
20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A

Muchísimas gracias, Laura, por el tutorial. Si queréis conocerla mejor,


os dejo su blog de escritora (h ps://aijin869.wordpress.com/) y su
Twi er (h ps://twi er.com/aijin869).

Anuncios

REPORT THIS AD

Un comentario en “Estilos CSS


para Sigil「Tutorial」”

1. Laura Herranz Hernández (@aijin869)


Un placer colaborar contigo ^_^

11 SEPTIEMBRE, 2018 A LAS 17:05 RESPONDER

This site uses Akismet to reduce spam. Learn how your comment
data is processed.