background top icon
background center wave icon
background filled rhombus icon
background two lines icon
background stroke rhombus icon

Скачать "CSS Стили шрифта и текста. CSS font-size. CSS color, CSS text-shadow. Уроки HTML CSS JS. Урок №6"

input logo icon
Теги видео
|

Теги видео

фрилансер по жизни
css свойства текста
css стили текста
css свойства шрифта
css стили шрифта
учить css
верстка для начинающих
верстка
css
каскадные таблицы стилей
каскадные таблицы стилей css
уроки css
верстка с нуля
верстка сайта
Верстка с нуля уроки
Бесплатные уроки CSS
CSS уроки
Верстка сайтов с нуля
уроки
Стили шрифта и текста
html
css3
Уроки HTML CSS JS
CSS text-shadow
CSS color
CSS font-size
Субтитры
|

Субтитры

subtitles menu arrow
  • enАнглийский
Скачать
00:00:02
изучать каскадные таблицы стилей css и
00:00:05
сегодня поговорим о параметры для работы
00:00:07
со шрифтом и текстом стилизация текста
00:00:10
это одно из самых основных
00:00:11
предназначений каскадных таблиц стилей
00:00:13
поэтому очень важно владеть
00:00:15
соответствующими css свойствами и их
00:00:17
значениями которые мы сейчас и изучим а
00:00:19
в конце урока сделаем практическое
00:00:21
задание из пакета psd
00:00:23
но перед тем как начать я бы хотел
00:00:25
ответить на пару ваших вопросов
00:00:27
касательно обновляющегося тилля из
00:00:29
предыдущего урока вас интересовало можно
00:00:32
и нужно ли использовать обновляющий
00:00:34
стиль для каждого нового проекта до
00:00:36
использовать нужно но каждый раз его
00:00:38
писать не придется последствии мы
00:00:41
сформируем так называемый стартовый
00:00:42
шаблон включающие определенные записи
00:00:45
html css и джея skoda для простого
00:00:48
старта проекта
00:00:49
ну а пока мы просто копируем предыдущий
00:00:52
урок с уже написанными стилями обнуления
00:00:55
также в прошлом уроке я не давал
00:00:57
подробного объяснения всем свойствам и
00:00:59
значением написанным в обновляющий стиле
00:01:02
чтобы глава с немного смутить дело в том
00:01:04
что эти стили статичны и изменения
00:01:07
вносятся туда крайне редко плюс
00:01:09
большинство свойств и значений которые
00:01:11
там описаны мы будем подробно
00:01:13
рассматривать на соответствующих уроках
00:01:15
в том числе и сегодня поэтому вам пока
00:01:18
достаточно просто использовать
00:01:20
предоставленные стиле а понимание
00:01:22
написанного придется временем и еще пара
00:01:24
слов о терминах
00:01:25
так как в разных источниках по разному
00:01:27
называют тот или иной элемент css
00:01:30
давай определим что и как мы будем
00:01:31
называть моих уроках и так селектор
00:01:35
селектор это обращение обычно использует
00:01:38
селектор класса
00:01:39
если мы обращаемся классу селектор типа
00:01:42
если мы обращаемся ко всем тегом
00:01:46
определенным и селектор типа и класса
00:01:50
что будет более приоритетной записи
00:01:53
свойства и значение свойства то что мы
00:01:56
пишем до : значения то что мы пишем
00:02:00
после : ну а параметр это вся запись
00:02:03
свойство плюс значения например у
00:02:06
селектора класса блок есть свойство фон
00:02:09
says
00:02:10
со значением 20 пикселей и свойства
00:02:13
color со значением райт значит параметры
00:02:18
селектора блок будут размер шрифта 20
00:02:21
пикселей и цвет текста красным осталось
00:02:24
добавить что обращаться можно сразу к
00:02:26
нескольким селектором указав их через
00:02:29
запятую
00:02:31
соответственно размер шрифта 20 пикселей
00:02:33
и цвет красный применится и ко всем
00:02:37
тегом с классом блок и ко всем тегом с
00:02:39
классом блок 2 думаю теперь все стало
00:02:42
намного понятней и мы наконец-то можем
00:02:44
приступить к изучению css войск для
00:02:46
работы со шрифтами и текстами конечно же
00:02:49
я буду давать только основные свойства
00:02:50
которыми пользуются готовы вперед я уже
00:02:54
создал новый проект скопировал в
00:02:56
предыдущей добавил его в редактор кода
00:02:58
соблазн но поскольку вы просили меня
00:03:01
снимать год крупнее и четче в этот раз я
00:03:04
не стану разделять окно кода на 2 и буду
00:03:07
переключаться между html и css по
00:03:10
надобности а вы мне в комментариях
00:03:12
напишите подходит ли такой формат для
00:03:15
начала разберем свойство шрифтов и
00:03:17
первым свойствам будет font family
00:03:20
font family устанавливать семейства
00:03:22
шрифта который будет использоваться для
00:03:24
оформления текста содержимого по
00:03:26
умолчанию используется семейства times
00:03:28
new roman мы его и увидим в результате
00:03:31
добавив любой текст
00:03:32
нашу html-страницу для этого создадим
00:03:35
так по
00:03:36
и его содержимом напишем текст рыбу для
00:03:40
этого пишем слово лором и нажимаем тab
00:03:43
сохранив изменения и открыв нашу
00:03:46
страницу яндекс html браузере мы увидим
00:03:49
что наш текст отображается именно
00:03:52
шрифтом times new roman
00:03:54
важно что все свойства шрифта и текста в
00:03:57
том числе font family
00:03:58
наследуется поэтому самый часто
00:04:01
используемый в дизайне шрифт
00:04:03
прописывается сразу для того body то
00:04:05
есть семейства шрифта распространиться
00:04:07
на все теги страницы
00:04:09
но для некоторых все же необходимо
00:04:11
дополнительно указать параметры font
00:04:13
family
00:04:14
here with так как они не наследуют это
00:04:16
свойство например для тегов форм что мы
00:04:19
и сделали в обновляющий стиле на прошлом
00:04:21
уроке
00:04:22
давай для наглядности сменим семейство
00:04:25
шрифтов для какого-то текста для этого
00:04:27
создадим еще один tp с классом реал
00:04:29
сделаем мы это написав п .
00:04:33
и класс ареал и нажав то также сюда мы
00:04:39
добавим текст
00:04:40
рыбу пишем ларин нажимаем тab и чтобы
00:04:46
между нашими абзацами появилась
00:04:48
расстояние между тегами п мы поставим
00:04:52
т.б.
00:04:55
сохраним посмотрим наш результат
00:04:58
пока семейства шрифта
00:05:02
у обоих параграфов одинаково но теперь
00:05:05
мы переходим в наш файлик style.css
00:05:08
и обращаемся классу ареал для того чтобы
00:05:15
быстро присвоить нужный нам параметр
00:05:17
нашим на встроенном редакторе есть
00:05:19
сокращение а и вот здесь нам предлагают
00:05:24
готовый параметр
00:05:26
font family ареал список шрифтов может
00:05:30
включать одно или несколько названий
00:05:32
разделенных запятой если в название
00:05:34
шрифта содержатся пробелы например как
00:05:37
тут оно должно заключаться в один в
00:05:39
одинарные или двойные кавычки
00:05:41
заканчивают список обычно ключевым
00:05:44
словом которое описывает тип шрифта памятку про
00:05:48
все свойства их значения сегодняшнего
00:05:50
урока я оставлю файлики инфо тексте
00:05:52
нашего проекта архив которого ты сможешь
00:05:55
скачать по ссылке в описании сохранив
00:05:58
документ в результате мы увидим что
00:06:01
шрифт для абзаца с классом реал
00:06:05
изменился забегая вперед сообщу что как
00:06:08
правило мы будем подключать файлы
00:06:10
шрифтов которые хотим использовать
00:06:11
верстки поэтому если шрифта нет на
00:06:14
компьютере пользователя он все равно
00:06:15
будет корректно отображаться подробнее о
00:06:18
том как подключать свои шрифты разными
00:06:20
способами я расскажу в отдельном выпуске
00:06:23
следующие свойства это уже знакомый нам
00:06:25
фонд says фон сайт определяет размер
00:06:28
шрифта элемента для наглядности мы
00:06:31
добавим еще один параграф с классом
00:06:35
фонд says например 30 таб добавим туда
00:06:40
текст рыбу записал хлорамина же оффтоп
00:06:43
копируем имя класса переходим в css
00:06:46
обращаемся классу фонд сестрицы
00:06:49
и теперь нам нужно создать свойство фон
00:06:51
сайт со значением 30 размер боже может
00:06:54
быть установлен несколькими способами о
00:06:56
которых мы поговорим отдельно а сегодня
00:06:59
мы рассмотрим значениях пикселя для того
00:07:01
чтобы быстро добавить параметр мы
00:07:04
набираем еврей пишем наше значение 30 и
00:07:08
нажимаем тab и все вы получили нужные
00:07:11
свойства функций с со значением 30
00:07:14
пикселей сохраняем документ переходим браузер
00:07:17
обновляем страницу и мы можем видеть что
00:07:20
текст внутри параграфа с классом фон
00:07:23
сестрицы заметно больше чем остальной
00:07:26
текст который по умолчанию имеет размер
00:07:30
14 пикселей это указано как параметр
00:07:33
тегов html & body нашим обновляющий
00:07:37
стиле но мы двигаемся дальше и следующие
00:07:40
свойства фон стал определяет начертание
00:07:43
шрифта обычное курсивным или наклонно
00:07:46
мы сразу же создадим параграф для
00:07:48
наглядности с классом и тальк tab
00:07:54
добавляем туда рыбу копируем имя класса
00:08:01
идем файлик си эс эс обращаемся классу
00:08:04
italic и теперь записываем наш параметр
00:08:08
фон style для этого набираем с ой tab и
00:08:12
мы получаем свойства фон стал со
00:08:14
значением это и мы увидим что наш
00:08:17
параграф с классом italic
00:08:20
получился курсивным шрифтом значение
00:08:24
кроме и толик могут быть еще норму что
00:08:26
вернет текст нормальное состояние и
00:08:28
облик это наклонная начертание курсив и
00:08:32
наклонный шрифт при всей похожести ни
00:08:34
одно и то же курсив это специальный
00:08:36
шрифт имитирующая рукописный а наклонные
00:08:39
же образуются путем наклона обычных
00:08:41
знаков вправо
00:08:43
а я напомню что вся эта необходимая
00:08:45
информация находится файлики инфо тексте
00:08:47
нашего проекта следующее свойство это
00:08:51
фонд weight устанавливает насыщенность
00:08:53
шрифта или дословно вес шрифта
00:08:55
как обычно создаем для наглядности свой
00:08:59
параграф с классом фонд 700 нажимаем тab
00:09:08
добавляем туда наш текст рыбу копируем
00:09:14
класс в css файл и обращаемся к нему
00:09:18
значение могут быть как буковины болт
00:09:21
так и цифровые
00:09:22
700 я использую цифровые значения
00:09:25
значение 400 писать не нужно так как это
00:09:29
значение используется по умолчанию
00:09:31
например чтобы сделать наш текст жирным
00:09:34
дать ему значение 700 мы
00:09:37
чтобы это сделать быстро мы набираем fw
00:09:40
пишем 700 и нажимаем там мы получаем
00:09:44
параметр жирного текста и смотрим
00:09:47
результат в браузере все популярные
00:09:51
значение свойства фонд weight как в
00:09:53
цифровом так и в текстовом формате ты
00:09:55
найдешь файлики инфо тексте от свойств
00:09:58
шрифта мы плавно переходим к более
00:10:01
разнообразным свойствам оформления
00:10:03
текста и первым свойствам будет уже
00:10:05
знакомые нам свойства уколов как обычно
00:10:08
создадим параграф для демонстрации с
00:10:11
классом color проект например добавим
00:10:15
туда текста копируем клаус добавляем
00:10:19
себе sens и опишем свойство color для
00:10:24
задания цветов обычно используются числа
00:10:26
в шестнадцатеричном коде либо с помощью
00:10:28
rgb
00:10:29
что я имею в виду например для цвета
00:10:32
красного 16-ричный код будет выглядеть
00:10:34
вот таким образом но то же самое можно
00:10:37
задать с помощью rgb то есть эти записи
00:10:41
будут одинаковы в частности для цвета
00:10:44
красный можно еще сделать вот такую
00:10:47
запись просто написав рэп чаще всего
00:10:50
используется именно шестнадцатеричное
00:10:53
число
00:10:54
сохраняем документ переходим наш браузер
00:10:58
и обновляем страницу и мы видим что наш
00:11:01
prograf с нужным классом colored
00:11:05
покрасился красный цвет пока у нас все
00:11:07
отлично получается но мы двигаемся
00:11:10
дальше и следующие широко применяемое
00:11:12
свойство этот текст оnline
00:11:14
определяет горизонтальное выравнивание
00:11:16
текста создадим наш параграф для
00:11:19
демонстрации с классом текст
00:11:23
write например добавим текст а только
00:11:28
совсем немного для этого напишем лором
00:11:30
со значением 5 добавится 5 слов
00:11:34
переносим класс css и как понятно из
00:11:38
названия класса я хочу чтобы этот
00:11:41
коротенький текст выровнился по правому
00:11:43
краю
00:11:44
для этого короткая запись будет текст
00:11:47
оnline рай там еще могут быть следующее
00:11:51
значение центр g стефан и лофт сейчас мы
00:11:56
все их продемонстрирован идем наш
00:11:58
браузер обновляем и мы увидим что вот
00:12:02
наш в конце маленький текст выровнен не
00:12:05
по левому краю как все остальные а по
00:12:08
праву
00:12:09
теперь давай попробуем изменить наше
00:12:12
значение на центр для этого короткая
00:12:15
запись будет текст оnline центр ставим
00:12:19
tab сохраняем переходим браузер
00:12:21
обновляем и наш текст выровнен по центру
00:12:24
для демонстрации значения just fine
00:12:27
нам нужно добавить еще немного текста в
00:12:30
нас в нашей темы
00:12:32
вот так и все с мы запишем параметр
00:12:39
текст line just a fight для этого мы
00:12:41
пишем текст оnline justify
00:12:45
сохраняем обновляем и вот здесь по
00:12:50
правому краю мы можем видеть отличие от
00:12:53
текстов которые выше то есть наш
00:12:56
параграф с примененным текст оnline
00:12:58
justify растянулся как бы на всю ширину
00:13:01
чтобы произвести это действие браузер в
00:13:04
этом случае добавляет пробелы меж
00:13:07
тут словами таким образом чтобы наш
00:13:09
текст занял всю ширину пространство в
00:13:12
данном случае окна браузер
00:13:15
соответственно стандартное значение
00:13:17
тексты light lift
00:13:20
сделает наш текст таким же как и любой
00:13:24
предыдущий для наглядности вернем
00:13:27
например центр вот так следующий
00:13:33
интересный следующее интересное свойство это текст
00:13:36
decoration
00:13:37
создаем по традиции наш параграф просто
00:13:42
с классом decoration
00:13:44
добавляем текст и переходим все с
00:13:51
большинстве случаев текст decoration
00:13:54
добавляет оформление текста в виде его
00:13:56
подчёркивания перечёркивая и линии над
00:13:59
текстом одновременно можно применить
00:14:01
более одного стиля перечисляя значение
00:14:04
через пробел и это свойство может
00:14:06
принимать значения первое текст
00:14:09
decoration
00:14:10
underline создаст подчеркнутый текст вот
00:14:15
таким вот образом все следующее значение
00:14:19
это о варла
00:14:20
кекс decoration умерла создаст линий
00:14:25
над текстом значение текст decoration
00:14:29
lines руб создаст зачеркнутый текст и
00:14:36
значение но он уберет любой эффект
00:14:41
вернем текст decoration план сруб для
00:14:45
наглядности следующее не менее
00:14:48
интересное свойство это текст shadow
00:14:52
добавляет тень к тексту быстренько
00:14:54
создаем наш тестовый параграф shadow
00:15:01
с текстом и переходим все с
00:15:09
для добавления свойства тексты доу
00:15:11
начинаем писать текст и в списке находим
00:15:15
нужное свойств и так значение синтаксис
00:15:20
записи свойство text shadow
00:15:22
сначала у нас идет смещение по
00:15:26
горизонтали
00:15:27
потом смещение по вертикали потом размер
00:15:32
размытие
00:15:33
тени и потом цвет я напишу цвет черный
00:15:38
вот таким образом сохраняем и смотрим
00:15:42
результат мы видим что параграф с
00:15:47
классом shadow отобразил текст у
00:15:50
которого явно видна тень и это тень
00:15:54
отрисовываются со следующими значениями
00:15:57
на 1 пиксель сдвинута влево на 1 пиксель
00:16:00
сдвинуты вниз и имеет размер размытие
00:16:04
один пиксель для наглядности я поменяю
00:16:07
значения размера
00:16:08
размытие на 10 и обновив мы увидим что
00:16:13
тень очень сильно размыл
00:16:15
ее практически стала не видно и текст
00:16:18
приобрел такой интересный эффект
00:16:21
следующем часто используемым свойствам
00:16:24
для форматирования текста будет текст
00:16:27
transform управляет преобразование
00:16:29
текста в заглавные или прописные символ
00:16:32
я быстренько создаю тестовый параграф
00:16:41
переношу название класса css и для того
00:16:47
чтобы нам задать текст transform мы два
00:16:49
раза пишем те
00:16:51
капитала из действует следующим образом
00:16:53
1 символ каждого слова в предложении
00:16:56
будет заглавном остальные символы свой
00:16:59
вид не меня
00:17:00
мы это можем увидеть в нашем браузере
00:17:03
мы видим что тексте параграфа с классом
00:17:08
а парк рейс который я задал каждая
00:17:11
первая буква в слове
00:17:14
за главное также значение
00:17:17
текст transform могут быть следующие на
00:17:21
варфейс
00:17:22
все символы текста становятся строчными
00:17:25
то есть нижний регистр вот а паркерс как
00:17:32
вы уже наверняка догадались переводит
00:17:34
все символы верхний регистр то есть
00:17:37
буквы станут заглавными и но он это
00:17:42
значение возвращает текст в обычное
00:17:45
нормальное состояние а мы движемся
00:17:48
дальше и следующее свойство этот текст и
00:17:51
дент создаем параграф
00:17:58
тексты дэнт устанавливает величину
00:18:00
отступа первой строки блока текст
00:18:03
применяется если нам нужно создать
00:18:05
что-то типа красной строки
00:18:08
добавляем текста переносим класс css
00:18:14
начинаем писать слова текст и вот здесь
00:18:19
вот мы видим свойство текст и да ну
00:18:23
поставим например 50 пикселей
00:18:25
чтобы было явно переходим наш браузер мы
00:18:30
видим что наша строка отступила от
00:18:34
левого края на 50 пикселей но мы идем
00:18:38
дальше и следующие свойства лайтор
00:18:40
spacing
00:18:41
определяет интервал между символами
00:18:43
буквами довольно интересное свойство
00:18:45
имеет интересный эффект
00:18:47
создадим параграф переносим все с и
00:18:57
пишем лектор ищем лотар спейси и
00:19:03
установим например 5 пикселей
00:19:06
посмотрим на наш результат и мы увидим
00:19:10
что в нужном параграфе с классом л space
00:19:14
наш текст стал
00:19:16
разряжен как будто то есть расстояние
00:19:19
между символами увеличились и стали
00:19:22
равны 5 пикселю
00:19:24
значению которой мы указали этому
00:19:27
свойству и не теряй обороты следующее
00:19:29
свойство world спейси
00:19:31
это то же самое что в этом spacing
00:19:33
только устанавливает интервал не между
00:19:36
буквами а между словами создаю параграф
00:19:39
с каким-то классом начинаю писать вот и
00:19:43
вижу worlds прессе
00:19:44
это же добавлю здесь 5 пикселей
00:19:47
сохраняем смотрим на наш результат и мы
00:19:51
можем видеть что расстояние между
00:19:53
словами у параграфа с классом w space
00:19:57
явно больше чем у стандартного параграфа
00:20:01
которого самый первый которому мы ничего
00:20:04
не применять следующее свойство управляет пробелами
00:20:07
между словами и зовут его white space
00:20:11
создадим параграф с классом one space
00:20:17
добавим текст применяется мазнуть в
00:20:20
основном со значением
00:20:22
но у раб которая запрещает перенос
00:20:25
строки таким образом весь текст отображается в
00:20:28
одну строку и не ломается значение
00:20:30
normal вернется как было для того чтобы
00:20:33
сразу быстренько нам добавить параметр
00:20:36
мы пишем w с.н.
00:20:40
бабулю и или же пока мы начинаем писать
00:20:45
находим нужный параметр предлагаемом
00:20:48
списке выбираем сохраняем и смотрим мы
00:20:53
можем видеть вот здесь что у нас даже
00:20:56
появилась горизонтальная прокрутка у
00:20:59
браузера почему потому что весь наш
00:21:01
текст
00:21:02
выстроился в одну линию и не ломается
00:21:06
значение normal отменит всякие действия
00:21:14
с пробелами и все у нас станет как было
00:21:17
текст в местах пробела начнет
00:21:21
переносится
00:21:22
ну и последняя на сегодня но далеко не
00:21:24
последнее по значимости это свойство
00:21:27
line хейс устанавливает межстрочный
00:21:29
интервал текста и широко применяется при
00:21:32
верстке добавляю демонстрационный
00:21:34
параграф с класс онлайн фейс добавляем
00:21:40
текст и задаем наш план хейс значение по
00:21:44
умолчанию он равен единице это мы и
00:21:48
указали в нашем обнулим в нашем стиле
00:21:52
обнуления для тегов html & body
00:21:55
но теперь мы хотим увеличить нашими
00:21:59
строгими строчное расстояние
00:22:01
указав какое-то значение в пикселя для
00:22:05
этого мы начинаем писать line видим
00:22:09
наше свойство line хейс и пишем какое-то
00:22:13
значению например 20 пикселей
00:22:15
сохранив и посмотрев на результат мы
00:22:18
увидим что наш последний параграф
00:22:20
его меж срочное расстояние явно больше
00:22:23
чем у предыдущих как раз из-за изменения
00:22:28
нашего значения с единицы на 20 пикселей
00:22:31
думаю теперь обновляющий стиль уже не
00:22:34
выглядит таким непонятным и незнакомом
00:22:36
ну а сейчас пришло время практики давай
00:22:39
сверстаем небольшой текст из макета psd
00:22:41
для практического задания подготовил вот
00:22:44
такой вот нехитрый макете
00:22:46
и загрузил его бока ты конечно можешь
00:22:48
верстать из photoshop но я все же
00:22:51
советую посмотреть выпуск про именно
00:22:53
avocode первую очередь что нам нужно
00:22:55
сделать это определить общие семейством
00:22:58
шрифта и размер шрифта который
00:23:00
используется в этом макете
00:23:01
для этого я кликаю мышкой на самый
00:23:05
верхний уровень
00:23:06
слоев фактически на название файла и
00:23:09
обращаю внимание на правую часть в
00:23:11
раздел phones
00:23:13
здесь я вижу что макете использованы два
00:23:17
семейства шрифта
00:23:18
это ареал и times new roman чтобы понять
00:23:22
какой из них более часто используемый
00:23:25
тут можно навести мышкой на семейства и
00:23:29
нажать челенж
00:23:31
и выделяться те слои которые используют
00:23:35
это семейство мы видим что практически
00:23:38
все написано семейством реал за
00:23:40
исключением одной записи
00:23:42
которая очевидно написано times new
00:23:46
roman таки есть также про классов текст
00:23:50
я вижу что в основном размер шрифта у
00:23:52
нас 14 пикселей и так определив основную
00:23:56
информацию переходим наш редактор с
00:23:59
аблаев здесь я уже почистил контейнер
00:24:01
боди и удалил все из файлика css кроме
00:24:06
обновляющегося тилля
00:24:07
мы выяснили что в макете преобладают
00:24:10
размер 14 пикселей мы видим что в нашем
00:24:13
обновляющий стиле для тегов html и будет
00:24:16
то есть для всего сайта у нас уже указан
00:24:19
именно этот размер
00:24:20
фон сайт 14 пиксель нам осталось дона
00:24:23
значит нужно из семейства шрифта для
00:24:26
этого мы повторно обращаемся к боли и
00:24:31
пишем уже знакомое нам сокращение э-э-эй
00:24:35
и нам sablon предлагает как раз нужное
00:24:38
нам нужный нам параметр
00:24:40
свойство font family со значением риан
00:24:43
отлично далее нам нужно перенести нашу
00:24:47
информацию из авокадо в html файл
00:24:50
поехали первым делом мы видим некий
00:24:54
заголовок копируем его для того чтобы
00:24:56
скопировать в в коде достаточно просто
00:24:59
два раза кликнуть на тексте
00:25:01
переходим наш индекс печки м.л. и
00:25:03
поскольку это заголовок самый главный
00:25:06
заголовок выпишем так еще один и
00:25:09
вставляем туда наш текст я напомню что
00:25:12
заголовок h1 можно использовать только
00:25:15
один раз на странице и не потому что это
00:25:17
невозможно физический что-то не будет
00:25:20
работать а потому что использование
00:25:22
нескольких главных заголовков очень
00:25:25
плохо влияет на последующую поисковую
00:25:27
оптимизацию и так поскольку свойствами
00:25:32
css отступы мы еще делать не умеем но
00:25:35
обязательно научимся в следующих уроках
00:25:38
отступаем и будем делать знакомым нам
00:25:41
the gambia вот таким образом
00:25:45
возвращаемся в avocode идем дальше видим
00:25:48
некий текст
00:25:49
копируем его и переносим создадим
00:25:54
параграф point с классом текст вставлять
00:25:58
и опять имитируем наш ацп
00:26:03
далее у нас идет еще какой-то заголовок
00:26:06
скопируем его это будет у нас аж два
00:26:10
заголовок уровнем ниже
00:26:13
отлично
00:26:15
далее у нас некий текст жирный текст
00:26:18
копируем создаем параграф с классом болт
00:26:25
отлично и опять подступаем и далее у нас
00:26:33
красный текст все те же действия только
00:26:36
класс дадим red чтобы мы понимали что к
00:26:39
чему и так мы перенесли кусок информации
00:26:42
из авокадо в sablon сейчас все это дело
00:26:46
выглядит у нас вот следующим образом
00:26:49
совсем не так как в макете нам нужно
00:26:52
теперь стилизирована наш текст таким
00:26:55
образом чтобы было соответствие потому
00:26:57
что мы видим в макете дизайн для этого
00:27:01
нам нужно перенести наши классы css
00:27:05
выделяем все и нажимаем control тильда
00:27:09
идем все счас и вставляю у нас
00:27:14
перенеслись все классы которые мы
00:27:16
использовали также мы использовали
00:27:18
заголовок h1 h2 отлично теперь нам нужно
00:27:25
взять информацию стиле из авокадо и
00:27:28
перенести ее в наш css нажимаем на
00:27:31
заголовок 1 и смотрим в про правую часть
00:27:36
в блог стайлз здесь мы видим что
00:27:40
заголовок написан определенным цветом
00:27:43
копируем его для того чтобы скопировать
00:27:45
параметр достаточно просто по нему
00:27:47
кликнуть и вставляем его в наш селектор
00:27:52
дальше мы видим что размер размер текста
00:27:56
здесь явно больше он равен значению 30
00:28:00
пикселей
00:28:01
скопируй и вставь
00:28:05
сохранив и проверив промежуточный
00:28:08
результат мы видим что наш заголовок уже
00:28:12
стал быть похожим на то что в дизайне
00:28:16
отлично переходим к следующей части к
00:28:19
тексту
00:28:22
то же самое мы копируем свет вот наш
00:28:28
класс текст и здесь мы видим что у нас
00:28:34
увеличен параметр
00:28:35
line фейс по умолчанию он равен единице
00:28:38
то есть это означает что он равен
00:28:42
размеру шрифта
00:28:43
ну здесь у нас line фейс увеличен до 25
00:28:47
поэтому этот параметр нам нужно тоже
00:28:49
перенести посмотрим на наш промежут
00:28:53
промежуточный результат и мы увидим что
00:28:55
меж строчное расстояние здесь
00:28:58
увеличилась двигаемся дальше следующий
00:29:02
заголовок
00:29:03
копируем его цвет это лишь диван и
00:29:08
размер шрифта 25 пикселей тоже переносе
00:29:13
отлично результат у нас все так же
00:29:17
радует
00:29:18
все очень похоже на макет далее у нас
00:29:23
жирный текст для этого мы копируем цвет
00:29:28
это clans болт и фонд weights здесь он
00:29:34
указан значение болт сложную буквенным
00:29:38
значением ставлю
00:29:42
сохраняем и смотрим результат мы видим
00:29:45
что на стиль текст стал жирным также
00:29:48
вместо слова болт мы можем указать
00:29:50
цифровое значение 700 лично я пользуюсь
00:29:53
именно цифровыми значений и у нас все
00:29:58
так же текст жирным
00:30:00
ну и красный текст остался у нас для
00:30:05
этого копируем цвет собственно красный а
00:30:09
я напоминаю чтобы наш цветовой код начал
00:30:13
подсвечиваться своим цветом нам нужно
00:30:16
настроить наш плагин color хайлайтер
00:30:19
настройки можно найти в меню tools are
00:30:22
хайлайтер и вот здесь вот настроить
00:30:26
отлично сохраня обновляем и мы видим что
00:30:30
наш текст покраснел замечательно домашка
00:30:34
закончу верстку этого макета используя
00:30:37
свойства и значение которые мы сегодня
00:30:39
изучили сам макет я поместил в папочку
00:30:42
source нашего проекта архив которого ты
00:30:45
сможешь скачать по ссылке в описании
00:30:47
друзья я стараюсь прислушиваться к
00:30:49
дельным советом и делать подачу
00:30:51
информации все лучше и лучше поэтому жду
00:30:54
новых комментариев
00:30:55
а также лайков и репостов увидимся в
00:30:57
следующем видео обучайся развивайся и
00:31:00
помни живи
00:31:01
работой свободное время
00:31:04
[музыка]

