Skip to content
Start free
Get App

HTML,CSS для начинающих - Полный курс (2025). Урок №6:CSS: Стили для текста.Подключение шрифта

Урок 6 курса HTML/CSS: подключение шрифтов из Google Fonts через Фигму, задание шрифта по умолчанию и стилизация текста в CSS (классы, межстрочный интервал, тени, перенос).

Key Takeaways

  • Шрифт по умолчанию задаётся через font-family у body, с запасными вариантами
  • Классы в CSS обращаются через точку, в HTML задаются атрибутом class
  • Базовая стилизация текста требует около 10 основных свойств CSS
  • Плагины Фигмы помогают точно перенести типографику из макета в код

What the video covers

  • Открытие макета в Фигме и установка плагинов Fontface и Inspect Styles для анализа шрифтов
  • Определение используемых семейств и начертаний шрифтов Inter и Montserrat на странице
  • Подключение шрифтов из Google Fonts через тег link в head HTML-файла
  • Удаление ненужных параметров оптимизации и курсивных начертаний из ссылки
  • Создание файла styles.css и задание шрифта по умолчанию через свойство font-family для body
  • Использование запасных шрифтов sans-serif и serif как хорошая практика
  • Подключение внешнего CSS-файла через тег link
  • Извлечение стилей из макета Фигмы с помощью плагина Inspect Styles
  • Обращение к элементам по классу через атрибут class и точку в CSS
  • Разбор свойств текста: font-weight, font-size, color, line-height, letter-spacing

Chapters

  1. 00:00Введение и подготовка макета в Фигме
  2. 00:33Анализ шрифтов с помощью плагинов Фигмы
  3. 01:00Подключение шрифтов из Google Fonts
  4. 01:50Установка шрифта по умолчанию в CSS
  5. 02:46Извлечение стилей из макета через Inspect Styles
  6. 03:20Стилизация по классам: логотип и текст
  7. 04:25Межстрочный и межбуквенный интервал, трансформация текста
  8. 05:05Декорации, выравнивание, тень и перенос текста
  9. 05:55Итоги урока

Answers

Questions about this video

Как подключить шрифт из Google Fonts к HTML-странице?

Нужно скопировать код подключения из Google Fonts и вставить его внутрь тега head в HTML-файле. Лишние строки оптимизации можно убрать, оставив только ссылку на нужные начертания.

Как задать шрифт по умолчанию для всей страницы?

В файле стилей нужно прописать свойство font-family для селектора body и указать основной шрифт, например Inter, а после него запасные шрифты sans-serif или serif.

Как обратиться к элементу в CSS по классу?

В HTML элементу добавляют атрибут class с именем, а в CSS пишут точку, имя класса и фигурные скобки со стилями, например .logo { font-weight: 700; }.

Full Transcript — Download SRT & Markdown

