• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Оформления и подчеркивания текста на CSS (Подчеркивание текста под оригинальным стилем CSS)
Оформления и подчеркивания текста на CSS
Kosten
Дата: Четверг, 2018-12-06, 21:29 | Сообщение 1
Администраторы
Сообщений:18864
Награды: 55


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

За это отвечает "text-decoration: underline;" - что каждый веб-разработчик аналогично может запретить или отменить его, а точнее поставить "text-decoration: none; - где после не станет появиться подчеркивание. Также при помощи данного свойства, можно осуществить различные дополнительные к нему, где будет гораздо больше возможностей для управления и оформление текста.

Можно задать несколько значений для свойства.

Например:

Код
a {
  text-decoration: underline overline;
}


Где изначально можно задать цветовую гамму.

Код
a {
  text-decoration-color: #191982;
}


Добавление цветовой палитры в подчеркивание, обычно реализуются при помощи свойства border, а не text-decoration. Где изначально для каждой из границ элемента можно указать индивидуальный дизайн, который будет отличатся в толщине или в гамме цвета

Как пример, это волнистое подчеркивание:

Код
a {
  text-decoration-style: wavy;
}




Из за обновление браузера или поддержки, некоторые примеру могут просто не корректно показывать на вашем браузере.



HTML

Код
<span class="multiple">Несколько текстовых украшений</span>
<span class="color">Различный цвет оформления текста</span>
<span class="dashed">Пунктирный стиль оформления текста</span>
<span class="dotted">Пунктирный стиль оформления текста</span>
<span class="wavy">Волнистый стиль оформления текста</span>


CSS

Код
.multiple {
  text-decoration: underline overline;
}
.color {
  text-decoration-color: #3333e6;
}

.dashed {
  text-decoration-style: dashed;
}
.dotted {
  text-decoration-style: dotted;
}
.wavy {
  text-decoration-style: wavy;
}

span {
  display: block;
  font-size: 32px;
  margin: 18px 0;
  text-align: center;
  text-decoration: underline;
}


Также нужно брать внимание, что некоторые вещи могут меняться с преобразованием или обновлением CSS.

Демонстрация
Прикрепления: 9350513.png(8.0 Kb) · 7273054.png(16.2 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Оформления и подчеркивания текста на CSS (Подчеркивание текста под оригинальным стилем CSS)
  • Страница 1 из 1
  • 1
Поиск: