Los CSS se pueden implementar en:
a) instrucción en tag html (
ALTAMENTE NO RECOMENDADO POR KOBO)
Código HTML:
<p style="font-weight: bold;text-size: xx-large;">No lo uses en los documentos que vayas a leer en tu Kobo.</p>
b) cabecera de archivo html (
No recomendado por Kobo)
Código HTML:
<head>
...
<style type="text/css" title="override_css">
@page {
padding: 0;
margin: 0;
}
body {
orphans: 0;
widows: 0;
text-align: justify;
padding-top: 0.2em;
text-indent: 1.5em;
}
.kobito {font-weight: bold;text-size: xx-large;}
</style>
</head>
<body>
<p class="kobito">Este formato NO está recomiendado por Kobo.</p>
Mirar:
https://gist.github.com/JayPanoz/b9c54ec28935de81f068
c) archivo css referenciado dentro de un html del libro (en la sección estilos dentro de un ePub)
En la cabecera del html tendremos una referencia al archivo donde se encuentra la clase que queremos usar:
Código HTML:
<head>
...
<link href="../stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
En el archivo stylesheet.css está la descripción de la clase a utilizar:
Código HTML:
.kobito {font-weight: bold;text-size: xx-large;}
y en el archivo html la intrucción para usar la clase:
Código HTML:
<p class="kobito">Este formato es el que recomienda Kobo.</p>
d) archivo del propietario (adobe,apple,etc.) dentro del ePub
Adobe usa un archivo
XPGT (p.ej. page-template.xpgt)
Apple lo denomina com.apple.ibooks.display-options.xml
e) programa lector de documentos (o en un archivo del mismo)
En el caso de Kobo, se encuentran repartidos en los programas y librerías que usa.
Principalmente nickel y libnickel además de poder leer archivos externos como kobo_extra.css.
f) además, los programas (e) suelen usar un motor/interprete (p.ej. el
RMSDK de Adobe)
En el caso de Kobo, nickel usa uno para KePub y otro diferente para ePub (de aquí las discrepancias entre la presentación de un KePub y su correspondiente ePub).
Están ordenados jerárquicamente y secuencialmente (en teoría) :-"
Hay que tener en cuenta que al añadir
!important al final de una propiedad se está dando preferencia sobre aquellos que no la tienen. Es decir, si la altura de una imagen está definida en varios sitios pero en uno de ellos se encuentra !important la de este tendrá preponderancia.
Código HTML:
div.figure img {
width: 100% !important;
height: auto !important;
}