00:00
Speaker A
Привет. Сегодня научимся подключать шрифты и писать собственные CSS-стили. Готов? Давай начинать. Начнём с подключения шрифта. Но чтобы не подключать рандомные шрифты, я подготовил макет в Фигме. Для того, чтобы его открыть, переходим на сайт fma.com, кликаем импорт, выбираем наш
00:16
Speaker A
макет, загружаем его и открываем. Так выглядит интерфейс Фигмы. С левой стороны можно просмотреть все элементы макета. Кликаем на значок Фигмы, основное меню. Переходим в раздел Plugins. Manage plugins. Нам понадобятся дополнительные плагины. которые упростят нам работу с Фигмо. Первый из них - это
00:33
Speaker A
Фонтфейсе. Устанавливаем и запускаем. Этот плагин показывает, какое семейство шрифта в каком начертании и сколько раз встречается на странице. Вот мы видим, что у нас есть, regular, inter 7ibolt.
00:45
Speaker A
Но семиboltт встречается только один раз, а, regular - это основной основной шрифт на странице. Он встречается 29 раз. И Монсрат в трёх начертаниях, но нам говорит о том, что нам нужно установить два семейства шрифта. Для этого переходим на сайт Google Fonts и в
01:00
Speaker A
поиске вводим Enter. Кликаем Get Font. Также нам понадобится ещё Monserrat. Также G font. Вот мы видим у нас в корзине два шрифта: Enter и Monserrat.
01:09
Speaker A
Кликаем на getembд. Подключаем через HTML. Просто копируем код. В нашем проекте внутри head. Вставляем скопированный код. Вот эти две строчки, они нужны для оптимизации загрузки шрифтов. Нам это не понадобится. Мы подключаем семейство шрифта. И какая жирность у него будет? Давайте ещё раз
01:27
Speaker A
проверим. Так, Google F нам больше не нужен. Фигми у нас regular - это 400 и 7Б 600. До амперсанта мы это убираем.
01:34
Speaker A
Regular 400, 7Б 600. И дальше идёт Family Monat. Курсив нам не нужен. Там у нас медиум - это 500, 700, extra 800, жирность 500, 700 и 800. Display SWB - это тоже оптимизация. Понятно, что сейчас никакой шрифт не применён. Мы его
01:50
Speaker A
подключили к HTML-файлу, но никак его не используем. Переходим в папку CSS. Создаём новый файл. называем его styles CSS и внутри него пишем body и говорим ему font family. И вот здесь мы должны установить шрифт по умолчанию, то есть
02:04
Speaker A
шрифт, который используется самое большое количество раз в нашем макете. У нас это interгуular 29 рене. Теперь после того, как мы указали шрифт по умолчанию, хорошей практикой является указать несколько шрифтов, потому что если произойдёт какая-то проблема с загрузкой шрифта, сработает запасной
02:21
Speaker A
шрифт. Установим вот такую историю. Sнсериif - это семейство шрифтов без засечек. Просто шриф - это шрифт с засечками. Шрифт с засечками чаще всего используется в книгах. Всё, мы установили шрифт по умолчанию, но чтобы он начал работать, нам нужно наш новый
02:36
Speaker A
файл стилей подключить к CSS. После рези CSS прописываем style CSS. Теперь можем перейти в браузер и видеть, что наш шрифт на странице изменился. Всё отлично, подключенный шрифт работает.
02:46
Speaker A
Можем переходить к стилизации текста. Переходим в макет. Если нравится контент, поставь лайк и напиши комментарий. Мне будет приятно, и видео на канале будут выходить чаще. Нфейсию можно закрыть. Теперь для того, чтобы вытаскивать из фигмы стили, заходим снова в Plugins, Manage Plugins и
03:02
Speaker A
устанавливаем ещё один пакет, который называется Inspect Styles. Он тоже нам показывает, какой шрифт используется, какое количество раз на странице. Также предлагает использовать переменные. Теперь, когда мы кликаем на нужный нам элемент, мы видим его CSS-стиля, размер шрифта, жирность, какой цвет и так далее. Так
03:20
Speaker A
как у нас структура того, что мы делали сейчас не совпадает со структурой макета во многих местах, а урок посвящён именно стилизации текста. Я предлагаю нашей текущей структуре потренироваться, поработать со свойствами для стилизации текста, а в следующем уроке уже
03:35
Speaker A
скорректируем структуру, перетащим контент и начнём знакомиться со стилизацией блоков. Итак, для того, чтобы начать писать собственные стили, в прошлый раз мы обращались по имени тега.
03:46
Speaker A
Теперь мы научимся обращаться по имени класса. Внутри открывающего тега. А пишем атрибут класс и его имя. Так как у нас это логотип, сохраняем HTML, переходим в CSS. Обращение к классам в CSS происходит через точку. После точки ставим имя класса, фигурные скобки и
04:01
Speaker A
внутри вот эти стили для нашего логотипа. Fontway 700, Fontway отвечает за жирность текста, Font size отвечает за размер текста, колор отвечает за цвет текста. Переходим в браузер. Видим, все стили применились. А вот у нас много текста внутри отзывов. Давайте с ними
04:15
Speaker A
поработаем. Для этого здесь оставим только BR и спан. Теперь для параграфа зададим класс. Заздаём класс текст. CSS всё то же самое. F weight f size и color мы уже разобрали. Давайте не будем повторяться. И здесь мы разберём другое
04:29
Speaker A
свойство. Это межспрочный интервал. Допустим, зададим его, поставим 40, чтобы нагляднее было. Вот. То есть line height - это межсрочный интервал. Letter spacing. Letter spacing - это межбуквенное расстояние. То есть между каждой буквой будет 20 пикселей. Также мы можем использовать текст transт
04:45
Speaker A
transform с такими значениями, как uppercйe. И в этом случае все буквы внутри абзаца будут в верхнем регистре.
04:50
Speaker A
Lower case, то наоборот, все буквы будут в нижнем регистре, то есть все маленькие. Text decoration, оно отвечает за нижнее подчёркивание. Мы его убирали по умолчанию у ссылок. Также можно поставить верхнее подчёркивание или зачёркнутый текст. Текст lйн. Текст line
05:05
Speaker A
нужен для позиционирования текста внутри блока. Если у нас в теге P мало текста, а тег P, мы помним, что он блочный, он занимает всю ширину родителя, и мы ему говорим right и ставим его вправо. Можем поставить по центру текст Shad. Тек
05:18
Speaker A
shadow - это тень текста. В качестве значения мы должны указать смещение по вертикали, смещение по горизонтали и цвет тени. И также уровень размытия два пикселя. Теперь вот отчётливо виден эффект тени. А текст врап. Оно отвечает за перенос текста. по умолчанию wра.
05:34
Speaker A
Когда тексту не хватает места внутри блока, он переносится на следующую строку. Можем установить Noраp. Теперь текст будет уходить за границы экрана и ломать нам вёрстку. Если мы сюда копируем эти же стили, увидим, что всего 10 свойств нужно выучить, чтобы как
05:48
Speaker A
угодно стилизовать текст. Теперь ты умеешь стилизовать текст. В следующем видео мы сделаем структуру, как в макете, и научимся стилизовать блоки.
05:55
Speaker A
Подписывайся на канал, ставь лайк. Увидимся в следующем видео.
Topics:CSSHTMLшрифтыGoogle FontsFigmaстилизация текстаfont-familyline-heightверсткадля начинающих

