Оформление текста, часть 1 / Декоративное подчёркивание [8/16]
×

Декоративное подчёркивание [8/16]

Вы, наверное, уже много раз видели красивое пунктирное подчеркивание. Его используют для оформления ссылок и других динамических элементов. Технология следующая:

  1. Убираем обычное подчеркивание с помощью text-decoration.
  2. Задаем нужный цвет текста с помощью color.
  3. Добавляем декоративное подчеркивание с помощью свойства border-bottom.

Также можно при наведении курсора скрывать такое подчеркивание с помощью псевдокласса :hover.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Декоративное подчеркивание</title> </head> <body> <h1>Почему появился Progressive Enhancement</h1> <p><a class="dashed" href="#">Ранее говорилось</a>, что если взять и в соответствии с Graceful Degradation максимально качественно сделать веб-интерфейс, то получится то же самое, что и при применении <span class="dashed">Progressive Enhancement</span>. Так зачем же было придумывать этот enhancement?</p> <p>Ответ прост: мало кто делал <span class="dashed">Graceful Degradation</span> очень качественно. Это расстраивало действительно высококлассных и ответственных разработчиков. Ведь сказать, что «я — молодец и делаю Graceful Degradation» мог почти любой, но затраты сил и времени у разных разработчиков различались на порядки.</p> </body> </html>
CSS
h1 { font-size: 24px; } .dashed { } .dashed:hover { border-bottom: none; }
HTML Academy

Добавьте CSS-правилу для класса dashed свойства:

  1. text-decoration: none;,
  2. color: #0088CC;,
  3. border-bottom: 1px dashed #0088CC;.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.