Как редактировать underline css

Подчеркнутый шрифт css: text-decoration | htmlbook.ru

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

Значения
Объектная модель
Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.

Подчеркнутый текст силами HTML и CSS

Серёжа Сыроежкин

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline). Применяется он следующим образом (нужная часть текста помещается между тегами <u></u>):

Но данный код считается невалидным, поэтому значительно эффективнее и правильнее использовать CSS-стили для декорации текста.

Подчеркнуть текст &#8212; CSS

Как мы уже говорили в статье Зачеркнутый текст, декорации текста задаются при помощи свойства text-decoration. Подчеркнутый текст задается параметром underline:

Подчеркнуть текст с помощью CSS можно не только сплошной линией. Посмотрим, какими вариантами можно подчеркнуть текст:

    &#13;
  • Подчеркнуть текст пунктиром CSS:&#13; &#13; &#13;
  • Подчеркивание точками:&#13; &#13; &#13;
  • Двойная черта:&#13; &#13; &#13;

Как видно из приведенных примеров, управлять стилем подчеркивания можно при помощи свойства border-bottom (нижняя граница). С помощью этого параметра можно задать тип подчеркивания, цвет, толщину.

Смотрите также:

text-decoration | CSS | WebReference

Добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Анимируется text-decoration-line: Нет
text-decoration-style: Нет
text-decoration-color: Да

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз. <радиус>
# Повторять один или больше раз через запятую. <время>#

Значения

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

Объектная модель

Объект.style.textDecoration

Примечание

Линия, полученная с помощью значения line-through, в IE7 располагается выше чем в других браузерах; в IE8 эта ошибка исправлена.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor&#8217;s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  • — свойство браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты

Жирный или подчеркнутый текст в CSS и HTML

Заполняя свой сайт, мы обязательно сталкиваемся с необходимостью форматирования контента, для того, что бы придать ему более наглядный вид или обратить внимание читателя на какие-то основные моменты.

В сегодняшней статье мы рассмотрим с вами как сделать подчеркнутый и жирный текст CSS-стилями и HTML-тегами. Хорошо, когда как в WordPress есть визуальный редактор и можно легко придать любому фрагменту необходимый стиль написания.

Навигация по статье:

Но бывают случаи, когда даже для сайта, сделанного с помощью CMS, приходится задавать форматирование CSS-стилями или HTML-тегами. В WordPress это касается заполнения виджетов «Текст», например, или редактирования текста в отдельных плагинах, которые не поддерживают визуальный редактор.

Как сделать интернет-магазин?

Как сделать подчеркнутый текст CSS-стилями

Чтобы как-то выделить фрагмент, и сделать его более заметным, мы можем сделать подчеркнутый текст css-стилями, используя свойство text-decoration:underline;

<p>Подчеркнутый текст CSS</p>

Подчеркнутый текст CSS

Так же это CSS-свойство имеет и другие интересные значения:

  • blink — позволяет сделать слово или предложение мерцающим,
  • line-through — перечёркивает слово или предложение,
  • overline — позволяет провести линию над словом.

Это свойство так же используется для стилизации отображения ссылок по умолчанию. Поэтому, если вы хотите что бы ссылки на страницах вашего сайта отображались без подчеркивания, вам нужно задать для нее text-decoration: none;

Подчеркнутый текст HTML-тегами

Если вы столкнулись с необходимостью сделать подчеркивание в единичном случае, то конечно писать стили для этого одного фрагмента не целесообразно. В таких ситуациях вы можете сделать подчеркнутый текст средствами HTML. Для этого вам всего лишь нужно поместить нужный фрагмент между тегами

<div> Делаем <u>подчеркнутый текст HTML-тегом</u>. </div>

Делаем <u>подчеркнутый текст HTML-тегом</u>.

Делаем подчеркнутый текст HTML-тегом.

Как сделать жирный текст CSS-стилями

Для выделения жирным в CSS предусмотрено свойство font-weight, которое в свою очередь имеет достаточно большое количество принимаемых значений, используя которые, вы можете подобрать для своей ситуации наиболее подходящий жирный текст css-стилями.

Итак, свойство font-weight может принимать фиксированные значения:

  • bold – жирный
  • bolder – еще жирнее
  • normal – начальный вид
  • lighter – делает буквы тоньше, по сравнению с normal

Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.

<div> <p>Жирный</p> <p>Еще жирнее</p> <p>Совсем не жирный текст CSS</p> <p>Очень жирный текст CSS</p> </div>

<p>Совсем не жирный текст CSS</p>

<p>Очень жирный текст CSS</p>

Совсем не жирный текст CSS

Очень жирный текст CSS

Жирный текст HTML-тегами

Так же как и в ситуации с подчеркиванием, если вам нужно в единичных случаях выделить одно или несколько слов, можно использовать для этого специальные HTML-теги, такие как <b>…</b>, или его аналог <strong>… </strong>.

Делаем <b>жирный текст</b> с помощью <strong> html-тегов </strong>.

Делаем <b>жирный текст</b> с помощью <strong> html-тегов </strong>.

Делаем жирный текст с помощью html-тегов .

Как научиться продвигать сайты?

Если у вас возникнут вопросы или вы захотите поделиться своими приемами форматирования, вы можете это сделать в комментариях. Если эта статья вам понравилась и была для вас полезной, не забудьте подписаться на мою рассылку и поделиться ссылкой на статью в социальных сетях.

А на сегодня у меня все! Успешного вам форматирования текста! До встречи в следующих статьях!

С уважением Юлия Гусарь

text-decoration &#8212; подчёркнутый и зачёркнутый текст

Поддержка браузерами

&#13; &#13; &#13; &#13; &#13; &#13; &#13; &#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

12.0+ 3.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство text-decoration позволяет добавить к тексту такие элементы декора как подчёркивание, надчёркивание и перечёркивание (то есть сделать зачёркнутый текст).

Свойство text-decoration может принимать одно значение или больше. Чтобы задать сразу несколько значений, их следует разделить пробелами.

Самый часто используемый декор для текста &#8212; это подчёркивание. Подчёркнутый текст задаётся значением underline :

Если вам, наоборот, нужно убрать подчёркивание, например убрать подчеркивание ссылки, заданное по умолчанию, то нужно воспользоваться значением none :

Часто требуется не просто убрать подчёркивание ссылки в обычном состоянии, а сделать так, чтобы ссылки были подчёркнуты при наведении на них курсора мыши. Чтобы сделать подчёркивание ссылки при наведении, надо воспользоваться псевдо-классом :hover:

