10. Декорирование текста.
Под декорацией (декорированием) текста понимается его подчеркивание, надчеркивание и перечеркивание.
Часто декорация используется для оформления ссылок с обратной целью: не добавить декорацию, а убрать подчеркивание, которое добавляется в каждую ссылку браузерами по умолчанию. Но бывает так нужно, с точки зрения дизайна или, точнее, дизайнера, что как раз подчеркивание в ссылках не нужно. Свойства и значения для декорации текста (в том числе и ссылок):
На базе данного теоретического материала попробуем создать соответствующие классы:
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_010_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_010_001.zip ← скачайте пример, чтобы установить на свой сайт...
Часто декорация используется для оформления ссылок с обратной целью: не добавить декорацию, а убрать подчеркивание, которое добавляется в каждую ссылку браузерами по умолчанию. Но бывает так нужно, с точки зрения дизайна или, точнее, дизайнера, что как раз подчеркивание в ссылках не нужно. Свойства и значения для декорации текста (в том числе и ссылок):
Декорирование текста:
text-decoration:none; - декорирование отсутствует
text-decoration:underline; - подчеркивание внизу
...
Просто текст без декорирования...
Еще просто текст без декорирования...
...
text-decoration:overline; - надчеркивание сверху
text-decoration:line-through; - перечеркивание
text-decoration:none; - декорирование отсутствует
text-decoration:underline; - подчеркивание внизу
...
Просто текст без декорирования...
Еще просто текст без декорирования...
...
text-decoration:overline; - надчеркивание сверху
text-decoration:line-through; - перечеркивание
На базе данного теоретического материала попробуем создать соответствующие классы:
.decor_none {
text-decoration:none;
}
.decor_under {
text-decoration:underline;
}
.decor_over {
text-decoration:overline;
}
.decor_through {
text-decoration:line-through;
}
Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_010_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_010_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
