Эффекты текста в HTML: подчеркивание, зачеркивание и другие
Форматирование текста и визуальные эффекты — это база HTML. В этом небольшом туториале вы можете найти коды HTML, которые видоизменяют визуально ваш текст. Итак, поехали.
- Зачеркивание текста
- Подчеркивание текта
- Жирный текст
- Увеличенный текст
- Наклоненный текст
- Верхний и нижний регистр
- Текст разного размера
- Подчеркивание пунктиром
- Текст с цветным фоном
- Двойное подчеркивание
- Текст в 3D рамке
- Разбитие текста на колонки
- Буквица
Зачеркивание текста
Что мы сделаем: Ваш текст будет здесь.
Зачем это может понадобиться — решать вам, а я приведу код, который поможем вам отобразить текст таким образом:
<s>Ваш текст будет здесь</s>
Подчеркивание текта
Что мы сделаем: Ваш текст будет здесь.
Здесь уже проще с применением: таким образом можно выделить ссылку, просто важный участок текст, на который читателю следует обратить внимание и так далее.
Вот код подчеркивания текста:
<u>Ваш текст будет здесь</u>
Жирный текст
Жирный текст будет выглядеть таким образом: Ваш текст будет здесь.
И вот код HTML которым можно вывести такой тип текста:
<b>Ваш текст будет здесь</b>
Увеличенный текст
Вот как такой текст можно сделать:
<big>Ваш текст будет здесь</big>
Наклоненный текст
Один из базовых типов изменений текста выглядит так: Your text.
Выводится в HTML он таким образом:
<i>Ваш текст будет здесь</i>
Верхний и нижний регистр
Верхний регистр: Какой-то текст тут тоже текст
Нижний регистр: Какой-то текст тут тоже текст
Верхний регистр на HTML можно вывести таким образом:
Здесь будет основной текст<sup>а тут верхний регистр</sup>
А нижний можно сделать так:
Здесь будет основной текст<sub>а тут нижний регистр</sub>
Текст разного размера
Полезная штука, без большого количества кодов и примеров он выводится таким образом:
<font size="+3">Ваш текст будет здесь</font>
Число можно изменить на свое.
Можно вставить и отрицательное значение — это допустимо и, как не сложно догадаться, уменьшает размер вашего текста.
Подчеркивание пунктиром
Тоже довольно распространенный эффект, который выводится в HTML таким образом:
<span>Текст, подчеркнутый пунктиром</span>
Текст с цветным фоном
Код будет выглядеть таким образом:
<span>Цветной текст с цветным фоном</span>
Результат исполнения кода будет таким:
Цветной текст с цветным фоном
Двойное подчеркивание
Код такого текста выглядит таким образом (значения можно менять на свои):
<span>Текст, подчеркнутый двойной чертой</span>
Исполнение кода:
Текст, подчеркнутый двойной чертой
Текст в 3D рамке
Очень интересный визуальный эффект и мне кажется он может найти свое применение на вашем сайте:
<span> Ваш текст в объемной 3D-рамке</span>
Результат исполнения будет выглядеть так:
Ваш текст в объемной 3D-рамке
Разбитие текста на колонки
Код выглядит таким образом:
<table width=100%>
<tr><td width=50%>
текст левой колонки
<td width=50%>
текст правой колонки
</table>
Исполнение кода:
| текст левой колонки | текст правой колонки |
Примечательно, что WordPress, на котором работает этот блог, в этом случае добавляет таблицу.
Буквица
Напоследок я решил оставить буквицу. Вот код (опять же, значения можете изменять по своему усмотрению):
<font size="+4" face="Monotype Corsiva" color="#0000FF">В</font> <i>некотором царстве…</i>
Вот исполнение:
Внекотором царстве…
Как подчеркнуть слово двойной линией в word: 6 способов
Перейти к содержанию
Search for:
Главная » Компьютер
Автор Олег Евгеньевич Просмотров 3.3к.
В официальных документах без выделения важных частей текста порой не обойтись, а потому пора разобраться, как в «Ворде» сделать двойную линию с помощью таблицы, через раздел с «Границами» или даже подготовив элементы оформления вручную.
Содержание
- С помощью инструмента «Подчеркивание текста»
- Используем расширенные параметры группы «Шрифт»
- Создание стиля подчеркивания для постоянной работы (по умолчанию) в Word
- Использование горячих клавиш
- Двойная линия с помощью таблицы
- Если нужна обычная двойная линия
- Как удалить двойное подчеркивание
С помощью инструмента «Подчеркивание текста»
Двойная линия в Word быстрее всего добавляется через меню «Подчеркивание текста», вызываемое с верхней панели быстрого доступа, расположенной на вкладке «Главная». Перед добавлением оформления предстоит выделить текст на странице, а после вызвать вертикальный список с доступными стилями и выбрать вариант «Двойное подчеркивание».
Применяются выбранные параметры сразу – результат появится на странице. Форматирование применяется лишь к выбранному фрагменту (или слову), а не ко всему документу сразу.
Используем расширенные параметры группы «Шрифт»
Кроме раздела «Подчеркивание текста» оформление выделенного фрагмента текста настраивается и через расширенные параметры «Шрифта»: достаточно воспользоваться комбинацией клавиш Ctrl + D и в появившемся меню воспользоваться центральной панелью с настройками.
Word предложит сменить цвет текста, задать вариант форматирования, а вместе с тем поменять оттенок добавляемого подчеркивания.
Если перечисленных элементов недостаточно для внесения графических перемен в оформление документа, то снизу дополнительно доступна кнопка «Текстовые эффекты».
Создание стиля подчеркивания для постоянной работы (по умолчанию) в Word
Выбираемые настройки подчеркивания распространяются лишь на конкретный документ офисного редактора: следующий раз добавлять настройки предстоит снова. Проблема решается подготовкой стиля оформления по умолчанию через дополнительные параметры шрифтов (связка клавиш Ctrl + D).
После перехода предстоит вновь выбрать цвет текста и подчеркивания, выбрать стиль линий (двойную), а после – нажать на кнопку «По умолчанию» в нижней части интерфейса слева.
Выбранные настройки закрепляются в Word для шаблона dat, который открывается вместе с новыми документами.
При возникновении проблем разработчики рекомендуют сбросить оформление (в том числе и шрифтов), а после – вновь обратиться к меню и задать «чистые» настройки по умолчанию.
В последнем случае риск столкнуться со странным поведением параметров форматирования приближается к нулю.
Использование горячих клавиш
Комбинация клавиш Ctrl + U в Word подчеркивает выделенный текст исключительно в стандартном режиме (вне зависимости от того, какой стиль подчеркивания выбран по умолчанию). А потому каждый раз предстоит обращаться к разделу «Подчеркнутый» и выбирать подходящий стиль оформления.
Кроме связки Ctrl + U срабатывает и трюк с разметкой линий границ в автоматическом режиме: Word сходу преобразует три стоящих рядом знака равно в сплошное подчеркивание, если после ввода нажать на Enter.
Настроить оформление появившейся линии текстовый редактор не разрешает: доступно лишь перемещение по странице с помощью левой кнопки мыши.
Двойная линия с помощью таблицы
Добавлять таблицу с полями с нуля совсем необязательно: текстовый редактор Word давно содержит категорию инструментов «Граница», доступную на панели быстрого доступа на вкладке «Главная» (рядом со стилями текста).
Если навести курсор на иконку и в появившемся списке выбрать «Нижняя граница», то добавленный текст сразу получит специальное подчеркивание.
По умолчанию вырисовывается лишь одинарная линия, но, если после выбора «Нижней границы» снова вызвать меню, а после нажать на «Границы и заливка», то появится шанс внести коррективы в оформление: выбрать тип и вариант заливки, цвет и способ добавления – к абзацу, слову или странице.
Вариант с таблицей тоже сработает, но понадобится дополнительно разобраться в деталях:
- Перейти на вкладку «Вставка» и вызвать контекстное меню «Таблица»;
- Добавить таблицу 1×1 с шириной на всю страницу;
- Перенести внутрь текст, нажать правой кнопкой мыши на получившемся результате и вновь открыть меню «Границы и заливка». Из появившегося списка предстоит снова выбрать двойное подчеркивание, а после – скрыть лишние границы справа, сверху и слева.
Если нужна обычная двойная линия
Альтернативный способ добавить подчеркивание – воспользоваться вкладкой «Вставка», включающей раздел «Иллюстрации».
После перехода предстоит вызвать меню «Фигуры», а затем выбрать «Линии».
Добавляются интерактивные элементы и под введенным текстом, и в свободном месте на странице: достаточно зажать левую кнопку мыши и провести курсор влево или вправо – в подходящем направлении для выделения абзаца или слова.
Если зажать Shift, то линия вытянется строго горизонтально. Дополнительно при рисовании появятся направляющие, подсказывающие, где находятся поля на странице.
После рисования линию предстоит отформатировать: оформление меняется в разделе «Формат фигуры».
Последний штрих – задать «Ширину», выбрать подходящий «Составной тип», сменить цвет заливки.
Как удалить двойное подчеркивание
Настройки форматирования сбрасываются и с помощью комбинации горячих клавиш Ctrl + U (предварительно предстоит выбрать фрагмент текста для внесения корректировок) и через глобальную очистку параметров (специальная кнопка, расположенная в интерфейсе под или рядом с габаритами шрифтов на вкладке «Главная»).
Последний вариант предусматривает очистку и сторонних параметров, включая полужирное начертание и положение на странице, а заодно сбрасывает списки и прочие элементы дизайна, снижающие уровень читабельности.
Оцените автора
Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами.
Adblock
detector
html — Тег двойного подчеркивания?
спросил
Изменено 3 года, 1 месяц назад
Просмотрено 63к раз
Я хочу сделать текст в HTML двойным подчеркиванием.
веб-сайт
У меня две линии внизу вместо одной.
Есть ли для этого определенный тег или мне нужно сделать это в css?
- HTML
- CSS
8
Вы можете попробовать добавить это:
h2.dblUnderlined { border-bottom: 3px double; }
Примечание. Ширина должна быть 3 пикселя или больше, поскольку она представляет общую ширину; не ширина каждой границы. По мере увеличения размера ширина линий и пробелов может совпадать или не совпадать в зависимости от кратности определенного измерения на 3. Остаток от 1 и 1 добавляется к ширине пробела; остаток 2 приведет к добавлению 1 к каждой строке.
0
.doubleUnderline {
украшение текста: подчеркивание;
нижняя граница: 1px сплошная #000;
}
Тест
Вот рабочая скрипка.
4
Самый простой способ — установить нижнюю границу типа double в CSS.
Ширина должна быть не менее 3 пикселей, чтобы создать минимальную двойную границу (две границы шириной 1 пиксель с промежутком в 1 пиксель между ними).
Детали зависят от разметки, от желаемой ширины и цвета двойной линии, а также от того, должна ли она проходить через доступную ширину. Разметка типа foobar
h2 {
нижняя граница: двойная 3px;
}
Если вы хотите, чтобы только текст заголовка был «подчеркнут», самый простой способ — использовать внутреннюю разметку, например foobar и код CSS
h2 span {
нижняя граница: двойная 3px;
}
1
парни/девушки, это тоже работает, но больше похоже на традиционное двойное подчеркивание.
.doubleUnderline {
строка оформления текста: подчеркивание;
стиль оформления текста: двойной;
}
2
FYI, на данный момент возможно следующее в Firefox или в Safari с использованием префикса поставщика:
text-decoration: двойное подчеркивание; -webkit-text-decoration: двойное подчеркивание;
См.
строку оформления текста.
Почему бы просто не сделать свой собственный тег?
<стиль>
дю
{
строка оформления текста: подчеркивание;
стиль оформления текста: двойной;
}
Я хочу, чтобы этот материал был подчеркнут дважды.
http://jsfiddle.net/eoba541g/2/
используйте следующий http://jsfiddle.net/cKNP4/
или
Присвойте любому HTML-контейнеру следующий стиль :
стиль верхней границы: нет; стиль правой границы: нет; стиль нижней границы: двойной; стиль левой границы: нет; ширина границы: сплошной черный цвет 2 пикселя;
Вот мое решение (стилус):
$borderWidth 1px
$textЦвет черный
$двойные границы
&:после
содержание ""
абсолютная позиция
топ 100%
ширина 5,7 см
справа 0
верхняя граница ($borderWidth * 3) двойной $textColour
.двойное подчеркивание
@extend $двойные границы
Обратите внимание, что ширина должна быть жестко запрограммирована (в данном случае 5. . Если это не желаемый результат, вы также можете использовать метод 
7em border-bottom , упомянутый выше.
1
О нас
Это будет работать, только если вы хотите дважды подчеркнуть его в HTML.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
css — Как я могу дважды подчеркнуть текст внутри ячейки таблицы html?
спросил
Изменено 4 года назад
Просмотрено 9к раз
Оба подчеркивания должны иметь длину, соответствующую содержимому текста.
Я столкнулся с другим подобным вопросом, где принятое решение заключалось в использовании
.doubleUnderline {
украшение текста: подчеркивание;
нижняя граница: 1px сплошная #000;
}
Но это не то, что я хотел. Я хочу, чтобы длина двойного подчеркивания была равна длине текстового содержимого.
- HTML
- CSS
- HTML-таблица
18
Я взбил два примера.
С блочными элементами (например, p ) вы можете использовать встроенный блок , чтобы он не занимал всю длину страницы, а только текст.
диапазон{
нижняя граница: 1px сплошная # 000;
украшение текста: подчеркивание;
}
п{
нижняя граница: 1px сплошная # 000;
украшение текста: подчеркивание;
дисплей: встроенный блок;
} Это вам немного текста
Это тоже текст для вас
Попробуйте это:
<диапазон> Общий итог: ###,###,###.
