Испытание: рецепт на CSS [16/16]. Мое решение на 100% и подробная инструкция.

На самом деле задание очень простое и имеет очень много подсказок в самом HTML-кода, особенно полезно для тех, кто забывает значения свойств :grinning:.

Обратим внимание на имена классов в HTML-коде, по ним можно сразу догадаться какие свойства от нас требуется указать и для каких классов. Итак по порядку. В задании сказано, что нужно применить изученные в этом курсе CSS-свойства к соответствующим элементам span.
Ищем первый элемент span, он идет с классом sub, видим, что в него обернута цифра 2, сверяем с примером и видим эту двойку в нижнем регистре.
Чтобы сделать так-же, переходим в CSS редактор и для класса sub добавляем следующие свойства:

.sub {
vertical-align: sub;
font-size: 0.750em;
}

Почему я указал размер шрифта в em? Потому, что один человек на форуме написал, для того чтобы выполнить это задание нельзя указывать единицы измерения в em, а нужно в px (пикселях). Я просто решил опровергнуть его теорию :grinning: Нет никакой разницы в em или px, единственное, что нужно знать - 1em = 16px! Это стандарт. 12 px это на 25% меньше чем 16 px, а значит на 0.25 меньше чем 1em.

Идем дальше. Следующий span делаем по такой-же схеме, только в указываем свойство для верхнего регистра.

.sup {
vertical-align: super;
font-size: 0.750em;
}

Далее вообще все очень просто. Ищем следующий span, смотрим какой текст в него обернут, сверяем с образцом и добавляем нужные CSS-свойства:

:point_up_2: зачеркиваем “1,5 стакана”

.del {
text-decoration: line-through;
}

:point_up_2: подчеркиваем “Сахар демерара, посыпать сверху”

.underline {
text-decoration: underline;
}

:point_up_2: делаем начертание курсивом “Примечания:”

.italic {
font-style: italic;
}

Готово. Спасибо за внимание.
P.S. Старайтесь учится использовать em вместо px, а так-же использовать множители! Да, это сложнее по-началу, но в будущем намного упростит Вам работу. Дело в том, что em - масштабируемая единица измерения и при отображении текста на разных устройствах, шрифт заданный в em будет масштабироваться. Единственное, что нужно учитывать при использовании em вместо px - каскадность. Не буду углубляться в тему, обо всем сможете прочитать в гугле.

4 лайка

Вместо “гугла” добавьте пару ссылок по относительным единицам изменениям и ваша инструкция будет еще ценнее.

Не был уверен, что на форуме разрешено добавлять ссылки на сторонние ресурсы. Почему em? и CSS Font-Size: em vs. px vs. pt vs. percent .Давно когда изучал нюансы типографики и интерлиньяжа в веб-дизайне, находил очень достойные и подробные статьи на эту тему на медиуме, но ссылки не сохранял. Используя относительные величины можно создать свой собственный почерк написания кода :slight_smile:. Я использую Golden Ratio Typography Calculator для определения интерлиньяжа, задаю значения в px, а потом перевожу полученное значение из px в em. Еще есть классный сервис Modular Scale в котором можно подобрать размер заголовков и текстовых блоков. В общем относительные величины - это хорошо, т.к. разрешения экранов постоянно растет.

1 лайк

Можно добавлять ссылки, главное, чтобы они не были рекламного характера.
А рекомендации, советы из своего опыта - это всегда приветствуется.

1 лайк