Get More with the SozAI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries and speaker detection. 30 minutes free.

App Store Google Play
Or transcribe another YouTube video here →

Free tools: TXT to SRT · SRT Validator · Merge SRT · Subtitle to Text · All tools

More from Александр Молодов | Web Frontend

View All
HTML, CSS для начинающих. Урок №5: CSS: Введение. Обнуляющие стили — Transcript6:34
HTML, CSS для начинающих. Урок №5: CSS: Введение. Обнуляющие стили — Transcript
1,149 1 Russian
HTML для начинающих – Полный курс (2025). Урок №4: Формы — Transcript10:38
HTML для начинающих – Полный курс (2025). Урок №4: Формы — Transcript
1,791 1 Russian
HTML для начинающих – Полный курс (2025). Урок №3: Структурные теги — Transcript8:50
HTML для начинающих – Полный курс (2025). Урок №3: Структурные теги — Transcript
1,534 1 Russian
HTML для начинающих – Полный курс (2025). Урок №2:Теги для контента — Transcript6:06
HTML для начинающих – Полный курс (2025). Урок №2:Теги для контента — Transcript
1,086 1 Russian
HTML для начинающих – Полный курс (2025). Урок №1: Введение — Transcript7:52
HTML для начинающих – Полный курс (2025). Урок №1: Введение — Transcript
1,278 1 Russian
Я БЫЛ БЕДНЫМ — Владимир Жириновский — Transcript1:02
Я БЫЛ БЕДНЫМ — Владимир Жириновский — Transcript
182 1 Russian
Реально ли быть ЛУЧШИМ ВО ВСЕМ — Transcript7:55
Реально ли быть ЛУЧШИМ ВО ВСЕМ — Transcript
1,099 1 Russian
Медитация для сна: Расслабление и снятие напряжения — Волшебный сад — Transcript21:28
Медитация для сна: Расслабление и снятие напряжения — Волшебный сад — Transcript
693 1 Russian
Разработка с AI автоматизация и продуктивность4 2 — Transcript1:09:04
Разработка с AI автоматизация и продуктивность4 2 — Transcript
9,140 1 Russian
БЫВШИЙ МУСУЛЬМАНИН, АТЕИСТ БРОСАЕТ ВЫЗОВ ЗАКИРУ НАЙКУ – Доктор Закир Найк — Transcript12:38
БЫВШИЙ МУСУЛЬМАНИН, АТЕИСТ БРОСАЕТ ВЫЗОВ ЗАКИРУ НАЙКУ – Доктор Закир Найк — Transcript
1,713 1 Russian
Мамбеталина 2024 9 4 — Transcript14:04
Мамбеталина 2024 9 4 — Transcript
1,521 1 Russian
Мамбеталина 2024 9 3 — Transcript8:43
Мамбеталина 2024 9 3 — Transcript
993 1 Russian