Стилизация текста (html5 тема 05 - стилизация текста)
TRANSCRIPT
Стилизация текстаСтажировка 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
Вариант 1h1 { font-size: 3rem; }
Вариант 2h1 { font-size: 3em; }
Вариант 3html { 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