Описание:

CSS Стили шрифта и текста. CSS font-size. CSS color, CSS text-shadow. Уроки HTML CSS JS. Урок №6. Продолжаем учить CSS с нуля, сегодня познакомимся с параметрами для работы с текстом и шрифтами. Стилизация текста - это одно из основных предназначений таблиц стилей. Поэтому важно хорошо владеть соответствующими CSS свойствами и их значениями, которые мы сейчас и изучим! А в конце урока сделаем практическое задание по макету PSD. Но перед тем как начать, я бы хотел ответить на пару ваших вопросов касательно обнуляющих стилей из предыдущего урока. Изучим CSS свойства: font-family, font-size, font-style, font-weight, color, text-align, text-decoration, text-shadow, text-transform, text-indent, letter-spacing, line-height, white-space и их значения. 🔴 Весь плейлист с уроками по HTML CSS JS верстке: https://www.youtube.com/playlist?list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr Архив с файлами урока ищи в телеграм канале https://t.me/freelancer_lifestyle Или качай по ссылке: https://fls.guru/files/tutorials/css_2.zip 🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle 🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat) 🔴 Facebook: https://www.facebook.com/freelancerlifestyle 🔴 Instagram: https://www.instagram.com/freelancer.lifestyle 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle 🤟 Живи, а работай в свободное время! © #фрилансерпожизни #обучение #верстка

