Данные правила действуют внутри блоков с классом content. К примеру:
<div id="content" class="content"> Заголовки, параграфы, списки и всё остальное выводятся здесь :) </div> <div id="new-custom-block" class="content"> Ещё один дополнительный контентный блок... </div>
Нижний отступ в 1em задаётся для всех элементов в одном месте:
.content p, .content ul, .content ol, .content table, blockquote, pre, .columns, .content img { margin-bottom: 1em; }
Задаются общие параметры текста для заголовков 1-4 уровня и отдельно размер текста для заголовков 2-4 уровня:
.content h1, .content h2, .content h3, .content h4 { font: 1.7em Verdana, Arial, Helvetica, sans-serif; margin-bottom: .5em; } .content h2 { font-size: 1.5em; } .content h3 { font-size: 1.3em; } .content h4 { font-size: 1.1em; font-weight: bold; }
Для цитат(blockquote) задаётся левый отступ и 2px граница слева.
Для листингов кода назначается шрифт Courier New, увеличеноое межстрочное расстояние, фоновая заливка и окантовка в полоску:
blockquote { margin-left: 10em; padding-left: 1em; border-left: 2px solid #ccc; } pre, code { font: 1.2em/1.8 "Courier New", Courier, monospace; border: 1px dashed #aaa; padding: 1em; background: #eee; } code { padding: .2em .5em; }
Эти элементы довольно редко используют вне контенкстных блоков, поэтому правила задаются без привязки к классу .content.
Для упорядоченных и неупорядоченных списков задаются общие правила для отступа слева, вертикального отступа между элементами списка и увеличенного межстрочного расстояния:
.content ul, .content ol { margin-left: 3em; line-height: 1.3em; } .content ul li, .content ol li { margin-bottom: .2em; }
Для упрощенного создания ссылок с иконками был добавлен класс icon или общий класс icons для контейнера со ссылками:
.icons a, .icon { padding-left: 20px; background-repeat: no-repeat; background-position: left center; }
К примеру:
<a href="#" class="pdf-icon icon">pdf-документ</a>
Для создания ссылки с pdf-иконкой достаточно назначить картинку для класса pdf-icon:
.pdf-icon { background-image: url(pdf-icon.gif); }
Для задания свойства text-align существуют 3 вспомогательных класса:
.a-left { text-align: left; } .a-center { text-align: center; } .a-right { text-align: right; }
На тот случай, если требуется изменить выравнивание текста для элемента, а дополнительный класс создавать ни к чему.
К примеру:
<p class="a-right">Текст выровненный по правому краю.</p>
В дополнение 2 класса для задания float:
.f-left { float: left; } .f-right { float: right; }
Приведённый выше параграф с текстом сделаем плавающим:
<p class="f-right a-right">Текст выровненный по правому краю имеющий свойство float: right; </p>