Як зробити закреслений текст в CSS
CSS дозволяє виробляти найрізноманітніші операції, пов'язані з декоративною прикрасою всієї сторінки. Особлива увага приділяється тексту, який у більшості випадків заповнює більшу частину всіх сайтів. Сьогодні ми з вами розглянемо одну цікаву властивість: надчеркнутий, підкреслений і закреслений текст. Всі ці ефекти встановлюються за допомогою одного правила CSS.
Присвоєння
Підкреслити і закреслити текст в CSS можна за допомогою команди «text-decoration». Ефект буде залежати від того, яке вказано значення. CSS був придуманий, щоб розділити логічну і структурну частину веб-сторінки. Але до появи каскадних таблиць стилів використовувалися HTML-теги, які мали аналогічне значення. Приміром, такий елемент, як дозволяє вивести закреслений текст. Зараз даний тег визнаний небажаним, і його застосування автоматично зробить ваш код сторінки невалідним. Хоча при цьому елемент досі підтримується всіма сучасними браузерами і використовується деякими розробниками. Але повернемося до CSS. Команда «text-decoration» може мати такі значення:
- Underline. Призначивши дане значення, ви отримаєте підкреслений текст.
- Overline. Лінія буде проходити над певним фрагментом сторінки.
- Line-through. Створює перекреслений або закреслений текст.
- Blink. Виділений фрагмент документа буде періодично зникати і знову з'являтися.
- Також є значення «none» і «inherit». Перше скасовує всі ефекти, а другий наказує успадковувати властивість у батьківського елементу.
Призначення
Здавалося б, що в CSS закреслений текст і подібні ефекти служать тільки для прикраси тексту. У більшості випадків це твердження правдиве. Але іноді варто задуматися над питанням: для чого створювалися такі елементи? Приміром, уже застарілий тег «strike» використовувався для позначення невірної або старої інформації. Читачі, побачивши перекреслений текст, розуміють приховане значення такого позначення. Підкреслені слова завжди відразу ж виділяються із загального потоку. Тому такий ефект необхідно використовувати для виділення важливої інформації. Значення «blink», яке робить текст миготливим, використовується досить рідко, тому що серед програмістів прийнято вважати такий ефект неприйнятним. Адже мало кому з ваших читачів подобаються мелькають символи, які будуть постійно їх відволікати. Ну а значення «overline» використовується тільки для прикраси тексту.
Особливості
Хоча всі значення властивості «text-decoration» входять в специфікацію версій каскадних таблиць, все ж деякі значення не підтримуються сучасними браузерами. Наприклад, миготливий текст не буде видно в IE. Браузер Google Chrome не сприймає деякі значення. Мобільні платформи неповноцінно підтримують дане властивість.
Висновок
Такі ефекти, як закреслений текст і інші схожі значення, застосовуються досить часто на просторах Інтернету. Їх використання дозволяє правильно висловити основну ідею автора, допомагаючи концентрувати увагу читачів на потрібній частині тексту. Але не варто дуже старатися і при будь-якій можливості застосовувати властивість «text-decoration». Адже зайве прикраса тексту може нашкодити вам і вашим читачам.