Тёмный

CSS3 #10 Шрифты и текст (CSS Font & Text styles) 

webDev
Подписаться 116 тыс.
Просмотров 15 тыс.
50% 1

#YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/YauhenKavalchuk/css3
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ RU-vid: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

Опубликовано:

 

23 дек 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 26   
@malyna
@malyna 3 года назад
Спасибо за труд, отличный урок
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Пожалуйста)
@olehyefimenko6693
@olehyefimenko6693 Год назад
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
@YauhenKavalchuk
@YauhenKavalchuk Год назад
👍
@TeRatroN87
@TeRatroN87 3 года назад
Евгений, очень крутые видео получаются у тебя! Спасибо! По шрифтам в отдельном видео полезно было бы также подробнее осветить вопросы их оптимизации: про src: local, про удаление неиспользуемых символов или иных вариантах сжатия трафика, про настройку их кеширования, анализ что производительнее: скачать или использовать сервисы типа google fonts и т.д. Ещё раз спасибо за ценную информацию на канале и твой труд!
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Спасибо за отзыв
@missisipi9992
@missisipi9992 Год назад
Nice lessons man!
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Thanks
@user-xd7vj5cf9f
@user-xd7vj5cf9f 3 года назад
Спасибо
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Пожалуйста
@arman-6172
@arman-6172 Год назад
Тож интересуют эти вопросы. +вопрос подключение разных файлов под light, normal, bold, extra bold и т.д.. Вроде если не подключать файлы, то браузер сам пытается подтянуть текущий шрифт, но часто это делает криво? Нет в планах продвинутый курс сделать с набором практик?)
@xkanox904
@xkanox904 3 года назад
Недавно начал изучать JS. Хотелось бы узнать, книги вроде "изучаем js" от Фримена и Робсон, "Выразительный js", "js ниндзя" всё ещё актуальны? Или следует изучать язык сразу на каком-нибудь learn js. И спасибо за видео
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Я бы рекомендовал learn.js
@Oktan241
@Oktan241 3 года назад
Если рассматривать самый первый пример с подключением гугл шрифта, но при этом в HTML ничего не добавлять, а прописать только часть в CSS - font-family: 'Roboto', sans-serif; то шрифт тоже измениться, правда он будет не такой, как если все таки добавить link в HTML. Откуда берется этот шрифт, если у нас нет ссылки ни на внешние шрифты, ни на внутренние. из стандартных шрифтов имеющихся на компьютере? или умный браузер их еще где то находит и подгружает? и второй вопрос - вот мы выбрали опять же в гугл шрифте 3 толщины - 100, 500 и 900, и вставили их в HTML после того как мы прописали в CSS применить к body просто семейство шрифта без дополнительного указания толщины, то какая толщина будет? зачем мы выбрали вообще несколько толщин,если все равно можно для любого элемента прописать свою собственную, то есть существует ли вообще необходимость загружать именно такую ссылку в которой записано несколько вариантов толщин одного и того же шрифта. или опять же если мы загрузили несколько толщин то умный браузер применяет соответственно к заголовкам более жирные, а к параграфам более тонкие. в этом хитрость? тогда логичнее загружать сразу все варианты толщин, на все случаи жизни.... наверно.
@maximusoktavius1388
@maximusoktavius1388 Год назад
Бро не в обиду, но душнее вопросов я в жизни не видел 😮‍💨
@Amun_Ra.
@Amun_Ra. 3 года назад
А можно ещё небольшое видео об разнице между margin и padding?
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Padding отступ внутри - входит в элемент. Margin - отступ снаружи, отталкивает другие элементы на указанную величину. Как описать подробнее не знаю
@user-bp8ky1my4o
@user-bp8ky1my4o 3 года назад
Т. е. можно скачать любой шрифт и даже переобразовать его в формат ttf или woff он будет работать, так ?
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Да
@user-bp8ky1my4o
@user-bp8ky1my4o 3 года назад
Пишу форматы woff, ttf, otf, и woff2 как в примере на 6:35 все друг за другом и ничего не работает. Запускаю по одиночке всё работает кроме woff2. Ничего не меняю просто комментарием выключаю все кроме одного по очереди. Браузер Хром 89.04 64 бит. Не пойму в чём может быть дело ?
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Это шрифты для разных браузеров, а вы тестируете их только в Chrome. Поэтому и не срабатывает
@user-bp8ky1my4o
@user-bp8ky1my4o 3 года назад
@@YauhenKavalchuk Благодарю!
@user-tq4dd8mj4j
@user-tq4dd8mj4j 8 месяцев назад
Как растянуть заголовок на весь экран в длину (не размер font-size)
@YauhenKavalchuk
@YauhenKavalchuk 8 месяцев назад
То что вы описали - не возможно, только если не использовать SVG, или сделать текст картинкой
@cozafoto
@cozafoto 3 года назад
не совсем понятно зачем в @font-face дополнительно прописывать font-weight: 500; и font-style: normal; если эти данные уже изначально вшиты в шрифте, и эти свойства ни на что не влияют? Или это просто правила хорошего тона?
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Это в примере они "вшиты" в Google fonts, а на проекте вам могут просто прислать папку со шрифтами) Так что это просто был расширенный пример, что бы на практике не возникло вопросов
Далее
АНТИГЕЛИК. МАКСИМАЛКА УАЗИКА
00:40
CSS3 #22 Медиазапросы (Media queries)
8:19
АНТИГЕЛИК. МАКСИМАЛКА УАЗИКА
00:40