Готовим варианты загрузки

popular icon
Популярные
hd icon
HD видео
audio icon
Только звук
total icon
Все форматы
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

mobile menu iconКак можно скачать видео "CSS Стили шрифта и текста. CSS font-size. CSS color, CSS text-shadow. Уроки HTML CSS JS. Урок №6"?mobile menu icon

  • Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.

  • Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.

  • UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

mobile menu iconКакой формат видео "CSS Стили шрифта и текста. CSS font-size. CSS color, CSS text-shadow. Уроки HTML CSS JS. Урок №6" выбрать?mobile menu icon

  • Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

mobile menu iconПочему компьютер зависает при загрузке видео "CSS Стили шрифта и текста. CSS font-size. CSS color, CSS text-shadow. Уроки HTML CSS JS. Урок №6"?mobile menu icon

  • Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

mobile menu iconКак скачать видео "CSS Стили шрифта и текста. CSS font-size. CSS color, CSS text-shadow. Уроки HTML CSS JS. Урок №6" на телефон?mobile menu icon

  • Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

mobile menu iconКак скачать аудиодорожку (музыку) в MP3 "CSS Стили шрифта и текста. CSS font-size. CSS color, CSS text-shadow. Уроки HTML CSS JS. Урок №6"?mobile menu icon

  • Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

mobile menu iconКак сохранить кадр из видео "CSS Стили шрифта и текста. CSS font-size. CSS color, CSS text-shadow. Уроки HTML CSS JS. Урок №6"?mobile menu icon

  • Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

mobile menu iconСколько это всё стоит?mobile menu icon

  • Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.