Blog. Just Blog

CSS: текст, зачеркнутый линией другого цвета

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Несколько вариантов реализации на CSS простенького эффекта выделения текста - зачеркивание его линией другого цвета. Когда-то передо мной встала такая задача, я с ней успешно справился. Потом решил поэкспериментировать и добиться этого же эффекта, но другими способами. Вот что у меня получилось. Общая суть всех примеров в том, что создается контейнер с перечеркивающей линией одного цвета, а в нем содержится текст другого цвета.

Первый вариант, которым и была решена задача, - использование HTML-тега <s> или <strike>. Оба этих тега поддерживаются всеми браузерами, но с HTML 4.01 strike считается устаревшим, а в HTML5 вообще упразднен. Тем не менее, такой вариант имеет место быть.
  1. <style type="text/css">
  2. .fixed_text_1 {
  3.     color:#FF0000;  /* цвет зачеркивающей линии */
  4. }
  5. .fixed_text_1 span {
  6.     color:#000000;  /* цвет зачеркиваемого текста */
  7. }
  8. </style>
  9.  
  10. <class="fixed_text_1"><span>Исправленному</span></sверить
  11. <strike class="fixed_text_1"><span>Исправленному</span></strikeверить
Если почитать документацию по HTML, то там написано, что вместо этих тегов рекомендуется использовать тег <del>. Кроме визуального эффекта, он является еще и семантически более правильным, если требуется выделить текст, который утратил актуальность.

Описание стилей остается таким же, как и в первом примере, меняется только тег контейнера.
  1. <del class="fixed_text_1"><span>Исправленному</span></delверить
Следующий пример основан на свойстве CSS text-decoration, а точнее на его значении line-through. В этом случае содержимое контейнера будет перечеркнуто горизонтальной линией. Нам остается только задать в стилях цвет зачеркивающей линии и цвет текста содержимого контейнера.
  1. <style type="text/css">
  2. .fixed_text_2 {
  3.     color:#FF0000;  /* цвет зачеркивающей линии */
  4.     text-decorationline-through;
  5.     display:inline;
  6. }
  7. .fixed_text_2 span {
  8.     color:#000000;  /* цвет зачеркиваемого текста */
  9. }
  10. </style>
  11.  
  12. <div class="fixed_text_2"><span>Исправленному</span></divверить
Заключительный пример показан только как еще один вариант решения задачи, на практике его лучше не использовать, тем более, что он не работает в браузере Internet Explorer. Этот способ основан на том, что контейнеру и содержимому присваивается атрибут position:relative, а затем контейнер с перечеркивающей линией и зачеркиваемый текст сдвигаются относительно друг друга по вертикали. Перечеркивающей линией в данном случае является нижняя граница контейнера, а цвет текста и контейнера не меняется.
  1. <style type="text/css">
  2. .fixed_text_3 {
  3.     position:relative;
  4.     top:-8px;
  5.     border-bottom:1px #FF0000 solid; /* цвет зачеркивающей линии */
  6.     display:inline;
  7. }
  8. .fixed_text_3 span {
  9.     position:relative;
  10.     top:8px;
  11. }
  12. </style>
  13.  
  14. <div class="fixed_text_3"><span>Исправленному</span></divверить
Единственный плюс такого способа в том, что можно задать не только непрерывный тип линии зачеркивания, но и любой другой, поддерживаемый свойством border. Также можно выбрать и толщину линии зачеркивания. Повторюсь, никогда так не делайте без крайней нужды!

Как видите, использование CSS и HTML дает вам очень широкие возможности для решения задач по верстке и оформлению сайтов. Вам остается только выбрать один из вариантов, подходящий под конкретные требования макета. Все примеры, описанные в этой статье, вы можете посмотреть на демонстрационной страничке.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 12758 | Комментариев: 2

Метки: CSS
Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Екатерина (21.10.2013 в 17:15):
Здравствуйте! Помогите, пожалуйста, уважаемый профи, "чайнику" в программировании(((
У меня на всех страницах инета есть зачеркнутые слова!!!! очень напрягает....
Благодарю за отзывчивость!!!
css3 (02.04.2013 в 21:09):
Познавательно. Спасибо.

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.06 сек. / MySQL: 2 (0.0029 сек.) / Память: 4.5 Mb
Наверх