К сожалению цвет линий подчёркивания, надчёркивания и перечёркивания, установленных свойством text-decoration , будет совпадать с цветом текста, для которого эти линии используются. Чтобы иметь возможность изменять цвет, толщину и стиль подчёркивания или надчёркивания надо воспользоваться CSS свойствами border-top (создаёт линии над элементом) и border-bottom (создаёт линию под элементом).

Примечание: чтобы добавить к тексту подчёркивание или перечёркивание не обязательно использовать CSS, этих же эффектов можно добиться с помощью HTML тегов: <u> (подчёркнутый текст) и <del> (зачёркнутый текст).

&#13; &#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

Значение по умолчанию: none
Применяется: ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется: нет
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.textDecoration=&#187;overline&#187;

Синтаксис

Значения свойства

&#13; &#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

&#13;

Значение Описание
none Оставляет текст без изменений.
underline Определяет горизонтальную линию под текстом.
overline Определяет горизонтальную линию над текстом.
line-through Определяет линию перечеркивающую текст.
inherit Указывает, что значение наследуется от родительского элемента.
Пример

Измените значение свойства для просмотра результата.

Подчёркнутый текст (свойство text-decoration) | CSS примеры

Отменить подчёркивание у ссылки

Часто применяется при создании ссылок в виде кнопок или в виде пунктов меню, поскольку текстовые ссылки в браузерах подчёркиваются по умолчанию (выделение только цветом создаёт неудобство дальтоникам).&#13; &#13; &#13;

Ссылка подчёркивается при наведении

Пунктирное подчёркивание

Сделать линию над и под текстом

text-decoration-color

Свойство text-decoration-color не наследуется, применяется ко всем элементам

ВНИМАНИЕ! Нижестоящие свойства имеют плохую поддержку браузерами. Свойства text-underline-offset и text-decoration-width не реализованы вовсе и потому пока не рассмотрены в статье.&#13; &#13; &#13;

Пропуск выносных частей символов в подчеркиваемом тексте в Google Chrome
Подчёркивание без пропусков выносных частей символов в Safari

Разница text-decoration и border

&#13;

&#13; &#13;
Нижнее подчёркивание, сделанное text-decoration: underline; &#13; Нижнее подчёркивание, сделанное border-bottom: 1px solid; &#13;

&#13; &#13;

Свойство text-decoration подходит лучше для подчёркивания многострочного текста (при уменьшении экрана длинное слово также переходит на следующую строку при отзывчивой вёрстке). Свойство border активно использовали, когда не поддерживались свойства text-decoration-line , text-decoration-style и text-decoration-color .&#13;

Свойство text-decoration | CSS справочник

Определение и применение

CSS свойство text-decoration добавляет декорирование текста (подчеркивание, перечеркивание, линия над текстом).

Кроме того в CSS3 свойство text-decoration является короткой записью(сокращенным свойством) для следующих свойств, добавленных в CSS3:

Обращаю Ваше внимание, что в настоящее время вышеуказанные свойства (добавленные в CSS3) имеют очень ограниченную поддержку и не рекомендованы к использованию.

Поддержка браузерами

Значения свойства

Значение Описание
none Определяет нормальный текст (без декорирования). Это значение по умолчанию
underline Определяет линию под текстом.
overline Определяет линию над текстом.
line-through Определяет линию, проходящую через текст (перечеркивание).
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

CSS текстовое оформление свойство

Пример

Установить различные декорации текста для элементов

h2 <
text-decor: overline;
>

h3 <
текстовое оформление: сквозное;
>

h4 <
текстовое оформление: подчеркивание;
>

h5 <
текстовое оформление: подчеркивание Overline;
>

Ниже приведены примеры &#171;Попробуйте сами&#187;.

Определение и использование

Свойство text-украшение определяет украшение, добавляемое к тексту, и это стенография Недвижимость для:

  • строка для оформления текста (обязательно)
  • цвет текста украшения
  • стиль текстовой отделки

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Недвижимость
текстовое оформление 1.0 3,0 1,0 1,0 3,5

Синтаксис CSS

текстовое оформление: текстовое оформление-линия текстовое оформление-цвет стиль оформления текста | начальный | наследовать;

Значения недвижимости

Дополнительные примеры

Пример

Добавить текст оформления:

h2 <
текстовое оформление: подчеркивание, подчеркивание, пунктир, красный;
>

h3 <
текстовое оформление: подчеркнутое волнистое подчеркивание синий;
>

Связанные страницы

Учебник по CSS: CSS Text

HTML DOM ссылка: свойство textDecoration

Пример

Набор различных типов текстовых декораций:

дива <
строка текста-декорации: наложение;
>

div.b <
строка текста-декорации: подчеркивание;
>

div.c <
текст-оформление-строка: сквозной;
>

div.d <
text-украшение-строка: подчеркивание подчеркивание;
>

Определение и использование

Свойство text-ornament-line устанавливает тип используемого текстового оформления (например, подчеркивание, подчеркивание, прямая)

Подсказка: Также посмотрите на свойство text-украшение, которое является сокращенным свойством для текста-декорации-строки, текста-декорирования-стиля и текст-отделка цвета.

Примечание: Вы также можете объединить несколько значений, например подчеркивание и , для отображения строк как под, так и над текстом.

Значение по умолчанию: нет
Наследуется: нет
Анимационный: нет.Читать о Анимация
Версия: CSS3
Синтаксис JavaScript: объект .style.textDecorationLine = &#171;overline&#187; Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, сопровождаемые -moz-, указывают первую версию, которая работала с префиксом.

Недвижимость
линия для оформления текста 57,0 Не поддерживается 36,0
6,0 -moz-
7.1 -webkit- 44,0

Синтаксис CSS

text-художественное оформление-строка: нет | подчеркивание | зачеркнуто | сквозное | начальное | наследовать;

Значения недвижимости

Значение Описание Сыграйте
нет Значение по умолчанию.Определяет отсутствие строки для текста украшения Играть »
подчеркивание Указывает, что строка будет отображаться под текстом Играть »
Overline Указывает, что строка будет отображаться над текстом Играть »
&#8212; через Указывает, что строка будет отображаться через текст Играть »
начальный Устанавливает для этого свойства значение по умолчанию.Читать о начальных Играть »
наследуют Унаследует это свойство от родительского элемента. Читать о наследовать

