Стилизация текста (HTML5 тема 05 - стилизация текста)

Стилизация текста
Стажировка HTML5
Ирина Панова

p {
font-family: “Times New Roman”, serif ;
font-size: 2rem; /* наиболее часто используемые ед. измерения - rem, em, px (устарел!) */
font-style: italic;
font-weight: bold;
text-transform: uppercase;
}
Стилизация параграфа

НЕ СТЫДНО НЕ ЗНАТЬ, СТЫДНО
НЕ УЧИТЬСЯ.
Стилизация параграфа

CSS
html { font-size: 16px; }
article { font-size: 2rem; text-align: center; }
h1 { margin: 0.5rem; }
HTML
<article>
<h1>Title</h1>
<p>Text </p>
</article>
Единицы измерения - em, rem

Вариант 1
h1 { font-size: 3rem; }
Вариант 2
h1 { font-size: 3em; }

Вариант 3
html { font-size: 24px; } /* меняем базовый размер */
h1 { font-size: 3rem; }

Базовые шрифты поддерживаются всеми операционными системами.
Например: Arial, Georgia, Tahoma, Times New Roman, Verdana и др.
В css:
p { font-family: "Times New Roman", Times, serif; }
Базовые шрифты

Как подключить:
● Заходим на сайт www.google.com/fonts/
● Выбираем нужный шрифт, например - Open Sans
● Выбираем нужные стили шрифта (light, normal, bold italic и т.п.)
Шрифты - Google web fonts

● Добавляем код в <head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic'
rel='stylesheet'>
● Добавляем CSS:
h1 { font-family: 'Open Sans', sans-serif; }
Шрифты - Google web fonts

В папку (например, fonts) добавляем шрифты форматов: eot, ttf, woff, svg
CSS: @font-face {
font-family: 'OpenSans';
src: url("../fonts/OpenSans-Bold.eot");
src: url("../fonts/OpenSans-Bold.eot?#iefix") format('embedded-opentype'),
url("../fonts/OpenSans-Bold.woff") format('woff'),
url("../fonts/OpenSans-Bold.ttf") format('truetype'),
url("../fonts/OpenSans-Bold.svg#OpenSans Bold") format('svg');
font-weight: 700;
font-style: normal;
}
Шрифты - Подключение через @font-face

CSS: @font-face {
font-family: 'OpenSans';
src: url("../fonts/OpenSans-Regular.eot");
src: url("../fonts/OpenSans-Regular.eot?#iefix") format('embedded-opentype'),
url("../fonts/OpenSans-Regular.woff") format('woff'),
url("../fonts/OpenSans-Regular.ttf") format('truetype'),
url("../fonts/OpenSans-Regular.svg#OpenSans Regular") format('svg');
font-weight: 400;
font-style: normal;
}
p { font-family: 'Open Sans', sans-serif; font-weight: 400; }
h1 { font-family: 'Open Sans', sans-serif; font-weight: 700; }
Шрифты - Подключение через @font-face

● Запросить у заказчика / дизайнера
● Воспользоваться webfont-генераторами, например:
FontSquirrel - http://www.fontsquirrel.com/
Everything Fonts - everythingfonts.com/font-face
и др.
Шрифты - Где найти нужные форматы?

.text {
color: #f1652a; /* rgb(241, 101, 42), orange */
font-variant: small-caps; /* определяет, как нужно представлять строчные буквы,
small-caps - модифицирует все строчные буквы как
заглавные уменьшенного размера. */
}
ВЕК ЖИВИ — ВЕК УЧИСЬ.
Цвет и font-variant

.text {
letter-spacing: 2px; /* интервал между символами в пределах элемента */
line-height: 1.5; /* межстрочный интервал текста, normal, число, %, px(rem и т.д.) */
text-align: center;
}
В с я к о е п о л у з н а н и е х у ж е в с я к о г о
н е з н а н и я.
Д о б р о т о г о у ч и т ь, к т о с л у ш а е т.
Межбуквенный интервал, высота строки,
горизонтальное выравнивание

Перенос длинных слов
p { word-break: break-all ; } p { word-wrap: break-word; }

Перенос длинных слов

text-overflow позволяет ограничивать длину текста в случае, если он не умещается
в контейнер, визуально обрезая его или отображая многоточием.
p {
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
}
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Обрезка текста

<p class="block">
Цитата на французском:
<q lang="fr" class="block__quotes">Ce que femme veut, Dieu le veut</q>.
</p>
<p class="block">
Цитата на английском:
<q lang="en" class="block__quotes">То be or not to be</q>.
</p>
.block__quotes:lang(en) {
quotes: "201C" "201D";
}
.block__quotes:lang(fr) {
quotes: "00AB" "00BB";
}
Стилизация кавычек

.block__element--top {
vertical-align: top;
}
.block__element--bottom {
vertical-align: bottom;
}
.block__element--middle {
vertical-align: middle;
}
.block__element--sub {
vertical-align: sub;
}
<div class="block">
<span class="block__element--top">top</span>
<span class="block__element--bottom">bottom</span>
<span class="block__element--middle">middle</span>
<span class="block__element--sub">sub</span>
</div>
Вертикальное выравнивание

.number__index {
vertical-align: super;
font-size: 0.7em;
}
<span class="number">
2<span class="number__index">8</span>
</span>
Вертикальное выравнивание

Полезные ссылки
Google web fonts:
www.google.com/fonts/
Webfont-генераторы:
http://www.fontsquirrel.com/
everythingfonts.com/font-face
Вертикальное выравнивание:
https://developer.mozilla.org/ru/docs/Web/CSS/vertical-align

Стилизация текста (HTML5 тема 05 - стилизация текста)

More Related Content

Viewers also liked (20)

Similar to Стилизация текста (HTML5 тема 05 - стилизация текста) (20)

More from Noveo (20)

Стилизация текста (HTML5 тема 05 - стилизация текста)