Как подчеркнуть текст в браузере
Обновлено: 07.07.2024
В прошлой статье мы обсуждали спецификацию выделения текста жирным шрифтом. В текущей статье мы поговорим о том, как выделить текст курсивом HTML. Как и в случае с жирным текстом, курсивный текст можно сделать тремя способами:
Рассмотрим все три варианта, как можно сделать курсив в HTML, обсудим тонкости этого вопроса и какие способы удобнее и правильнее использовать в тех или иных ситуациях.
Курсивный текст: тег <i>
Тег i (italic), по аналогии с тегом b для жирного текста, служит для физического выделения курсивного текста (это означает, что изменяется только начертание текста). Применение тега i:
Таким образом, нужная часть текста помещается между тегами <i></i>.
Курсивный текст: тег <em>
Хотя тег i остается валидным, с точки зрения оптимизации сайта лучше использовать тег em для выделения логически важных участков текста. Это означает, что поисковые роботы учитывают важность текста, помещенного между тегами <em></em>:
Конструктор сайтов "Нубекс"
Но не стоит забывать, что текст, заключенный в теги i и em, хоть и отображаются практически одинаково (во всех современных браузерах), по своей сути являеются не совсем идентичными, как уже отмечалось выше. Поэтому использовать теги нужно по мере необходимости: тегом em HTML обрамлять важные участки текста, а визуальное курсивное оформление применять с помощью тега i или CSS-стилей. Рассмотрим теперь использование CSS-стилей для курсивного выделения текста.
Курсивный текст силами CSS
Для установления стилей отображения шрифтов в CSS применяется свойство font-style, которое может принимать значения: oblique (наклонный текст), italic (курсив) и normal (обычный шрифт).
Стоит помнить о том, что курсивный шрифт и наклонный, по своей сути, не являются одним и тем же. Курсив - это особый шрифт, который является аналогом рукописного текста, а наклонный формируется посредством наклона обычного шрифта вправо.
Применение атрибута font-style на практике:
Но необходимо помнить, что некоторые браузеры текст со свойством font-style: oblique; могут интерпретировать не как наклонный текст, а как курсивный.
К одному фрагменту текста можно применить сразу несколько элементов оформления:
Элементы оформления текста можно использовать совместно с другими элементами разметки:
Всплывающая подсказка
Чтобы добавить к фрагменту текста всплывающую подсказку, например определение термина, используйте разметку:
","prev_next":<"prevItem":<"disabled":false,"title":"Структура страницы","link":"/support/connect-wiki/static-markup/document-strucuture.html">,"nextItem":>,"breadcrumbs":[,,],"useful_links":null,"meta":,"voter":","extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Оформление текста - Yandex Wiki. Справка","productName":"Yandex Wiki","extra_js":[[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>,,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>]],"extra_css":[[],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>,,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"lang":"ru">>>'>Выделение текста
Ограничение. Выделение работает правильно, только если символы разметки вплотную прилегают к тексту.red / крас / красный ;
green / зел / зеленый ;
blue / син / синий ;
grey / gray / сер / серый ;
yellow / жел / желтый ;
red / крас / красный ;
green / зел / зеленый ;
blue / син / синий ;
grey / gray / сер / серый ;
yellow / жел / желтый ;
Сочетание элементов оформления
К одному фрагменту текста можно применить сразу несколько элементов оформления:
| Разметка | Результат |
|---|---|
 | |
 |
| Разметка | Результат |
|---|---|
| | |
| |
Элементы оформления текста можно использовать совместно с другими элементами разметки:
| Разметка | Результат |
|---|---|
 | |
 |
| Разметка | Результат |
|---|---|
| | |
| |
Всплывающая подсказка
Чтобы добавить к фрагменту текста всплывающую подсказку, например определение термина, используйте разметку:
Введите текст в первое поле и во втором автоматически получите результат.
Многие встречали посты в социальных сетях, где определенные слова были подчеркнуты. Про существование возможности подчеркивания знают далеко не все. Потому что нет какой-либо точной, ясной и очевидной функции, позволяющей подобным образом выделить словосочетание. С помощью нашего сервиса вам не придется в деталях разбираться, как сделать подчеркнутый текст в социальных сетях.
Существуют многочисленные инструкции по работе с текстом. Но отсутствуют причины ими руководствоваться, когда гораздо проще в одном поле написать нужные слова, во втором получить их подчеркнутыми. Далее вам остается лишь скопировать полученный результат. Подчеркивание текста в Инстаграме, ВКонтакте, Фейсбук, мессенджерах Ватсап и Телеграм 100% работает.
В каких случаях используют подчеркивание слов в постах?
В первую очередь, это украшение поста. Особенно если речь идет о довольно большой информации, которую воспринимать рядовому пользователю сложнее, чем несколько предложений. Так, например, подчеркнуть текст в ВК онлайн можно в следующих случаях:
- Когда вы хотите донести до аудитории много важной информации, в которой нужно выделить конкретный посыл. Выделение происходит с помощью подчеркивания, так как оно привлекает и заостряет внимание пользователей на конкретных словах, словосочетаниях, предложениях;
- Если ваш пост небольшой, все равно подобная опция часто необходима. Обычный небольшой текст пользователь может просто пролистать. А даже одно подчеркнутое слово, которое несет ключевое значение в посте, способно привлечь внимание;
- В конце концов, все сводится к тому, чтобы донести до пользователей максимально важные моменты из общей информации. Подчеркиванием вы как бы подталкиваете пользователей к знакомству с наиболее ключевыми моментами в контенте.
Любой контент, которым вы хотите поделиться с аудиторией, требует работы с текстом. Подчеркивание ключевых данных — это также работа с информацией. Обычный активный пользователь социальных сетей и мессенджеров ежедневно сталкивается с большим количество статей, информационных постов и т. д. Поэтому зачастую «проходит мимо» интересных для него знаний, так как их не замечает. Подчеркивание останавливает пользователя от быстрого листания ленты. И такой метод работает не первый год.
Теперь вам известно, как сделать подчеркнутый текст в Ватсап, других мессенджерах и социальных сетях — элементарная задача благодаря нашему сервису!
Пользователи выделяют текст чтобы скопировать его, чтобы удалить или применить форматирование в выделенному фрагменту. Рассмотрим все возможные варианты, которые сделают из вас джедая по выделению фрагментов текста!
Как выделить текст
Выделение текста — это довольно простой процесс. Вам нужно навести курсор на начало фрагмента, который вы хотите выделить, в этом месте нажмите левую кнопку мыши и, удерживая её, передвигайте до конца фрагмента, который вы хотите выделить. Когда достигните нужного места, отпустите кнопку.
Текст будет выделен до тех пор, пока вы не кликните в любой области окна.
Как выбрать несколько фрагментов текста
Если на странице уже выделен фрагмент текста и вы попытаетесь выделить другое место, то выделение с первого будет снято. То есть можно выделить только один последовательный кусок.
Чтобы выделить в разных местах текста, удерживайте клавишу Ctrl. Вам необязательно постоянно держать её нажатой — главное, успевайте её нажимать до начала следующего выделения.
Таким образом вы сможете выделить любое количество фрагментов.
К сожалению, этот способ не работает в веб-браузерах, зато работает во многих текстовых редакторах, в том числе в Word.
Как выделить текст без перетаскивания мыши
Вы можете поставить курсор в начало фрагмента, который вы хотите выделить. Затем нажмите кнопку Shift и кликните в конец того места, которое вы хотите выделить. В результате будет выбрано пространство от курсора до второго клика.
Как выделить очень большой фрагмент текста
Если нужно выделить текст на десятки страниц, то воспользуйтесь показанным в предыдущем пункте методом — поставьте курсор в начало, перейдите в конце нужного фрагмента, нажмите Shift и кликните.
Как выделить очень большой фрагмент текста на веб-странице
Курсор можно поставить только текстовых редакторах — на веб страницах, в отличие от Word, нельзя поставить курсор, кликнув в какое-либо место страницы.
Чтобы обойти это ограничение, выделите первый символ фрагмента, который вы хотите выделить, затем перейдите в конце нужного фрагмента, нажмите Shift и кликните.
Как выделить весь текст
Вы можете использовать любой из показанных выше способов, но ещё проще просто воспользоваться сочетанием клавиш Ctrl+a. Эта комбинация работает практически в каждой программе.
Как снять выделение текста
Выделение текста нельзя отменить сочетанием клавиш Ctrl+z. Чтобы отменить выделение фрагмента, кликните в любое место (можно даже в самом выделении) или нажмите любую курсорную клавишу (последний метод работает в текстовых редакторах, но не работает в веб браузерах).
Читайте также: