Учимся на чужом опытеи делимся своим

Чтобы понять связь между CSS и окончательным результатом, нет ничего лучше метода проб и ошибок. Дизайнерам прежде всего нужно понять, как "прирожденная веб-технология" CSS применяется к книге – медиа, живущей на страницах. Эта парадигма кажется простой, но все же требует небольшой перестройки представления дизайнеров о том, как создаются книги. И чтобы поменять представление дизайнеры должны испытать лично весь процесс и делать это до тех пор, пока не добьются успеха. После этого все станет гораздо проще.

Возможно, лучший способ начать – взять существующую книгу и взглянуть на уже готовые CSS, затем изменить их и посмотреть на результат. Создание PDF занимает от полуминуты до нескольких минут, поэтому довольно быстро уже можно увидеть, как CSS меняет шаблон книги. Для проведения экспериментов пройдите сюда:

http://collaborative-futures.org/

В конце страницы вы найдете ссылку на CSS, используемую для печатной версии второго издания этой книги – это та же самая книга, над которой вы работаете. Вы можете видеть, как CSS показывает:

/* Main CSS File: */
@import url("http://collaborative-futures.org/material/styles.css");

/* Uncomment based on the book size you export: */

/* A5 */
/* @import url("http://collaborative-futures.org/material/size/a5-hacks.css"); */

/* 5.5"x8.5" */
/* @import url("http://collaborative-futures.org/material/size/5.5x8.5-hacks.css");*/

This is CSS syntax that imports the ‘real’ CSS used which can be found here:

http://collaborative-futures.org/material/styles.css

Скопируйте CSS, измените и введите в текстовое поле CSS Booktype, затем снова попробуйте экспортировать книгу. Экспериментіруйте с изменением CSS и проверяйте результат.

Далее следуют примеры, которыми вы, возможно, захотите воспользоваться. 

List Example

ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:grey;  }
ol li p { padding:8px; font-style:normal; color:black; border-left: 1px solid #999; }
ol li p em { display:block; }

Definition List Example

dl {
    overflow: hidden;
    padding: 0;
}
dl dt {
    clear: both;
    float: left;
    padding-right: 10px;
    width: 160px;
}
dl dd {
    margin-left: 170px;
    padding-left: 20px;
}

dl dt {
    padding-bottom: 5px;
    padding-top: 5px;
    position: relative;
    text-transform: uppercase;
}
dl dd {
    border-color: #DDDDDD;
    border-style: solid;
    border-width: 0 0 0 1px;
    padding-bottom: 5px;
    padding-top: 5px;
}
dl dt:before {
    border-top: 1px solid #DDDDDD;
    content: "";
    position: absolute;
    right: -15px;
    top: 0;
    width: 30px;
}
dl dt:after {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 6px 6px 6px 6px;
    content: "";
    height: 5px;
    position: absolute;
    right: -3px;
    top: -3px;
    width: 5px;
}
dl dt:first-child:before, dl.definition dt:first-child:after {
    display: none;
}

Table Examples

First example:

table
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
table th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #b9c9fe;
	border-top: 4px solid #aabcfe;
	border-bottom: 1px solid #fff;
	color: #039;
}
table td
{
	padding: 8px;
	background: #e8edff;
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid transparent;
}
table tr:hover td
{
	background: #d0dafd;
	color: #339;
} 

Second example:

 table
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	background: #fff;
	margin: 45px;
	width: 480px;
	border-collapse: collapse;
	text-align: left;
}
table th
{
	font-size: 14px;
	font-weight: normal;
	color: #039;
	padding: 10px 8px;
	border-bottom: 2px solid #6678b1;
}
table td
{
	color: #669;
	padding: 9px 8px 0px 8px;
}
table tbody tr:hover td
{
	color: #009;
}

Image Example 

 IMG {  -webkit-border-radius: 5px; border-radius: 5px; }