Верхний блок над шапкой
 
+7 (495) 021-98-78

Шрифты

Категории: 
17:24 - 16.02.2018
Заголовки

h1, .h1

размер шрифта 36px

h2, .h2

размер шрифта 32px

h3, .h3

размер шрифта 28px

h4, .h4

размер шрифта 24px

h5, .h5

размер шрифта 22px

h6, .h6

размер шрифта 18px

Примеры:
<div class="h1">.h1 heading</div>
.h1 heading
<h2>h2 heading</h2>

h2 heading

<h3>h3 heading</h3>

h3 heading

<h4>h4 heading</h4>

h4 heading

<h5>h5 heading</h5>
h5 heading
<h6>h6 heading</h6>
h6 heading

Классы, управляющие семейством и шириной шрифта

.regular

устанавливает семейство шрифта Gotham Pro Regular блоку и вложенным ссылкам

.bold

устанавливает семейство шрифта Gotham Pro Bold блоку и вложенным ссылкам

.medium

устанавливает семейство шрифта Gotham Pro Medium блоку и вложенным ссылкам

.light

устанавливает семейство шрифта Gotham Pro Light блоку и вложенным ссылкам

Примеры:
<div class="regular">.regular <a href="#">link</a></div>
.regular link
<div class="bold">.bold <a href="#">link</a></div>
.bold link
<div class="medium">.medium <a href="#">link</a></div>
.medium link
<div class="light">.light <a href="#">link</a></div>
.light link

Классы, управляющие размером шрифта

.small

устанавливает размер шрифта 88%

.smaller

устанавливает размер шрифта 80%

.smallest

устанавливает размер шрифта 70%

.micro

устанавливает размер шрифта 60%

.big

устанавливает размер шрифта 130%

.bigger

устанавливает размер шрифта 170%

.biggest

устанавливает размер шрифта 200%

Примеры:
<div class="smaller">.smaller</div>
.smaller
<div class="micro">.micro</div>
.micro
<div class="big">.big</div>
.big
<div class="biggest">.biggest</div>
.biggest

Классы, управляющие горизонтальным выравниванием шрифта

.center

выравнивает текст по центру

.right

выравнивает текст по правому краю

.left

выравнивает текст по левому краю

.text-justify

выравнивает текст по ширине

Примеры:
<div class="center">.center</div>
.center
<div class="right">.right</div>
.right

Классы, управляющие дополнительным оформлением шрифта

.ucase

делает все символы текста прописными

.lcase

делает все символы текста строчными

.crossline

делает перечёркнутый текст

.description

устанавливает цвет шрифта #777 и размер, аналогичный .small (88%)

.lh20, .lh25

устанавливает высоту строки 20px и 25px соответственно

.t_white, .t_grey, .t_dark-grey, .t_black, .t_dark-black, .t_orange, .t_dark-orange, .t_blue, .t_red

устанавливает цвет шрифта блоку и вложенным ссылкам

Примеры:
<div class="t_white p10 bg_blue">.t_white .p10 .bg_blue <a href="#">link</a></div>
.t_white .p10 .bg_blue link
<div class="ucase t_grey">.ucase .t_grey <a href="#">link</a></div>
.ucase .t_grey link
<div class="t_dark-grey">.t_dark-grey <a href="#">link</a></div>
.t_dark-grey link
<div class="lcase t_black">.LCASE .t_black <a href="#">link</a></div>
.LCASE .t_black link
<div class="t_dark-black">.t_dark-black <a href="#">link</a></div>
.t_dark-black link
<div class="crossline t_orange">.crossline .t_orange <a href="#">link</a></div>
.crossline .t_orange link
<div class="t_dark-orange">.t_dark-orange <a href="#">link</a></div>
.t_dark-orange link
<div class="lh20 t_blue">.lh20 .t_blue <a href="#">link</a></div>
.lh20 .t_blue link
<div class="t_red">.t_red <a href="#">link</a></div>
.t_red link
<div class="description lh25">.description .lh25</div>
.description .lh25