На самом деле задание очень простое и имеет очень много подсказок в самом HTML-кода, особенно полезно для тех, кто забывает значения свойств .
Обратим внимание на имена классов в HTML-коде, по ним можно сразу догадаться какие свойства от нас требуется указать и для каких классов. Итак по порядку. В задании сказано, что нужно применить изученные в этом курсе CSS-свойства к соответствующим элементам span.
Ищем первый элемент span, он идет с классом sub, видим, что в него обернута цифра 2, сверяем с примером и видим эту двойку в нижнем регистре.
Чтобы сделать так-же, переходим в CSS редактор и для класса sub добавляем следующие свойства:
.sub {
vertical-align: sub;
font-size: 0.750em;
}
Почему я указал размер шрифта в em? Потому, что один человек на форуме написал, для того чтобы выполнить это задание нельзя указывать единицы измерения в em, а нужно в px (пикселях). Я просто решил опровергнуть его теорию Нет никакой разницы в em или px, единственное, что нужно знать - 1em = 16px! Это стандарт. 12 px это на 25% меньше чем 16 px, а значит на 0.25 меньше чем 1em.
Идем дальше. Следующий span делаем по такой-же схеме, только в указываем свойство для верхнего регистра.
.sup {
vertical-align: super;
font-size: 0.750em;
}
Далее вообще все очень просто. Ищем следующий span, смотрим какой текст в него обернут, сверяем с образцом и добавляем нужные CSS-свойства:
зачеркиваем “1,5 стакана”
.del {
text-decoration: line-through;
}
подчеркиваем “Сахар демерара, посыпать сверху”
.underline {
text-decoration: underline;
}
делаем начертание курсивом “Примечания:”
.italic {
font-style: italic;
}
Готово. Спасибо за внимание.
P.S. Старайтесь учится использовать em вместо px, а так-же использовать множители! Да, это сложнее по-началу, но в будущем намного упростит Вам работу. Дело в том, что em - масштабируемая единица измерения и при отображении текста на разных устройствах, шрифт заданный в em будет масштабироваться. Единственное, что нужно учитывать при использовании em вместо px - каскадность. Не буду углубляться в тему, обо всем сможете прочитать в гугле.