Каскадные таблицы стилей CSS (Cascading Style Sheets) – первый стандарт стилей, объявленный консорциумом W3C. W3C (World Wide Web Consortium) – Консорциум Всемирной паутины – организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. Консорциум возглавляет сэр Тимоти Джон Бернерс-Ли, автор множества разработок в области информационных технологий. Дата основания: Октябрь 1994 г.
CSS – это язык, содержащий набор свойств для определения внешнего вида документа.
Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.
Каскадные таблицы стилей (Cascading Style Sheets, CSS) позволяют хранить цвет, размеры текста и другие параметры в стилях. Стилем называется набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид.
Использование таблицы стилей в электронной книге ePub позволяет на всех страницах легко управлять внешним видом текста.
На начальном этапе этой минимальной информации должно быть достаточно. Больше информации можно получить на сайте
Или же воспользуйтесь поиском (информации много и на русском языке).
Чтобы таблица стилей в книге "работала" – на каждой отдельной страничке книги должна быть ссылка на файл CSS. В папку Styles по нажатию правой кнопки добавьте заранее подготовленную таблицу стилей. Чтобы подключить таблицу CSS к конкретному файлу xhtml, его надо выделить и выбрать опцию Link Stylesheets...
Большинство специалистов по форматированию книг рекомендуют не стремиться к очень сложным изыскам. На начальном этапе лучше стремиться к простоте и проверенным приёмам форматирования книги, которые будут работать на большинстве устройств чтения. Подключение таблицы CSS позволяет встроить кириллические шрифты в книгу, описать внешний вид иллюстраций и точный вид форматирования текста.
Ниже приведен скриншот – в редакторе Sigil режим просмотра кода страницы.
Ссылка на таблицу стилей располагается вверху каждой страницы внутри блока <head>.
Пример таблицы стилей, которую использую я при издании книг (это вовсе не секрет).
В верхней части между косым слэшем и звёздочками /*….*/ приводится несущественная информация, которая не влияет на отображение текста страницы (Вы можете спокойно выбросить этот текст).
Приведенный ниже файл CSS прошел валидацию успешно.
Вы можете скачать таблицу стилей вот по этой ссылке, это легально, вы ничего не нарушаете). (загрузок 102, просмотров 828) UPD: файл теперь перезалит в облако на mail.ru, т.к. на сайте box.com с лета 2015 проблемы со скачиванием файлов.
Даже если вы не считаете себя специалистом в программировании – опасаться нечего. Я тоже изучал таблицу CSS отдельными фрагментами, постепенно. И уровень подготовки в этой области был минимальный. Это очень мощное средство управление внешним видом форматирования. В книге может быть 1 или несколько таблиц стилей. (Это удобно, когда необходимо какой-то раздел книги оформить особым образом. Злоупотреблять не стоит, но попробовать можно.)
Как создаётся таблица стилей? Скачивается программа Notepad++ (ссылкапоследнюю версию найдите в разделе download ). Это программа для OS Windows, для Mac поищите другую программу самостоятельно.
В этом редакторе можно сохранить введенный текст как таблицу CSS
(Сохранить как...). Сразу необходимо запомнить, что в CSS значима каждая фигурная скобка, каждая точка с запятой. (NB!)
Что описывается внутри? На примере заголовка первого уровня (h1)
h1
{
text-align: center; ........ заголовок выравнивается по центру
page-break-after: avoid; ...... запрет на разрыв страницы после заголовка
page-break-inside: avoid; ..... запрет на разрыв страницы внутри заголовка
font-weight: normal; ..... тип шрифта – обычный
font-size: 1.56em; ...... размер шрифта по сравнению с основным текстом (в данном случае 156%)
line-height: 1.2em;
margin: 0;
padding: 0;
color: #000080; /*navy*/.... цвет шрифта, в данном примере цвет navy
} ...... закрывающая фигурная скобка
При просмотре кода страницы заголовок будет выглядеть так:
<h1>Заголовок</h1>, а читатель увидит заголовок синего цвета, с выравниванием по центру страницы.
Заголовок
При форматировании книги стихов, для названий отдельных стихотворений я предпочитаю использовать заголовок 2 уровня h2 со следующими параметрами:
h2
{
text-align: left; /*выравнивание по левому краю*/
text-indent:2em; /* отступив 2em */
page-break-after: avoid;
page-break-inside: avoid;
font-weight: normal;
font-size: 1.40em;
color: #000080;
}
Логика простая: текст стихотворения выравнивается по левому краю и при не слишком длинной строке заголовок по центру страницы выглядит немного диссонансом, потому h2 я тоже выравниваю по левому краю, с небольшим отступом (вправо). С параметром font-size надо быть очень осторожным, т.к. слишком большие значения могут приводить к появлению гигантских заголовков на страничке при даже небольшом увеличении шрифта основного текста. Если заголовок слишком длинный, допустимо внутри использовать тег <br/> для принудительной разбивки заголовка на две строчки. Если в свойствах h1 записано выравнивание по центру, то обе строчки будут выглядеть вполне эстетично.
<h1>Tree Man In A Boat<br/>
(To Say Nothing of the Dog)</h1>
Сохраню здесь полезную ссылку на таблицу цветов CSS Color Names. Там возможно посмотреть много полезной информации.
Тут мне необходимо сказать про форматирование отступов в параграфах, которое следует прописать в таблице CSS. При подготовке книг с прозой рекомендуют в характеристиках свойств параграфа указывать отступ 1em или 1.2em, 1.6em, 2em, например:
p.ind
{
text-indent: 1em;
margin-top: 0;
margin-bottom: 0.2em;
text-align: justify;
}
Между абзацами пустые строки не рекомендуются.
Параграф без отступов (text-indent: 0;) рекомендован для форматирования поэзии, non-fiction books (документалистика, очерки, научные работы, эссе, биографии, воспоминания, техническая документация, руководства и др.).
тогда гиперссылки внутренние и на ресурсы в сети будут синего цвета и без подчёркивания. Подчёркивание ссылки описано: "при наведении курсора" - a:hover . Имхо, так чуть эстетичнее вид внутри книги, особенно если вы решили сделать кликабельное содержание. Да, ещё мне кажется более логичным размещать страницу Содержание (HTML-toc) в начале книги.
В последней на данный момент версии редактора Sigil (и уже начиная с версии 0.6.0) есть очень приятное нововведение: теперь не надо вручную вставлять ссылку на CSS в редакторе кода. В левом окне выделяется группа файлов, удерживая Shift. Далее правой кнопкой выбрать Link Stylesheets... (добавить ссылки на таблицу(ы) стилей)
Все ли проблемы решаются таким способом? Увы, нет. iBooks (программа чтения на устройствах Apple) не следует спецификациям CSS. Однако, Firefox, Safari и Adobe Digital Editions (ADE), и все ридеры на основе АDE (Sony Reader и Barnes & Noble Nook) работают с CSS.
В книге формата ePub может быть использовано несколько таблиц CSS, например, для основной части книги – основная таблица, для страницы с html-содержанием – другая и т.д.
Каждую таблицу стилей рекомендуется проверить валидатором, например здесь:
Имеет смысл сказать, что по данной теме информация очень скудная, есть только отрывочные данные. Фактически в fb2 мощные возможности CSS не используются, а единичные энтузиасты проявляют высший пилотаж, когда обращают на это внимание.
Добрый день! Не могли бы подсказать как лучше поступить в следующей ситуации: не все ридеры видят стили, вынесенный в отдельном файле. Приходится прописывать их дополнительно между <head> и </head> в каждой странице, дабы у любого читателя отображались желаемые стили. Это нормально, или есть какой-то момент, позволяющий избежать подобной ситуации, и добиться результата только отдельным(и) файлами .css? Заранее признателен за ответ!
Ваш вариант решения проблемы допускается, но нежелателен. Имхо, подстраиваться под особенности какого-то отдельного ридера не очень целесообразно, "железо" достаточно быстро устаревает, появляются более современные модели.
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.
0
