Text decoration none: text-decoration-color — CSS: Cascading Style Sheets — Вебджем.рф

Содержание

CSS свойство text-decoration

❮ Назад Вперед ❯

Свойство text-decoration устанавливает оформление текста.

В CSS3 оно является сокращенной формой записи для следующих свойств:

text-decoration-line
text-decoration-color
text-decoration-style

Если значение одного из них не указано, будет автоматически установлено значение по умолчанию. Text-decoration-line является обязательным.

В спецификации CSS1 text-decoration не считалось сокращенным свойством и имело следующие значения :

none
underline
overline
line-through
blink

text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .  a {
      text-decoration: overline;
      }
      .b {
      text-decoration: line-through;
      }
      .c {
      text-decoration: underline;
      }
      .d {
      text-decoration: underline overline;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-decoration</h3>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Попробуйте сами!

Пример, где указан цвет текста:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      text-decoration: underline;
      -webkit-text-decoration-color: #1c87c9; /* Safari */  
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-decoration</h3>
    <p>Lorem Ipsum - это текст-"рыба".
  ..</p>
  </body>
</html>

Попробуйте сами!

В данном примере использовано расширение -webkit- для Safari.

Пример, где указан стиль текста:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      text-decoration-line: underline;
      }
      div.t1 {
      text-decoration-style: dotted;
      }
      div.t2 {
      text-decoration-style: wavy;
      }
      div.t3 {
      text-decoration-style: solid;
      }
      div.t4 {
      text-decoration-line: overline underline;
      text-decoration-style: double;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-decoration</h3>
    <div>Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div>Lorem Ipsum - это текст-"рыба".  ..</div>
    <br>
    <div>Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div>Lorem Ipsum - это текст-"рыба"...</div>
  </body>
</html>

Попробуйте сами!

css властивість text-decoration

Головна
css
властивості
text-decoration

Властивість

text-decoration визначає оздоблення тексту. В CSS3 властивість text-decoration є універсальною властивістю для наступних властивостей.

text-decoration-line
text-decoration-color
text-decoration-style

Одночасно дозволено застосовувати більш декілька стилів, перераховуючи значення через пропуск. Пропущені властивості отримають їх початкові значення.

Властивість додає оздоблення понад нащадками. Це означає, що якщо для елементу вказаний text-decoration, то дочірній елемент не може видалити це оформлення. Наприклад, якщо ми маємо абзац з нащадком:

This is text!

Правило text-decoration: underline; додасть лінію для всього абзацу, але правило для text-decoration: none; не призведе до змін; весь абзац все одно буде підкреслено.

Нотатка:

В CSS3 використовуйте властивість text-decoration-color щоб змінити колір оздоблення.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

text-decoration: none|underline|overline|line-through|initial|inherit;

Властивість text-decoration може отримувати 13 значень:

none: Звичайний текст. Без задання.
underline: Підкреслений текст.
overline: Лінія над текстом.
line-through: Закреслений текст.
blink: Блимання тексту(не підтримується всіма браузерами)
solid: Суцільна лінія
wavy: Лінія у формі хвилі.
dotted: Лінія крапками.
dashed: Лінія рисочками.
double: Подвійна лінія.
<color>: Значення кольору у будь-якому форматі.
initial: Встановлює властивість у значення без задання
inherit: Вказує на спадковість властивості від свого батьківського елемента.

Значення без задання:	none
Наслідує:	Ні
Анімується:	Так
JavaScript синтаксис:	object. style.textDecoration=»underline»

Переглядачі

Стаціонарні переглядачі
Мобільні переглядачі

Переглядач
text-decoration	1.0	3.0	1.0	1.0	3.5	12.0

Переглядач

text-decoration

1.0

3.0

1.0

3.5

12.0

Переглядач
text-decoration	1. 0	1.0	1.0

Приклади

Приклад 1
Приклад 2
Приклад 3

Різні значення властивості у дії

Приклад використання

Встановлює оздоблення тексту для заголовків першого, друго та третього рівнів.

h2 { 
  text-decoration: overline; 
} 

h3 { 
  text-decoration: line-through; 
} 

h4 { 
  text-decoration: underline; 
}

Додаткові посилання

text-decoration-color

text-shadow

text-decoration-line

text-decoration-style

box-decoration-break

CSS — оформление текста

Учебник CSS
CSS — Дом
CSS — Введение
CSS — синтаксис
CSS — Включение
CSS — Единицы измерения
CSS — Цвета
CSS — Фоны
CSS — Шрифты
CSS — текст
CSS — изображения
CSS — ссылки
CSS — Столы
CSS — Бордюры
CSS — поля
CSS — списки
CSS — заполнение
CSS — Курсоры
CSS — Контуры
CSS — Размер
CSS — полосы прокрутки

Расширенный CSS
CSS — Видимость
CSS — Позиционирование
CSS — Слои
CSS — псевдоклассы
CSS — псевдоэлементы
CSS — @ Правила
CSS — текстовые эффекты

CSS — типы носителей
CSS — выгружаемый носитель
CSS — слуховой носитель
CSS — Печать
CSS — Макеты
CSS — проверки

Учебное пособие по CSS3
CSS3 — Учебник
CSS3 — закругленный угол
CSS3 — изображения границ
CSS3 — Мульти фон
CSS3 — цвет
CSS3 — Градиенты
CSS3 — Тень
CSS3 — текст
CSS3 — веб-шрифт
CSS3 — двумерное преобразование
CSS3 — 3D-преобразование
CSS3 — Анимация
CSS3 — Несколько столбцов
CSS3 — пользовательский интерфейс
CSS3 — Размер коробки

Адаптивный CSS
CSS — адаптивный веб-дизайн

Ссылки CSS
CSS — вопросы и ответы
CSS — Краткое руководство
CSS — Ссылки
CSS — ссылки на цвета
CSS — ссылки на веб-браузер

CSS — веб-безопасные шрифты
CSS — Единицы
CSS — Анимация

Инструменты CSS
CSS — преобразователь PX в EM
CSS — выбор цвета и анимация

Ресурсы CSS
CSS — полезные ресурсы
CSS — Обсуждение

Выбранное чтение
Примечания к экзаменам UPSC IAS
Передовой опыт разработчиков
Вопросы и ответы
Эффективное составление резюме
Вопросы для собеседования с персоналом
Компьютерный глоссарий
Кто есть кто

Предыдущая страница

Следующая страница

Описание

Свойство text-decoration используется для добавления «украшений» к встроенному содержимому.

Возможные значения

нет − Во встроенный текст не следует добавлять украшения.
подчеркивание — Подчеркивание рисуется под встроенным текстом.
надчеркивание — надстрочный текст рисуется надчеркиванием.
сквозной — Линия должна быть проведена через середину встроенного текста.
blink — встроенный текст должен мигать и выключаться, аналогично элементу BLINK, представленному Netscape.

Применяется к

Все элементы HTML.

Синтаксис DOM

object.style.textDecoration = "подчеркивание";

Пример

Ниже приведен пример, демонстрирующий, как украсить текст.

ПРИМЕЧАНИЕ . Свойство Blink работает не во всех браузерах.

Живая демонстрация


   <голова>
   
   <тело>
       style = "text-decoration:underline;"  >
         Это будет подчеркнуто
      
      
       style = "text-decoration:line-through;"  >
         Это будет зачеркнуто. 
      
      
       style = "text-decoration:overline;"  >
         Это будет иметь над линией.
      
      
       style = "украшение текста:мигание;"  >
         Этот текст будет мигать

Это даст следующий результат —

Предыдущая страница Распечатать страницу Следующая страница

css — Оформление текста: нет не работает

спросил 10 лет, 5 месяцев назад

Изменено 3 месяца назад

Просмотрено 171 тысяч раз

Совершенно сбит с толку! Я пытался переписать строку text-decoration: none несколькими способами. Мне также удалось изменить размер текста, нацелившись на него, но код text-decoration: none не возьмет.

Приветствуется помощь.

Код

 .виджет
{
     высота: 320 пикселей;
     ширина: 220 пикселей;
     цвет фона: #e6e6e6;
     положение: родственник;
     переполнение: скрыто;
}


.заглавие
{
     семейство шрифтов: Georgia, Times New Roman, с засечками;
     размер шрифта: 12px;
     цвет: #E6E6E6;
     выравнивание текста: по центру;
     межбуквенный интервал: 1px;
     преобразование текста: верхний регистр;
     цвет фона: #4D4D4D;
     положение: абсолютное;
     сверху: 0;
     отступ: 5px;
     ширина: 100%;
     нижняя граница: 1px;
     высота: 28 пикселей;
     текстовое оформление: нет;
}

Заголовок
{
     текстовое оформление: нет;
}

 
    <дел>
        Подчеркнуто. Почему?

У вас есть блочный элемент (div) внутри встроенного элемента (a).

Это работает в HTML 5, но не в HTML 4. Таким образом, только те браузеры, которые действительно поддерживают HTML 5.

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

Используйте псевдоклассы CSS и присвойте тегу класс, например: