Як зробити перекреслений текст у CSS

Як зробити перекреслений текст у CSS

CSS дозволяє проводити найрізноманітніші операції, пов 'язані з декоративною окрасою всієї сторінки. Особлива увага приділяється тексту, який у більшості випадків заповнює більшу частину всіх сайтів. Сьогодні ми з вами розглянемо одну цікаву властивість: надкреслений, підкреслений і закреслений текст. Всі ці ефекти встановлюються за допомогою одного правила CSS.


Присвоєння


Підкреслити та закреслити текст у CSS можна за допомогою команди "text-decoration". Ефект залежатиме від вказаного значення. CSS було придумано, щоб розділити логічну і структурну частину веб-сторінки. Але до появи каскадних таблиць стилів використовувалися HTML-теги, які мали аналогічне значення. Наприклад, такий елемент, як < strike > дозволяє вивести закреслений текст. Зараз цей тег визнаний небажаним, і його застосування автоматично зробить ваш код сторінки невалидним. Хоча елемент < strike > досі підтримується всіма сучасними переглядачами і використовується деякими розробниками. Але повернемося до CSS. Команда "text-decoration" може мати такі значення:

  • Призначивши це значення, ви отримаєте підкреслений текст.
  • Лінія проходитиме над визначеним фрагментом сторінки.
  • Line-through. Створює перекреслений або перекреслений текст.
  • Виділений фрагмент документа буде періодично зникати і знову з 'являтися.
  • Також є значення "none" і "inherit". Перше скасовує всі ефекти, а друге наказує успадкувати властивість у батьківського елемента.

Призначення

Здавалося б, що в CSS закреслений текст і подібні ефекти служать тільки для прикраси тексту. У більшості випадків це твердження правдиве. Але іноді варто задуматися над питанням: для чого створювалися такі елементи? Наприклад, вже застарілий тег "strike" використовувався для позначення неправильної або старої інформації. Читачі, побачивши перекреслений текст, розуміють приховане значення такого позначення. Підкреслені слова завжди відразу ж виділяються із загального потоку. Тому такий ефект необхідно використовувати для виділення важливої інформації. Значення blink, яке робить текст миготливим, використовується досить рідко, оскільки серед програмістів прийнято вважати такий ефект неприйнятним. Адже мало кому з ваших читачів подобаються миготливі символи, які будуть постійно їх відволікати. Ну а значення "overline" використовується тільки для прикраси тексту.

Особливості

Хоча всі значення властивості "text-decoration" входять до специфікації версій каскадних таблиць, все ж деякі значення не підтримуються сучасними браузерами. Наприклад, миготливий текст не буде видно в IE. Браузер Google Chrome не сприймає деякі значення. Мобільні платформи неповноцінно підтримують цю властивість.

Ув 'язнення


 Такі ефекти, як перекреслений текст та інші подібні значення, застосовуються досить часто на просторах Інтернету. Їх використання дозволяє правильно висловити основну ідею автора, допомагаючи концентрувати увагу читачів на потрібній частині тексту. Але не варто занадто старанно і при будь-якій можливості застосовувати властивість "text-decoration". Адже зайва прикраса тексту може нашкодити вам і вашим читачам.