Выбрать главу

Несколько тегов для начального информирования.

<p> … </p>текст внутри этого тега формирует параграф.

<div> … </div>Этот тег представляет собой пустой контейнер, которому можно задавать определённые правила, используя CSS. Тег <div class="…"> часто используется для придания определённых правил форматирования для группы параграфов.

<h1> … </h1>(и заголовки меньшего уровня h2, h3, h4) Теги, используемые для заголовков. h1 рекомендуется использовать для названия всей книги.

Существуют специальные теги для обозначения полужирного шрифта <b>или <strong>, для курсива <i>или <em>.

Для начального этапа этих нескольких сведений вполне достаточно. Я уверен, что если появится интерес, читатель воспользуется поиском и прочитает чуть больше, чем описано экспресс-методом.

____________

Каскадные таблицы стилей (Cascading Style Sheets, CSS) позволяют хранить цвет, размеры текста и другие параметры в стилях. Стилем называется набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид.

Использование таблицы стилей в электронной книге ePub позволяет на всех страницах легко управлять внешним видом текста. Больше информации можно получить на сайте

http://www.w3schools.com/css/

Или же воспользуйтесь поиском (информации достаточно и на русском языке).

Чтобы таблица стилей в книге "работала" – на каждой отдельной страничке книги должна быть ссылка на файл CSS. В папку Styles по нажатию правой кнопки добавьте заранее подготовленную таблицу стилей. Либо выделить мышкой папку Styles и нажать кнопку + (плюс) на панели программы (Ad Existing Files). Кстати, этим же способом добавляются файлы шрифтов в папку Fonts, файлы иллюстраций в папку Images.

Ниже приведен скриншот – в редакторе Sigil режим просмотра кода страницы.

Ссылка на таблицу стилей располагается вверху каждой страницы внутри блока <head>.

В последней на данный момент версии редактора Sigil (точнее, начиная с версии 0.6.0) есть очень приятное нововведение: теперь не надо вручную вставлять ссылку на CSS в редакторе кода. В левом окне выделяется группа файлов, удерживая Shift. Далее правой кнопкой выбрать Link Stylesheets…(добавить ссылки на таблицу(ы) стилей). Поставить "галочку".

Пример таблицы стилей, которую использую я при издании книг (это вовсе не секрет). В верхней части между косым слэшем и звёздочками /*….*/ приводится несущественная информация, которая не влияет на отображение текста страницы (вы можете спокойно выбросить этот текст). Там же можно записывать комментарии, которые могут вам пригодиться. Должен заметить, что в CSS значима каждая фигурная скобка, каждая точка с запятой. Как записан CSS (каждый стиль записывать в одну линию, или как представлено ниже) – не имеет принципиального значения.

================

/*[(cc) docking the mad dog, Modify if needed]*/

body

{

font-family: LiberationSerif-Regular, serif;

margin-left: 2%;

margin-right: 2%;

line-height: 120%;

text-align: left; /* Text alignment is still a matter of debate. Feel free to change to text-align: justify; */

color: #000000; /*black*/

}

h1

{

text-align: center;

page-break-after: avoid;

page-break-inside: avoid;

font-weight: normal;

font-size: 1.56em;

line-height: 1.2em;

margin: 0;

padding: 0;

color: #000080; /*navy*/

}

h2

{

    text-align: left;

    text-indent:2em;

    page-break-after: avoid;

    page-break-inside: avoid;

    font-weight: normal;

    font-size: 1.40em;

    color: #000080;

}

h3

{

text-align: left;

text-indent:2em;

page-break-after: avoid;

page-break-inside: avoid;

font-weight: normal;

font-size: 1.20em;

color: #000080;

}

h4

{

font-weight: normal;

text-align: left;

font-size: 1.22em;

padding: 1em 2em 0.25em 0;

color: #228B22;

}

h5,h6

{

font-weight: bold;

text-align: left;

font-size: 18px;

padding: 1em 2em 0.25em 0;

color: #006400;

}

p

{

text-indent: 0;

margin-top: 0;

margin-bottom: 0.2em;

text-align: justify;

}

p.author

{

    font-size: 1.5em;

    font-weight: bold;

    text-align: center;

    margin-top: 2em;

    margin-bottom: 2em;

}

p.heading

{

    font-weight: bold;

    margin-top: 1.5em;

    margin-bottom: 1em;

}

p.ind

{

text-indent: 2em;

margin-top: 0;

margin-bottom: 0.2em;

text-align: justify;

}

.title /*Use for the title on the first page*/

 {

    margin-top:1em;

    margin-bottom:1em;

    page-break-after:avoid;

    font-size: 2.5em;

    text-align: center;

    text-indent:0em;

}

.subtitle

{

    margin-top:2em;

    margin-bottom:1.5em;

    page-break-after:avoid;

    font-size: 1.46em;

    text-align: center;

    text-indent:0em;

}

div.epigraf

{

font-family: LiberationSerif-Italic, serif;

font-style: italic;

font-size: 98%;

margin: 1em 1em 2em 17%;

text-align: justify;

color: #000080; /*navy*/

}

div.cite

{

font-family: LiberationSerif-Regular, serif;

font-style: normal;

font-size: 102%;

margin: 1em 1em 2em 7%;

text-align: justify;

color: #000080;

}

div.text

{

display: block;

text-align: justify;

}

p.empty-line

{

height: 1em;

margin: 0px;

}

div.ex-1

{

color: #FF0000; /*red*/

}

.center

{

text-align: center;

}

hr.bar10

{

width:15%;

margin-left:35%;

}

hr.bar25

{

width:25%;

margin-left:10%;

}

.left-float

{

    display: block;

    float: left;

    margin-bottom: 1em;

    margin-right: 1em;

    margin-top: 1em;

    text-align: center;

}

.right-float

{

    display: block;

    float: right;

    margin-bottom: 1em;

    margin-left: 1em;

    margin-top: 1em;

    max-width: 250px;

    text-align: center;

}

.first

{

    display: block;

    margin-bottom: 0;

    margin-left: 1%;

    margin-right: 0;

    margin-top: 1em;

    padding-left: 2em;

    text-align: left;

    text-indent: -1em;

}

.poem

{

    display: block;

    margin-bottom: 0;

    margin-left: 1%;

    margin-right: 0;

    margin-top: 0;

    padding-left: 2em;

    text-align: left;

    text-indent: -2em;

}

div.coverpage

{

text-align: center;

page-break-after: always;

}

img.coverimage

{

max-width:100%;

vertical-align: text-top;

margin-bottom:.5em !important;

padding: 0;

}

.imgDiv

{

text-align:center;

width:100%;

}

.imgDiv img

{

    max-width:100%;

    margin-bottom:5px;

}

.nodisplay

{

display: none;

}

b, strong