Як зробити закреслений текст в css
Відео: Жирний, курсив, закреслений і перевернутий текст в коментарях на Youtube
CSS дозволяє виробляти найрізноманітніші операції, пов`язані з декоративною прикрасою всієї сторінки. Особлива увага приділяється тексту, який в більшості випадків заповнює більшу частину всіх сайтів. Сьогодні ми з вами розглянемо одну цікаву властивість: надчеркнутий, підкреслений і закреслений текст. Всі ці ефекти встановлюються за допомогою одного правила CSS.
Відео: Урок 6. 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». Адже зайве прикраса тексту може нашкодити вам і вашим читачам.
