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

Рет қаралды 15,461

3 жыл бұрын

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

Пікірлер: 26

@malyna 3 жыл бұрын

Спасибо за труд, отличный урок

@YauhenKavalchuk 3 жыл бұрын

Пожалуйста)

@olehyefimenko6693 Жыл бұрын

Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!

@YauhenKavalchuk Жыл бұрын

👍

@TeRatroN87 3 жыл бұрын

Евгений, очень крутые видео получаются у тебя! Спасибо! По шрифтам в отдельном видео полезно было бы также подробнее осветить вопросы их оптимизации: про src: local, про удаление неиспользуемых символов или иных вариантах сжатия трафика, про настройку их кеширования, анализ что производительнее: скачать или использовать сервисы типа google fonts и т.д. Ещё раз спасибо за ценную информацию на канале и твой труд!

@YauhenKavalchuk 3 жыл бұрын

Спасибо за отзыв

@missisipi9992 Жыл бұрын

Nice lessons man!

@YauhenKavalchuk Жыл бұрын

Thanks

@user-xd7vj5cf9f 3 жыл бұрын

Спасибо

@YauhenKavalchuk 3 жыл бұрын

Пожалуйста

@arman-6172 Жыл бұрын

Тож интересуют эти вопросы. +вопрос подключение разных файлов под light, normal, bold, extra bold и т.д.. Вроде если не подключать файлы, то браузер сам пытается подтянуть текущий шрифт, но часто это делает криво? Нет в планах продвинутый курс сделать с набором практик?)

@xkanox904 3 жыл бұрын

Недавно начал изучать JS. Хотелось бы узнать, книги вроде "изучаем js" от Фримена и Робсон, "Выразительный js", "js ниндзя" всё ещё актуальны? Или следует изучать язык сразу на каком-нибудь learn js. И спасибо за видео

@YauhenKavalchuk 3 жыл бұрын

Я бы рекомендовал learn.js

@Oktan241 3 жыл бұрын

Если рассматривать самый первый пример с подключением гугл шрифта, но при этом в HTML ничего не добавлять, а прописать только часть в CSS - font-family: 'Roboto', sans-serif; то шрифт тоже измениться, правда он будет не такой, как если все таки добавить link в HTML. Откуда берется этот шрифт, если у нас нет ссылки ни на внешние шрифты, ни на внутренние. из стандартных шрифтов имеющихся на компьютере? или умный браузер их еще где то находит и подгружает? и второй вопрос - вот мы выбрали опять же в гугл шрифте 3 толщины - 100, 500 и 900, и вставили их в HTML после того как мы прописали в CSS применить к body просто семейство шрифта без дополнительного указания толщины, то какая толщина будет? зачем мы выбрали вообще несколько толщин,если все равно можно для любого элемента прописать свою собственную, то есть существует ли вообще необходимость загружать именно такую ссылку в которой записано несколько вариантов толщин одного и того же шрифта. или опять же если мы загрузили несколько толщин то умный браузер применяет соответственно к заголовкам более жирные, а к параграфам более тонкие. в этом хитрость? тогда логичнее загружать сразу все варианты толщин, на все случаи жизни.... наверно.

@maximusoktavius1388 Жыл бұрын

Бро не в обиду, но душнее вопросов я в жизни не видел 😮‍💨

@user-bp8ky1my4o 3 жыл бұрын

Т. е. можно скачать любой шрифт и даже переобразовать его в формат ttf или woff он будет работать, так ?

@YauhenKavalchuk 3 жыл бұрын

Да

@Amun_Ra. 3 жыл бұрын

А можно ещё небольшое видео об разнице между margin и padding?

@YauhenKavalchuk 3 жыл бұрын

Padding отступ внутри - входит в элемент. Margin - отступ снаружи, отталкивает другие элементы на указанную величину. Как описать подробнее не знаю

@user-bp8ky1my4o 3 жыл бұрын

Пишу форматы woff, ttf, otf, и woff2 как в примере на 6:35 все друг за другом и ничего не работает. Запускаю по одиночке всё работает кроме woff2. Ничего не меняю просто комментарием выключаю все кроме одного по очереди. Браузер Хром 89.04 64 бит. Не пойму в чём может быть дело ?

@YauhenKavalchuk 3 жыл бұрын

Это шрифты для разных браузеров, а вы тестируете их только в Chrome. Поэтому и не срабатывает

@user-bp8ky1my4o 3 жыл бұрын

@@YauhenKavalchuk Благодарю!

@cozafoto 3 жыл бұрын

не совсем понятно зачем в @font-face дополнительно прописывать font-weight: 500; и font-style: normal; если эти данные уже изначально вшиты в шрифте, и эти свойства ни на что не влияют? Или это просто правила хорошего тона?

@YauhenKavalchuk 3 жыл бұрын

Это в примере они "вшиты" в Google fonts, а на проекте вам могут просто прислать папку со шрифтами) Так что это просто был расширенный пример, что бы на практике не возникло вопросов