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

Первый вариант, которым и была решена задача, - использование HTML-тега <s> или <strike>. Оба этих тега поддерживаются всеми браузерами, но с HTML 4.01 strike считается устаревшим, а в HTML5 вообще упразднен. Тем не менее, такой вариант имеет место быть.

<style type="text/css">
.fixed_text_1 {
    color:#FF0000;  /* цвет зачеркивающей линии */
}
.fixed_text_1 span {
    color:#000000;  /* цвет зачеркиваемого текста */
}
</style>
 
<s class="fixed_text_1"><span>Исправленному</span></s> верить
<strike class="fixed_text_1"><span>Исправленному</span></strike> верить

Если почитать документацию по HTML, то там написано, что вместо этих тегов рекомендуется использовать тег <del>. Кроме визуального эффекта, он является еще и семантически более правильным, если требуется выделить текст, который утратил актуальность.

Описание стилей остается таким же, как и в первом примере, меняется только тег контейнера.

<del class="fixed_text_1"><span>Исправленному</span></del> верить

Следующий пример основан на свойстве CSS text-decoration, а точнее на его значении line-through. В этом случае содержимое контейнера будет перечеркнуто горизонтальной линией. Нам остается только задать в стилях цвет зачеркивающей линии и цвет текста содержимого контейнера.

<style type="text/css">
.fixed_text_2 {
    color:#FF0000;  /* цвет зачеркивающей линии */
    text-decoration: line-through;
    display:inline;
}
.fixed_text_2 span {
    color:#000000;  /* цвет зачеркиваемого текста */
}
</style>
 
<div class="fixed_text_2"><span>Исправленному</span></div> верить

Заключительный пример показан только как еще один вариант решения задачи, на практике его лучше не использовать, тем более, что он не работает в браузере Internet Explorer. Этот способ основан на том, что контейнеру и содержимому присваивается атрибут position:relative, а затем контейнер с перечеркивающей линией и зачеркиваемый текст сдвигаются относительно друг друга по вертикали. Перечеркивающей линией в данном случае является нижняя граница контейнера, а цвет текста и контейнера не меняется.

<style type="text/css">
.fixed_text_3 {
    position:relative;
    top:-8px;
    border-bottom:1px #FF0000 solid; /* цвет зачеркивающей линии */
    display:inline;
}
.fixed_text_3 span {
    position:relative;
    top:8px;
}
</style>
 
<div class="fixed_text_3"><span>Исправленному</span></div> верить

Единственный плюс такого способа в том, что можно задать не только непрерывный тип линии зачеркивания, но и любой другой, поддерживаемый свойством border. Также можно выбрать и толщину линии зачеркивания. Повторюсь, никогда так не делайте без крайней нужды!

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


Демо

Добавлено: 12 Сентября 2013 01:33:51 Добавил: Андрей Ковальчук Нравится 0

Добавить