Связанные страницы

Учебник по CSS: CSS Text

HTML DOM ссылка: свойство textDecorationLine

text-украшение &#8212; веб-технология для разработчиков

CSS-свойство text-художественное оформление задает внешний вид декоративных линий в тексте. Это сокращение для текста-декорации-строки , текста-декорации-цвета , текста-декорации-стиля и более нового свойства текста-декорации-толщины .

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на получение.

Текстовые декорации прорисовываются через текстовые элементы-потомки. Это означает, что если элемент определяет текстовое оформление, то дочерний элемент не может удалить оформление. Например, в разметке

Этот текст содержит выделенные слова . , правило стиля p приведет к подчеркиванию всего абзаца. Правило стиля em не вызовет никаких изменений; весь абзац все еще будет подчеркнут.Однако правило em вызовет вторую декорацию для &#171;некоторых выделенных слов&#187;.

Синтаксис

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

Значения
Формальный синтаксис

Примеры

Технические характеристики

Совместимость браузера

Обновление данных о совместимости GitHub

Настольный ПК Мобильный
Chrome Edge Firefox Internet Explorer Opera Safari Android WebView Chrome для Android Firefox для Android Opera для Android Safari на iOS Интернет Samsung
текстовое оформление Chrome Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 3 Opera Полная поддержка 3.5 Safari Полная поддержка 1 WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Opera Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1,0
мигает Chrome Нет поддержки № Край Нет поддержки № Firefox Нет поддержки 1 — 23 IE Нет поддержки № Opera Нет поддержки 4 — 15 Safari Нет поддержки № WebView Android Нет поддержки № Chrome Android Нет поддержки № Firefox Android Нет поддержки 4 — 23 Opera Android Нет поддержки 10.1 — 14 Safari iOS Нет поддержки № Samsung Интернет Android Нет поддержки №
Сокращения Хром Полная поддержка 57 Край Полная поддержка 79 Firefox Полная поддержка 36 Полная поддержка 36 Частичная поддержка 6 IE Нет поддержки № Opera Полная поддержка 44 Safari Полная поддержка 8 Полная поддержка 8 с префиксом Реализуется с префиксом поставщика: -webkit- WebView Android Полная поддержка 57 Chrome Android Полная поддержка 57 Firefox Android Полная поддержка 36 Полная поддержка 36 Частичная поддержка 6 Opera Android Полная поддержка 43 Safari iOS Полная поддержка 8 Полная поддержка 8 с префиксом Реализовано с префиксом поставщика: -webkit- Samsung Интернет Android Полная поддержка 7.0
текстовое оформление-толщина включено в стенографию Chrome Нет поддержки № Край Нет поддержки № Firefox Полная поддержка 70 IE Нет поддержки № Opera Нет поддержки № Safari Нет поддержки № WebView Android Нет поддержки № Chrome Android Нет поддержки № Firefox Android Нет поддержки № Opera Android Нет поддержки № Safari iOS Нет поддержки № Samsung Интернет Android Нет поддержки №
Легенда

См. Также

CSS-стиль текста-декорирование

Пример

Набор различных типов стилей оформления текста:

дива <
текстовая отделка: подчеркивание;
стиль оформления текста: цельный;
>

div.b <
текстовая отделка: подчеркивание;
стиль оформления текста: волнистый;
>

div.c <
текстовая отделка: подчеркивание;
стиль оформления текста: двойной;
>

дел.d <
строка текста украшения: подчеркивание подчеркивание;
стиль оформления текста: волнистый;
>

Определение и использование

Свойство text-украшение-style устанавливает стиль оформления текста (как сплошной, волнистый, пунктирный, пунктирный, двойной).

Подсказка: Также посмотрите на свойство text-украшение, которое является сокращенным свойством для текста-декорации-строки, текста-декорирования-стиля и текст-отделка цвета.

Значение по умолчанию: твердый
Наследуется: нет
Анимационный: нет. Читайте о анимации
Версия: CSS3
Синтаксис JavaScript: объект .style.textDecorationStyle = "волнистый" Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, сопровождаемые -moz-, указывают первую версию, которая работала с префиксом.

Недвижимость
стиль текста-украшения 57.0 Не поддерживается 36,0
6,0 -moz-
12,1 44,0

Синтаксис CSS

стиль оформления текста: сплошная | двойная | пунктирная | пунктирная | волнистая | начальная | наследовать;

Подчеркнутый текст тег html: Тег &#8212; подчёркнутый текст

