Стилизация текста (html5 тема 05 - стилизация текста)
TRANSCRIPT
![Page 1: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/1.jpg)
Стилизация текстаСтажировка HTML5
Ирина Панова
![Page 2: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/2.jpg)
p { font-family: “Times New Roman”, serif ; font-size: 2rem; /* наиболее часто используемые ед. измерения - rem, em, px (устарел!) */ font-style: italic; font-weight: bold; text-transform: uppercase; }
Стилизация параграфа
![Page 3: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/3.jpg)
НЕ СТЫДНО НЕ ЗНАТЬ, СТЫДНО НЕ УЧИТЬСЯ.
Стилизация параграфа
![Page 4: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/4.jpg)
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
![Page 5: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/5.jpg)
Вариант 1h1 { font-size: 3rem; }
Вариант 2h1 { font-size: 3em; }
![Page 6: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/6.jpg)
Вариант 3html { font-size: 24px; } /* меняем базовый размер */h1 { font-size: 3rem; }
![Page 7: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/7.jpg)
Базовые шрифты поддерживаются всеми операционными системами. Например: Arial, Georgia, Tahoma, Times New Roman, Verdana и др.
В css: p { font-family: "Times New Roman", Times, serif; }
Базовые шрифты
![Page 8: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/8.jpg)
Как подключить:● Заходим на сайт www.google.com/fonts/ ● Выбираем нужный шрифт, например - Open Sans● Выбираем нужные стили шрифта (light, normal, bold italic и т.п.)
Шрифты - Google web fonts
![Page 9: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/9.jpg)
● Добавляем код в <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
![Page 10: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/10.jpg)
В папку (например, 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
![Page 11: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/11.jpg)
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
![Page 12: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/12.jpg)
● Запросить у заказчика / дизайнера● Воспользоваться webfont-генераторами, например:
FontSquirrel - http://www.fontsquirrel.com/
Everything Fonts - everythingfonts.com/font-face
и др.
Шрифты - Где найти нужные форматы?
![Page 13: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/13.jpg)
.text { color: #f1652a; /* rgb(241, 101, 42), orange */ font-variant: small-caps; /* определяет, как нужно представлять строчные буквы,
small-caps - модифицирует все строчные буквы как заглавные уменьшенного размера. */
}
ВЕК ЖИВИ — ВЕК УЧИСЬ.
Цвет и font-variant
![Page 14: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/14.jpg)
.text { letter-spacing: 2px; /* интервал между символами в пределах элемента */ line-height: 1.5; /* межстрочный интервал текста, normal, число, %, px(rem и т.д.) */ text-align: center;}В с я к о е п о л у з н а н и е х у ж е в с я
к о г о н е з н а н и я.
Д о б р о т о г о у ч и т ь, к т о с л у ш а е т.
Межбуквенный интервал, высота строки,горизонтальное выравнивание
![Page 15: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/15.jpg)
Перенос длинных слов
p { word-break: break-all ; }
p { word-wrap: break-word; }
![Page 16: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/16.jpg)
Перенос длинных слов
![Page 17: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/17.jpg)
Перенос длинных слов
![Page 18: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/18.jpg)
text-overflow позволяет ограничивать длину текста в случае, если он не умещается в контейнер, визуально обрезая его или отображая многоточием.
p { text-overflow: clip; overflow: hidden; white-space: nowrap;}
p { text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
Обрезка текста
![Page 19: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/19.jpg)
<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"; }
Стилизация кавычек
![Page 20: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/20.jpg)
.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>
Вертикальное выравнивание
![Page 21: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/21.jpg)
.number__index { vertical-align: super; font-size: 0.7em;}
<span class="number"> 2<span class="number__index">8</span></span>
Вертикальное выравнивание
![Page 22: Стилизация текста (HTML5 тема 05 - стилизация текста)](https://reader035.vdocuments.net/reader035/viewer/2022081505/5881d3c81a28ab331a8b5dc5/html5/thumbnails/22.jpg)
Полезные ссылки
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