Элемент <u> (от англ. &#171;underline&#187; ‒ «подчёркивание») содержит в себе текст, который должен стилистически отличаться от обычного текста, например, слова с орфографическими ошибками или текст на другом языке. В некоторых случаях подчеркивание имеет смысловое значение, например, подчеркивание собственных имён в китайском языке, или указание неправильно написанного слова при проверке орфографии.

Примечание: Подчеркнутый текст легко спутать со ссылкой, и поэтому в целом следует избегать его использования, за исключением некоторых случаев.

Внимание: Этот тег был устаревшим в HTML 4 и XHTML 1, но затем вновь введен в HTML5 с другой семантикой. Если вы хотите подчеркнуть текст несемантическим образом, используйте соответствующие стили CSS.

Синтаксис

Закрывающий тег

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <u> со следующими значениями CSS по умолчанию:

Различия между HTML 4.01 и HTML5

В HTML 4.01 тег <u> считается устаревшим (определяет подчеркнутый текст).
В спецификацию HTML5 он был опять добавлен, но теперь тег <u> предназначен для определения текста, который должен стилистически отличаться от обычного текста, например, для определения слов с ошибками или собственные имена на китайском языке.

Пример использования:

Спецификации

Поддержка браузерами

Как сделать текст жирным и привлечь к нему внимание:
Важный и жирный текст

Как сделать акцент на фрагменте текста:
Акцент и курсив

Как отобразить текст в нижнем или верхнем индексе:
Форматирование текста

Учебник HTML

HTML уроки: HTML Форматирование

HTML тег

В спецификации HTML 4. 01 тег <u> использовался для определения подчеркнутого текста. В HTML5 в тег <u> заключается текст, который стилистически отличается от остального текста. Это могут быть слова с орфографическими ошибками, слова, которые должны быть подчеркнуты по правилам языка (к примеру, в китайском языке имена собственные подчеркиваются) и т.д.

Содержимое тега <u> в браузерах отображается как подчёркнутый текст.

Использование тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>. Для подчеркивания текста лучше использовать тег <ins> или CSS свойствоtext-decoration со значением underline.

Синтаксис ¶

Содержимое элемента заключается между открывающим (<u>) и закрывающим (</u>) тегами.

Пример¶
Результат¶

Смотрим пример с свойством CSS text-decoration.

Пример¶
Результат¶

Атрибуты¶

Тег <u> поддерживает также глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <u> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <u>:
Цвет текста внутри тега <u>:
Стили форматирования текста для тега <u>:
Другие свойства для тега <u>:

HTML-теги для текста

Всем доброго времени суток.

Здесь сразу обращаем внимание, что появилось два новых тега <meta> и <p>. Строка <meta charset=&#187;utf-8&#8243;> задает кодировку нашей страницы (в данном случае это utf-8). Это нужно для того, чтобы открыв документ, мы обнаружили в нем тот текст, который набирали, а не иероглифы. Обращаю ваше внимание на то, что кодировка документа также должна быть в utf-8. Для этого необходимо в редакторе Notepad++ сверху выбрать &#171;Кодировки&#187; — &#171;Кодировать в UTF-8 (без BOM)&#187;. Тег <p> — это тег абзаца.
Открыв данную страницу в браузере, мы увидим, что вывелся наш текст без форматирования внешнего вида.
Давайте теперь разберемся как сделать текст жирным, курсивом, подчеркнутым, также разберем их комбинацию.

&#8212; текст, заключенный между этими тегами будет жирным.

&#8212; текст, заключенный между этими тегами будет курсивным.

&#8212; текст, заключенный между этими тегами будет подчеркнутым.

Давайте изменим нашу страницу, добавив следующие строки:

Давайте теперь сделаем текст одновременно и жирным, и курсивным:

Давайте теперь напишем следующий код и посмотрим, что получится:

Разница сразу в глаза не бросается, но здесь мы закрываем тег <b>, не закрыв тег <i>, т. е. не соблюдаем принцип вложенности тегов. Современные браузеры выведут информацию нормально, но старые браузеры нет. Поэтому всегда соблюдайте принцип вложенности тегов.

Давайте теперь разберем, как изменить цвет, размер и шрифт текста на странице. Добавим следующий код:

Тег <font> и его атрибуты color и size как раз и отвечают за цвет текста и его размер.

В данной статье вы узнали про HTML-теги для текста.

Настало время для домашнего задания: попробуйте поиграть с различными вариантами стилизации текста на странице. Также найдите в интернете другие атрибуты у тега font.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Двойной тег подчеркивания? &#8212; CodeRoad

Я хочу сделать некоторый текст дважды подчеркнутым в HTML.

У меня внизу две строчки вместо одной. Есть ли для этого определенный тег или мне придется сделать это в css?

html css
Поделиться Источник Kevril 26 марта 2013 в 17:26

9 ответов
  • wysihtml5 &#8212; как отключить тег подчеркивания

У меня есть небольшая проблема с wysihtml5 на моем сайте. Я хочу разрешить только несколько тегов html, и если я удалю подчеркивание из правил парсера и даже команду подчеркивания из библиотеки wysihtml5, я все равно смогу нажать CTRL(command)+U, чтобы сделать выделенный текст подчеркнутым. Что я&#8230;

Я искал, чтобы использовать ползунок Jssor, и, просматривая код, я нашел тег <span u=arrowleft&#8230;> (который можно увидеть в этом другом вопросе: как переместить промежуток в другое положение в DIV ) Тег <u> используется для обозначения подчеркивания, но я никогда не видел тег u= &#8230;.

Вы можете попробовать добавить это:

Примечание: ширина должна быть 3px или больше, поскольку она представляет собой общую ширину, а не ширину каждой границы. Когда вы увеличиваете измерение, ширина линий и пространство могут быть равны или не равны в зависимости от делимости определенного измерения на 3. Остаток от 1 и 1 добавляется к ширине пространства; остаток от 2 приведет к тому, что 1 будет добавлен к каждой строке.

Поделиться roman 26 марта 2013 в 17:29

Используйте границу и подчеркивание:

Вот рабочий fiddle .

Поделиться James Hill 26 марта 2013 в 17:29

Самый простой способ-установить нижнюю границу типа double в CSS. Он должен быть шириной не менее 3 пикселей, чтобы создать минимальную двойную границу (две границы 1px с расстоянием между ними 1px).

Детали зависят от markup, от желаемой ширины и цвета двойной линии, а также от того, должна ли она пересекать доступную ширину. Markup, как и <h2><u><i> website </i></u></h2> , вероятно, не должно быть серьезным. С помощью простого markup <h2>foobar</h2> можно получить минимальную двойную границу поперек страницы , используя

Если вы хотите иметь только текст заголовка “underlined”, самый простой способ-иметь внутренний код markup, например <h2><span>foobar</span></h2> и CSS

Поделиться Jukka K. Korpela 26 марта 2013 в 18:33

    Длинный тег подчеркивания, а не <u>

Как мне добиться серого подчеркивания в приветственной части сайта? Я забыл тег, он в основном создает линию на всем протяжении page/div/table, что бы вы ни хотели. Сайт(где написано Добро пожаловать в CLAN ):

У меня есть метка в приложении JavaFX, к которой мне тоже нужно применить двойное подчеркивание. Я знаю, что это невозможно сделать с базовым свойством, но вместо этого я применил к метке следующий css, который дает ей effect двойного подчеркивания .double-underline < -fx-border-color: #FFFFFF;&#8230;

К вашему сведению, на данный момент следующее возможно в Firefox или в Safari с использованием префикса поставщика:

Поделиться Fabien Snauwaert 30 марта 2015 в 18:16

guys/gals, это тоже работает, но больше похоже на традиционное двойное подчеркивание.

Поделиться Tyler Wright student 09 октября 2018 в 13:48

Почему бы просто не сделать свой собственный &#171;tag&#187;?

Поделиться Kim Jensen 12 сентября 2018 в 10:21

используйте следующие http://jsfiddle.net/cKNP4/

Придайте следующий стиль любому контейнеру HTML:
border-top-style:none;border-right-style:none;border-bottom-style:double;border-left-style:none;border-width: 2px solid black;

Поделиться Unknown 03 февраля 2014 в 14:26

Вот мое решение (стилус):

Обратите внимание, что ширина должна быть жестко закодирована (в данном случае 5.7em . Если это не является желаемым результатом, вы также можете использовать метод border-bottom , упомянутый выше.

Поделиться user1429980 19 сентября 2014 в 20:39

Это сработает, только если вы хотите дважды подчеркнуть его в HTML.

Поделиться Aqsa Shahzadi 17 октября 2019 в 09:21

Похожие вопросы:

Экранирование символа двойной кавычки в XML

Есть ли escape-символ для двойной кавычки в xml? Я хочу написать тег типа: <parameter name=Quote = > но если я ставлю , то это означает, что строка закончилась. Мне нужно что-то вроде этого&#8230;

Как удалить двойной тег html <strong> из строки в C#

Я хочу сделать поиск на моем сайте ASP.NET MVC 3, поэтому для поиска я должен найти совпадающие шаблоны и в этих словах заменить совпадающую часть на ту же часть жирным шрифтом(я использую этот тег&#8230;

Где включить Шаблоны подчеркивания?

Какое самое лучшее место в документе для включения шаблонов подчеркивания Javascript? До сих пор я видел шаблоны, включенные в тег <head> или <body> . Что более уместно? Есть ли&#8230;

wysihtml5 &#8212; как отключить тег подчеркивания

У меня есть небольшая проблема с wysihtml5 на моем сайте. Я хочу разрешить только несколько тегов html, и если я удалю подчеркивание из правил парсера и даже команду подчеркивания из библиотеки&#8230;

Это все еще нестрочный тег или он означает что-то еще?

Я искал, чтобы использовать ползунок Jssor, и, просматривая код, я нашел тег <span u=arrowleft. ..> (который можно увидеть в этом другом вопросе: как переместить промежуток в другое положение в&#8230;

Длинный тег подчеркивания, а не <u>

Как мне добиться серого подчеркивания в приветственной части сайта? Я забыл тег, он в основном создает линию на всем протяжении page/div/table, что бы вы ни хотели. Сайт(где написано Добро&#8230;

JavaFX Текст Двойной Интервал Подчеркивания

У меня есть метка в приложении JavaFX, к которой мне тоже нужно применить двойное подчеркивание. Я знаю, что это невозможно сделать с базовым свойством, но вместо этого я применил к метке следующий&#8230;

Как сделать тег подчеркивания совместимым со всеми браузерами

Я использую атрибуты управления html в файле xml, как показано ниже <p> The quick <u><a href=http://querty.com/ target=_blank></a>brown fox jumps </u> over the lazy&#8230;

VBS Regex получение подчеркивания из строки

У меня есть простой результат для обнаружения части имени файла. Мои файлы имеют свое общее имя (FILENAME), второе имя (SECONDNAME#) и последний тег, все ссылки подчеркнуты. Я ищу второе имя,&#8230;

Какой тег HTML5 использовать для подчеркивания и обсуждения слова?

Когда я хочу подчеркнуть или обсудить слово, которое связано с компьютерным кодом внутри блока обычного текста, я использую тег <code> . Например: Если вы установите переменную foo в значение&#8230;

HTML тег u | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 01.03.2009

Тег <u> (англ. underlined — подчеркнутый) — тег-контейнер, определяет подчеркнутый текст.
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 (Strict, Transmissional, Frameset) | 1.1

Синтаксис
Атрибуты

Основные Вспомогательные События

  • ltr — слева направо
  • rtl — справа налево
Пример

Согласно спецификации HTML 4. 01 данный тег использовать <u>не рекомендуется!</u>

Рекомендации по использованию
  • закрывающий тег обязателен (</u>)
  • может содержать CDATA и строчные элементы
  • обязательных атрибутов нет
  • при использовании XHTML 1.0 Strict, XHTML 1.1, HTML 4.01 Strict не пройдет валидацию
  • тег <u> не рекомендуется к применению, используйте CSS
  • аналог CSS — text-decoration: underline (по возможности избегайте использования дополнительных тегов)

Обратите внимание! Есть вероятность, что пользователь, увидев подчеркнутый текст, воспримет его, как нерабочую ссылку.

Твой код:
Результат:

Разработка веб-приложений: учебное пособие

Язык гипертекстовой разметки

2.4. Форматирование текста

Для форматирования текста HTML-документов предусмотрена целая группа тегов, которую можно условно разделить на теги логического и физического форматирования.

Теги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов, такие, например, как программный код (тег <code>), цитата (тег <сitе>), аббревиатура (тег <abbr>) и т. д. Структурная разметке не влияет на конкретное экранное представление фрагмента браузером. Поэтому такая разметка и называется логической. Фрагменты с логическим форматированием браузеры отображают на экране определенным образом, заданным по умолчанию.

Теги физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера (согласно предпочтениям автора документа).

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

Хотя использование тегов физического форматирования не осуждается в HTML и может свободно использоваться, однако применение таблицей стилей предоставляет значительно больше возможностей по управлению начертанием текста.

Теги логического форматирования текста.

&#13; Обозначение аббревиатуры. &#13; Для обозначения текста как аббревиатуру используются теги <abbr>. Данный тег имеет атрибут title, в качестве значения которого дается полная форма записи аббревиатуры, что позволяет понимать ее тем людям, которые с ней не знакомы. Браузеры при наведении курсора на текст, размеченный тегом <abbr>, будут выдавать полное наименование в виде появляющейся подсказки. &#13; Обозначение цитат. &#13; Тег <сitе> используется для обозначения ссылки на источник, например названий книги и статьи. Браузерами такой текст обычно выводится курсивом.
&#13; Тег <q> отмечает короткие цитаты в строке текста. Содержимое кон-тейнера, как правило, отображается в браузере в кавычках.
&#13; Для выделения длинных цитат из основного текста существует тег <blockquote>. Он является контейнером и может содержать другие теги форматирования. Текст, размеченный тегом <blockquote>, при отображении отделяется от основного текста пустыми строчками и, как правило, выводится с небольшим отступом вправо.&#13; &#13; Обозначение определений. &#13; Для выделения текстовый фрагмент как определение используется тег <dfn>. Например, этим тегом можно отметить какой-либо термин, когда он встречается в тексте в первый раз. Отображается по умолчанию курсивом. &#13; Выделение важных фрагментов. &#13; Для выделения важных фрагментов текста используются теги <em> и <strong>. Браузеры обычно отображают текст, выделенный с помощью тега <em>, курсивом, а с помощью тега <strong> – полужирным шрифтом. Тегом <strong> обычно размечают более важные фрагменты текста, чем те, что размечены тегом <em>.
&#13; В HTML 5 ввели тег <mark>, который выделяет информацию, особенно важную для читателя. Такой текст ничем не отличается от обычного, но его вид может быть изменен с помощью таблиц стилей.&#13; &#13; Обозначение вставок. &#13; Для обозначения текста как вставка используется тег <ins>. Этот элемент полезно использовать для отметки изменений, вносимых в документ. Текст, помеченный тегом <ins>, обычно отображается подчеркнутым. &#13; Обозначение удаленного текста. &#13; Для обозначения фрагмента текста как удаленный используют тег <del>. Этот элемент полезно использовать для отметки изменений, вносимых в документ. Текст, помеченный тегом <del>, обычно отображается перечеркнутым. &#13; Обозначение элементов программ. &#13; Для обозначения текста как небольшого фрагмента программного кода используется тег <code>. Как правило, текст отображается моноширинным шрифтом.
&#13; Тег <samp> используется для обозначения текста, выдаваемого программой (листинг). Браузеры обычно отображают текст в контейнере <samp> с помощью моноширинного шрифта.
&#13; Обозначение в тексте переменной величины или аргумента программы осуществляется с помощью тега <var>. Обычно такой текст отображается в браузере курсивом.&#13; &#13; Обозначение вводимого с клавиатуры текста. &#13; Тег <kbd> используется для обозначения текста, вводимого пользова-телем с клавиатуры. В браузере такой текст, как правило, отображается моноширинным шрифтом. &#13;

Листинг 1. Пример логического форматирования текста.

&#13; <!DOCTYPE html>
<html>
<head>
<title>Логическое форматирование текста</title>
</head>
<body>
<p>В книге <cite>Изучаем HTML и CSS</cite> описывается язык <abbr title="HyperText Markup Language – язык гипертекстовой разметки">HTML</abbr> <del>4. 01</del> 5</p>
<blockquote>
Для того чтобы создать веб-страницу, необходимо изучить основы HTML. HTML – это не язык программирования и использование его гораздо легче, чем писать программы.
</blockquote>
<q>Книга рассчитана на широкой круг читателей</q><br>
<p>Веб-страницы можно создавать <em>вручную с помощью HTML</em>, при этом ввод HTML-кода выполняется в <strong>любом текстовом редакторе</strong></p> <p><dfn>Notepad</dfn> – это простейший текстовый редактор.</p>
</body>
</html>&#13; &#13;

Показать результат листинга 1

Теги физического форматирования текста.

Теги физического форматирования включены в спецификацию HTML 5 и получили обновленные семантические определения, однако если вы хотите только изменить стиль шрифта, более подходящим решением будет применить таблицу стилей. Оставьте эти элементы для тех случаев, когда они семантически уместны.

&#13; Тег <b> &#13; используется, что зрительно привлечь внимание, например, к ключевым словам, такой текст отображается полужирным шрифтом. &#13; Тег <i> &#13; альтернативное отображение текста, отображается в браузере курсивом. &#13; Тег <u> &#13; отображает текст подчеркнутым. &#13; Тег <s> &#13; неверный текст, отображается в браузере перечеркнутым горизонтальной линией. &#13; Тег <small> &#13; мелкий шрифт, выводит текст шрифтом меньшего размера, чем непомеченная часть текста. &#13; Тег <sub> &#13; нижний индекс. Сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. &#13; Тег <sup> &#13; верхний индекс. Сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. &#13;

Теги <sub> и <sup> удобно использовать для математических индексов.

Теги форматирования могут быть вложенными друг в друга. При этом нужно внимательно следить, чтобы один контейнер находился целиком в другом контейнере.

Листинг 2. Пример физического форматирования текста.

Показать результат листинга 2

Разделение на абзацы.

Любой текст имеет определенную структуру. Элементами такой структуры являются заголовки, подзаголовки, таблицы, абзацы и др.

Одним из первых правил составления практически любых документов является разбиение его текста на отдельные абзацы, выражающие законченную мысль. HTML-документы не являются исключением из этого правила. При создании документов с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа перевода строки. Большинство редакторов реализует это при нажатии клавиши Enter. В HTML-документах символы перевода строки не приводят к образованию нового абзаца.

HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Поскольку символы перевода строки оригинального документа игнорируются, то текст, отлично смотревшийся в окне редактора автора документа, может превратиться в неудобочитаемый текст в окне программы просмотра.

Избежать этой неприятности позволяет применение специального тега разделения на абзацы <p>. Перед началом каждого абзаца текста следует поместить тег <р>, хотя закрывающий тег </p> не обязателен, все равно, его лучше использовать. Браузеры обычно отделяют абзацы друг от друга пустой строкой.

Тег <р> может задаваться с атрибутом горизонтального выравнивания align, которые может принимать следующие значения:

  • left – выравнивание текста по левой границе окна браузера; &#13;
  • center – выравнивание по центру окна браузера; &#13;
  • right – выравнивание по правой границе окна браузера; &#13;
  • justify – выравнивание по ширине (по двум сторонам). &#13;

По умолчанию выполняется выравнивание по левому краю.

Перевод строки.

При отображении текстовых документов в браузере место переноса строки в пределах абзаца определяется автоматически в зависимости от размера шрифтов и размера окна просмотра. Перенос строки может осуществляться только по символам-разделителям слов (например, пробелам). Иногда в документах требуется задать принудительный перевод строки, реализующийся независимо от параметров настроек браузера. Для этого служит тег принудительного перевода строки <br>, который не имеет соответствующего закрывающего тега. Включение тега <br> в текст документа обеспечит размещение последующего текста с начала новой строки.

В отличие от тега абзаца <p> при использовании тега <br> не будет образована пустая строка.

Для указания возможного места переноса можно использовать, так называемый, &#171;мягкий&#187; перевод строки, т.е. перевода строки будет выполнено только при необходимости. Для этого существует тег <wbr>, который так же, как и тег <br>, не нуждается в закрывающем теге.

Заголовки внутри HTML-документа.

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

Для разметки заголовков используются теги <h2>, <h3>, <h4>, <h5>, <h5> и <h6>. Эти теги требуют соответствующего закрывающего тега. Как правило, чем выше уровень заголовка, тем больше информации для читателя содержит этот раздел. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h2>,&#8230;,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него осуществляется вставка пустой строки.

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

Теги заголовков могут задаваться с атрибутом горизонтального выравнивания align, который может принимать следующие значения:

  • right – позиционирование заголовка по правой границе документа; &#13;
  • left – позиционирование заголовка по левой границе документа; &#13;
  • center – позиционирование заголовка по центру документа. &#13;

По умолчанию заголовки выравниваются по левому краю страницы.

Горизонтальные линии.

Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы.

Тег <hr> позволяет провести горизонтальную линию в окне браузера. Этот тег не является контейнером, поэтому не требует закрывающего тега. До и после линии автоматически вставляется пустая строка. Тег <hr> может иметь следующие атрибуты:

  • align – выравнивание линии, может принимать значения left, center, right; &#13;
  • color – указывает цвет линии; &#13;
  • noshade – рисует линию без трехмерных эффектов; &#13;
  • size – устанавливает толщину линии в пикселях; &#13;
  • width – устанавливает длину линии, указывается в пикселях или процентах от ширины окна браузера. &#13;
Использование предварительно отформатированного текста.

В HTML-документах для разбивки текста по абзацам и обеспечения при-нудительного перевода строки следует пользоваться специальными тегами. Однако бывают случаи, когда в HTML-документ необходимо включить текст, уже имеющий форматирование, выполненное традиционным способом при помощи символов перевода строки, необходимого количества пробелов, символов табуляции и т. д. Для решения таких задач предусмотрен специальный тег-контейнер <pre>, определяющий предварительно форматированный (преформатированный) текст.

Текст, размеченный тегом <pre>, будет отображаться в таком виде, как он выглядит в обычном текстовом редакторе. Для отображения всегда будет использоваться моноширинный шрифт.

Текст внутри контейнера <pre> может содержать элементы форматирования уровня текста, кроме следующих: <img>, <object>, <small>, <sub> и <sup>. Недопустимо внутри преформатированного текста задавать элементы форматирования уровня блока, например, теги заголовков. Тег абзаца по логике вещей также не должен встречаться внутри преформатированного текста, однако если встречается, то будет реализовывать переход на новую строку (без образования пустой).

Форматирование текста тегами псевдо-HTML &#8212; Клеверенс

Последние изменения: 27.11.2018

&#13; Тексты в окнах на терминале можно форматировать при помощи тегов псевдо-HTML. Использование форматирования позволяет отобразить информацию на экране в удобном пользователям виде, выделить важные сообщения в тексте и т.п.&#13;

&#13; Список тегов, которые можно использовать при форматировании текста:&#13;

&#13; Обычный текст с возможностью задания цвета и размера. &#13;

Редактирование CSS-стилей чата бесплатно (Страница 1 из 19)

Редактор CSS находится на странице Дизайн в панели управления чатами.
Собственные правила CSS имеют приоритет над всеми другими настройками дизайна.

Картинка в шапке чата:

В этой теме вы можете делиться своими примерами кастомизации чата через CSS.

P.S.
Для поиска названий CSS-классов удобно использовать Инспектор из Инструментов разработчика встроенных в Google Chrome. В качестве справочника по CSS можно использовать Google: https://www.google.com/search?q=руководство+по+CSS.

2 Ответ от web-дизайнер. 2015-12-04 14:54:10 (2015-12-04 17:41:42 отредактировано web-дизайнер.)

  • Зарегистрирован: 2014-10-11
  • Сообщений: 94
Re: Редактирование CSS-стилей чата бесплатно

Вот это классно. Спасибо.

3 Ответ от ЗиУ-9 2015-12-04 20:09:42

  • ЗиУ-9
  • Гость
Re: Редактирование CSS-стилей чата бесплатно

4 Ответ от web-дизайнер. 2015-12-08 06:30:36

  • Зарегистрирован: 2014-10-11
  • Сообщений: 94
Re: Редактирование CSS-стилей чата бесплатно

Доброго утра!
Сейчас уже широко применяется CSS3,
Не предполагается ли использовать его в чатах на *.ru ?

5 Ответ от Admin 2015-12-08 07:59:55

  • Зарегистрирован: 2009-11-07
  • Сообщений: 2,463
Re: Редактирование CSS-стилей чата бесплатно

Доброго утра!
Сейчас уже широко применяется CSS3,
Не предполагается ли использовать его в чатах на *.ru ?

По мере того, как будем менять дизайн будем использовать элементы CSS3.

6 Ответ от C2H5OH 2015-12-12 10:27:24 (2015-12-12 10:35:53 отредактировано C2H5OH)

  • Откуда: Лаборатория
  • Зарегистрирован: 2015-12-12
  • Сообщений: 13
Re: Редактирование CSS-стилей чата бесплатно

Ув. администрация чатовода

А есть ли возможность в CSS настройках изменять градиент цвета сообщений определенного ника, пусть только для того что был зарегестрирован в своем же чате?

7 Ответ от aabbap 2015-12-12 11:31:43

  • Зарегистрирован: 2012-07-24
  • Сообщений: 330
Re: Редактирование CSS-стилей чата бесплатно

Кстати, поддержу спирт. Неплохо бы.

8 Ответ от Admin 2015-12-12 11:39:03

  • Зарегистрирован: 2009-11-07
  • Сообщений: 2,463
Re: Редактирование CSS-стилей чата бесплатно

Готово. Пример кода, подчёркивающего пользователя с id5.

9 Ответ от C2H5OH 2015-12-12 15:20:02 (2015-12-12 15:24:55 отредактировано C2H5OH)

  • Откуда: Лаборатория
  • Зарегистрирован: 2015-12-12
  • Сообщений: 13
Re: Редактирование CSS-стилей чата бесплатно

Готово. Пример кода, подчёркивающего пользователя с id5.

Большая благодарность!
Но это дает лишь оформлять стиль определенного ника в списке ников он-лаин чата, а для того что бы изменить стиль текста сообщения в самом чате только у определенного (!) ника, надо вместо .chatUser прописывать .chatMessage? Или я что то путаю

10 Ответ от Admin 2015-12-12 16:24:27

  • Зарегистрирован: 2009-11-07
  • Сообщений: 2,463
Re: Редактирование CSS-стилей чата бесплатно

В самом сообщении:

11 Ответ от web-дизайнер. 2015-12-12 23:27:13 (2015-12-13 09:00:07 отредактировано web-дизайнер.)

  • Зарегистрирован: 2014-10-11
  • Сообщений: 94
Re: Редактирование CSS-стилей чата бесплатно

Можно я чуть чуть поправлю?

Для того чтобы выделить "именно текст" определённого пользователя чата,
нужно прописать следующее (у Админа чата):

.chatMessage strong <
/* Выделенное сообщение Админа чата */
background-color: #ffcc00;
font-size: 14pt;
>

Если хотите закруглить углы у выделенного блока, добавьте вот такой код:
border-radius: 10px;

Для выделения персонального сообщения выделяется вся(е) строка(ки)

.chatMessage.chatMessageToMe <
/* Фон персональных сообщений нику (при указании ника) */
background-color: #a3f7d0;
>

12 Ответ от aabbap 2015-12-13 04:42:23

  • Зарегистрирован: 2012-07-24
  • Сообщений: 330
Re: Редактирование CSS-стилей чата бесплатно

У меня почему-то с вашими css ничего не подчёркивает, а выделяет всех подряд.

13 Ответ от web-дизайнер. 2015-12-13 05:46:32

  • Зарегистрирован: 2014-10-11
  • Сообщений: 94
Re: Редактирование CSS-стилей чата бесплатно

У меня почему-то с вашими css ничего не подчёркивает, а выделяет всех подряд.

То что не подчёркивает, правильно, там нет команды text-decoration.

14 Ответ от aabbap 2015-12-14 16:54:49

  • Зарегистрирован: 2012-07-24
  • Сообщений: 330
Re: Редактирование CSS-стилей чата бесплатно

так и выделяет всех подряд, а не меня только

15 Ответ от web-дизайнер. 2015-12-14 17:33:06

  • Зарегистрирован: 2014-10-11
  • Сообщений: 94
Re: Редактирование CSS-стилей чата бесплатно

Вот что должно получиться у вас:

Правая колонка настраивается в другом классе.

16 Ответ от aabbap 2015-12-14 18:37:54

  • Зарегистрирован: 2012-07-24
  • Сообщений: 330
Re: Редактирование CSS-стилей чата бесплатно

Да, спасибо, работает.

17 Ответ от C2H5OH 2015-12-14 18:39:32 (2015-12-14 18:52:04 отредактировано C2H5OH)

  • Откуда: Лаборатория
  • Зарегистрирован: 2015-12-12
  • Сообщений: 13
Re: Редактирование CSS-стилей чата бесплатно

web-дизайнер.
Вот вот, и я об этом, только чтобы можно было делать у разных юзеров (с определённым выборочным ID), а не только у админа. Но идея сама верна!

18 Ответ от web-дизайнер. 2015-12-14 23:33:27 (2015-12-15 05:33:47 отредактировано web-дизайнер.)

  • Зарегистрирован: 2014-10-11
  • Сообщений: 94
Re: Редактирование CSS-стилей чата бесплатно

Попробуйте такой код.
Этот код должен работать для VIP-пользователей, выделяет текст сообщения.

.chatMessage, > span <
background-color: #99cc99;
>

(проверить смог только 1 раз, когда пришёл Вип пользователь.
сам зашёл потом своим вторым ником, этого эффекта не случилось,
ник обычный, не Вип).
Хотя рано утром пришёл вип пользователь, такого эффекта тоже не случилось.
Проведя более глубокий анализ, выяснилось, что, первый пользователь был
действительно ВИП, со значком в профиле, второй, что странно, был без значка VIP,
но, с градиентным ником. Таким образом, если в чат входит реальный VIP пользователь,
то, его сообщения должны быть выделены.
Если без запятой после Message, выделяются все ники цветом.

19 Ответ от web-дизайнер. 2015-12-15 03:46:01 (2015-12-15 03:48:58 отредактировано web-дизайнер.)

  • Зарегистрирован: 2014-10-11
  • Сообщений: 94
Re: Редактирование CSS-стилей чата бесплатно

Если б был список всех доступных классов и айди,
с описанием каждого (что куда), было бы легче настраивать.

20 Ответ от aabbap 2015-12-15 14:30:13

  • Зарегистрирован: 2012-07-24
  • Сообщений: 330
Re: Редактирование CSS-стилей чата бесплатно

А как головастиков делать? Как в чатаделике

21 Ответ от aabbap 2015-12-15 14:41:29 (2015-12-15 15:05:20 отредактировано aabbap)

  • Зарегистрирован: 2012-07-24
  • Сообщений: 330
Re: Редактирование CSS-стилей чата бесплатно

И согласен с предыдущим оратором насчёт того, чтобы любому чатланину можно было сделать выделенные сообщения, а не только админу. Причём также по id, персонально.

22 Ответ от aabbap 2015-12-15 14:54:46

  • Зарегистрирован: 2012-07-24
  • Сообщений: 330
Re: Редактирование CSS-стилей чата бесплатно

.chatMessage strong <
/* Выделенное сообщение Админа чата */
background-color: #ffcc00;
font-size: 14pt;
>

Этот код у меня работает почему-то не для Админа, а для всех ВИПов

23 Ответ от aabbap 2015-12-15 14:57:06 (2015-12-15 14:57:51 отредактировано aabbap)

  • Зарегистрирован: 2012-07-24
  • Сообщений: 330
Re: Редактирование CSS-стилей чата бесплатно

Попробуйте такой код.
Этот код должен работать для VIP-пользователей, выделяет текст сообщения.

.chatMessage, > span <
background-color: #99cc99;
>

Вообще не работает, ни с запятой, ни без запятой

24 Ответ от Businka 2015-12-15 15:08:47 (2015-12-15 15:10:48 отредактировано Businka)

  • Зарегистрирован: 2013-02-28
  • Сообщений: 10
Re: Редактирование CSS-стилей чата бесплатно

Подскажите пожалуйста, а как заменить форму неактивной вкладки в чате? У меня получилось только одну заменить. Неактивная осталась квадратной. Нахимичила, сама не пойму что)).
Хочу сделать полукруглыми.
http://data2.floomby.com/files/share/15 … Sa3VaQ.jpg
И второй вопрос, можно ли сделать название чата в шапке рамкой с фоном, это возможно? А то название чата плохо видно.

25 Ответ от web-дизайнер. 2015-12-15 15:25:52

  • Зарегистрирован: 2014-10-11
  • Сообщений: 94
Re: Редактирование CSS-стилей чата бесплатно

Вот получилось таки сделать код для обычных пользователей:

.chatMessage > span <
/* Выделенное сообщение пользователя (не VIP) */
background-color: #99cc99;
font-size: 14pt;
border-radius: 10px;
>

Добавить комментарий

Ваш адрес email не будет опубликован.