Подчеркнутый текст в html: Тег — подчёркнутый текст

Содержание

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



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

html css
Поделиться Источник netimen     14 октября 2009 в 21:57

3 ответа


  • Стиль HTML по умолчанию для элементов управления в библиотеке Qt

    Это вопрос о библиотеке Qt, а не о веб-дизайне. Для QLabel и других элементов управления я могу установить текст HTML, например <h4>Some Text</h4>. вопрос: где определяется стиль по умолчанию HTML? Как я могу узнать, какой шрифт будет использоваться для тега <h4>? Следующий вопрос: Могу...

  • Могу ли я получить положение элементов в NSAttributedString?

    Я использую NSAttributeString, чтобы получить что-то вроде выше(включая обычный текст ,подчеркнутый текст и изображения) , и теперь я хочу сделать : если пользователь нажал на подчеркнутую текстовую область , я сделаю некоторые специальные действия (откройте веб или sth).

    Теперь я могу получить...



6

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

Вы также можете попробовать что-то вроде этого.

.double_underline {
    border-bottom: 3px double;
}

Поделиться Ólafur Waage     14 октября 2009 в 21:58



0

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

text-underline-position: above;

Однако здесь нет двойного подчеркивания.

Поделиться Guffa     14 октября 2009 в 22:06



-1

Это действительно был бы лучший вопрос для Doctype, который фокусируется на вопросах веб-дизайна.

Поделиться RMorrisey     14 октября 2009 в 22:14


  • Html.
    ActionLink стиль текста

    Я хочу, чтобы стиль только часть текста внутри моего ActionLink, мне нужно знак плюс, чтобы быть жирным шрифтом. В чистом html я могу сделать это таким образом. <a class=topMenu href=#><span style=font-weight:bold;>+</span>Invite User</a> Если попробовать его с ActionLink,...

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

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


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


Могу ли я указать стиль для определенных строк в css?

Есть ли способ применить форматирование css только к первой (или n-й) строке текста в CSS? Предположим, у меня есть: <h3>This is a line of text on my web page</h3> Это отображается как:.

..


Можно ли явно установить высоту строки подчеркнутого текста, используя "text-decoration: underline;" в CSS?

Можно ли явно установить высоту строки текста, подчеркнутого с помощью text-decoration: underline; в CSS? IE и FireFox представляют текст с font-weight: bold; и text-decoration: underline; ,...


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

Я пытаюсь создать простой редактор WYSIWYG, который позволит пользователям выбирать текст и bold/underline/italicise его. В настоящее время пользователь может выбрать текст, щелкнуть его правой...


Стиль HTML по умолчанию для элементов управления в библиотеке Qt

Это вопрос о библиотеке Qt, а не о веб-дизайне. Для QLabel и других элементов управления я могу установить текст HTML, например <h4>Some Text</h4>. вопрос: где определяется стиль по умолчанию...


Могу ли я получить положение элементов в NSAttributedString?

Я использую NSAttributeString, чтобы получить что-то вроде выше(включая обычный текст ,подчеркнутый текст и изображения) , и теперь я хочу сделать : если пользователь нажал на подчеркнутую текстовую.

..


Html.ActionLink стиль текста

Я хочу, чтобы стиль только часть текста внутри моего ActionLink, мне нужно знак плюс, чтобы быть жирным шрифтом. В чистом html я могу сделать это таким образом. <a class=topMenu...


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

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


Как изменить стиль произвольной части текста html

Я хочу изменить стиль на части текста на произвольной позиции с произвольной длиной. Например, у меня есть это в моем html <span id=text>Lorem ipsum dolor sit amet, consectetur adipiscing...


Как сохранить стиль исходного текста при вставке в JTextPane?

Используя Java Swing, я создаю простое .файл rtf редактор, используя RTFEditorKit(). Я использую JTextPane.

Я добавил код для жирного, курсивного и подчеркнутого текста. Мой проблемный сценарий: У...


Java-добавление и удаление подчеркнутого текста в JButton при наведении курсора мыши

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

Основы редактирования текста в HTML - Изучение веб-разработки

Одна из основных задач HTML — придавать тексту структуру и смысл, семантику, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать HTML, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.

Предварительные требования: Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача: Изучить базовые способы разметки текста путем добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты.
.

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

Упорядоченный контент делает чтение более легким и приятным.

В HTML каждый абзац заключен в элемент <p>, подобно:

<p>Я параграф, да, это я.</p>

Каждый заголовок заключен в элемент заголовка <h2>:

<h2>Я заголовок истории.</h2>

Имеется шесть элементов заголовка: <h2><h3><h4><h5><h5> и <h6>. Каждый элемент представляет разный уровень контента в документе; <h2> представляет главный заголовок, <h3> представляет подзаголовки, 

<h4> представляет под-подзаголовки и так далее.

Создание иерархической структуры

Например, в рассказе <h2> будет представлять заглавие рассказа, <h3> обозначит название каждой главы, <h4>  будет обозначать подзаголовки в каждой главе и так далее.

<h2> Сокрушительная скука </ h2>

<p> Крис Миллс </ p>

<h3> Глава 1: Темная ночь </ h3>

<p> Это была темная ночь. Где-то кричала сова. Дождь обрушился на ... </ p>

<h3> Глава 2: Вечное молчание </ h3>

<p> Наш главный герой ничего не мог, когда шёпот из тёмной фигуры ... </ p>

<h4> Призрак говорит </ h4>

<p> Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!» </ p>

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

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

Зачем нам необходима структура?

Чтобы ответить на этот вопрос, давайте посмотрим на text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своем локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return  для перехода на следующую строку).

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

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

  • Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки  (мы обычно тратим очень мало времени на веб-странице). Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.
  • Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы. Без заголовков ваша страница будет плохо работать с точки зрения SEO (Search Engine Optimization — поисковая оптимизация).
  • Сильно слабовидящие люди часто не читают веб-страницы — они слушают их вместо этого. Это делается с помощью программного обеспечения, называемого программой чтения с экрана. Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту. Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию. Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.
  • Чтобы стилизовать контент с помощью CSS или сделать его интересным с помощью JavaScript, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать.

Поэтому нужно дать структурную разметку нашему контенту.

Активное изучение: создание структуры для нашего контента

Давайте рассмотрим это на живом примере. В приведённом ниже примере добавьте элементы в исходный текст в поле «Редактируемый код», чтобы он отображался как заголовок и два абзаца в поле «Результат».

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

Playable code

Почему мы нуждаемся в семантике?

Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметoв; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зеленый свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)

В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид. В этом контексте элемент <h2> также является семантическим элементом, который даёт тексту, который он обёртывает,  роль (или значение) «заголовка верхнего уровня на вашей странице».

<h2>Это заголовок верхнего уровня</h2>

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

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

<span>Это заголовок верхнего уровня?</span>

Это элемент <span>. У него нет семантики. Вы используете его, когда хотите применить к контенту CSS (или сделать что-то с ним с помощью JavaScript), не придавая ему никакого дополнительного значения (об этом вы узнаете позже). Мы применили CSS, чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимуществ, описанных выше. Рекомендуется использовать соответствующий элемент HTML на практике.

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

Неупорядоченные

Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмем, к примеру, список покупок:

молоко
яйца
хлеб
хумус

Каждый неупорядоченный список начинается с элемента <ul> (unordered list) — он обёртывает все элементы списка: молоко, яйца, хлеб, хумус.

Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент <li> (элемент списка):

<ul>
  <li>молоко</li>
  <li>яйца</li>
  <li>хлеб</li>
  <li>хумус</li>
</ul>

Активное изучение: разметка неупорядоченного списка

Попробуйте отредактировать образец ниже, чтобы создать свой собственный неупорядоченный список HTML.

Playable code

Упорядоченные

Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмем в качестве примера маршрут следования:

Доедьте до конца дороги
Поверните направо
Едьте прямо через первые два перекрестка с круговым движением
Поверните налево на третьем перекрестке
Школа справа от вас, 300 метров вверх по дороге

Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент <ol> (ordered list), а не <ul>:

<ol>
   <li>Доедьте до конца дороги</li>
   <li>Поверните направо</li>
   <li>Едьте прямо через первые два перекрестка с круговым движением</li>
   <li>Поверните налево на третьем перекрестке</li>
   <li>Школа справа от вас, в 300 метрах вверх по дороге</li>
</ol>

Активное изучение: разметка упорядоченного списка

Попробуйте отредактировать образец ниже, чтобы создать свой собственный упорядоченный список HTML.

Playable code

Активное изучение: разметка собственной страницы рецептов

Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта. Вы можете либо сохранить локальную копию исходного файла text-start.html и выполнить в нём работу, либо сделать это в приведённом ниже примере. Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы. У обоих способов есть плюсы и минусы.

Playable code

Если вы застряли, вы всегда можете нажать кнопку Показать решение или проверить наш пример text-complete.html в нашем реестре github.

Вложенные списки

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

<ol>
  <li>Очистите чеснок от кожуры и крупно нарежьте. </li>
  <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li>
  <li>Добавьте все ингредиенты в пищевой комбайн.</li>
  <li>Измельчите все ингридиенты до состояния пасты.</li>
  <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>
  <li>Если вам нужен гладкий хумус, измельчайте дольше.</li>
</ol> 

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

<ol>
  <li>Очистите чеснок от кожуры и крупно нарежьте.</li>
  <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li>
  <li>Добавьте все ингредиенты в пищевой комбайн.</li>
  <li>Измельчите все ингридиенты до состояния пасты. 
    <ul>
      <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>
      <li>Если вам нужен гладкий хумус, измельчайте дольше.</li>
    </ul>
  </li>
</ol>

Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.

В обиходе мы часто подчеркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде. HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространенных.

Акцент

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

Я рад, что ты не опоздал.

Я рад, что ты не опоздал.

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

В таких случаях в HTML используется элемент <em> (выделение). Кроме того, чтобы сделать документ более интересным для чтения, они распознаются программами, считывающими с экрана, и произносятся другим тоном. Браузеры стилизуют это по умолчанию курсивом, но вы можете не использовать этот тег, чтобы получить курсив. Для выделения курсивом вы можете использовать элемент <span> и CSS, или, возможно, элемент <i> (смотрите ниже).

<p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p>

Важное значение

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

Эта жидкость очень токсична.

Я рассчитываю на вас. Не опаздывай!

В таких случаях в HTML используется элемент <strong> (важное значение). Помимо того, что документ становится более полезным,  они распознаются программами, считывающими с экрана, и говорят другим тоном. Браузеры стилизуют это как полужирный текст по умолчанию, но вы можете не использовать этот тег, чтобы получить жирный шрифт. Для получения жирного шрифта вы можете использовать элемент <span> и CSS, или, возможно, элемент <b> (смотрите ниже).

<p>Эта жидкость <strong>очень токсична</strong>.</p>

<p>Я рассчитываю на тебя. <strong>Не </strong>опаздывай!</p>

При желании вы можете вложить важные и акцентированные слова друг в друга:

<p>Эта жидкость <strong>очень токсична</strong> —
если ты выпьешь её, <strong>то можешь<em>умереть</em></strong>. </p>

Активное изучение: Давайте будем важны!

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

Playable code

Курсив, жирный шрифт, подчеркивание...

Элементы, которые мы обсуждали до сих пор, имеют четкую привязку к семантике. Ситуация с <b>, <i> и <u> несколько сложнее. Они появились в эпоху, когда CSS  поддерживался плохо или вообще не поддерживался, чтобы люди могли писать жирный текст, курсив или подчеркнутый текст. Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.

HTML5 переопределил <b>, <i> и <u> с новыми, несколько запутанными, семантическими ролями.

Вот хорошее правило: предпочтительней использовать <b>, <i> или <u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчеркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.

  • <i> используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли ...
  • <b> используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения ...
  • <u> используется для передачи значения, традиционно передаваемого подчеркиванием: имя собственное, орфографическая ошибка . ..

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


<p>
  Колибри обыкновенный (<i>архилоус обыкновенный</i>) —
наиболее часто встречающийся вид колибри в северо-восточной Америке.
</p>


<p>
  Случился прилив иностранных слов, таких как <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> и <i lang="fr">soupe à l'oignon</i>.
</p>


<p>
  Когда-нибудь я узнаю, как <u>гаварить</u> без ошибок.
</p>


<ol>
  <li>
    <b>Отрежьте</b> два ломтика хлеба.
  </li>
  <li>
    <b>Добавьте</b> кусочек помидора и лист латука между ломтями хлеба. 
  </li>
</ol>

Вот и всё! Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области. В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе. В следующей статье мы подробно рассмотрим, как создавать гиперссылки, возможно, самый важный элемент в Интернете. 

SVG. Работаем с текстом

Выводим текст

Текст задаётся с помощью тега text. Основные атрибуты - x и y. Нужно не забывать указывать базовую линию для текста, за которую отвечает атрибут y. Если её не указать, то по умолчанию она окажется в точке с координатой 0, и текст станет невидимым, так как он рисуется над базовой линией. Значение атрибута должно быть больше размера шрифта. Размер viewBox также должно быть по крайней мере равен размеру атрибута. Атрибут font-sizeзадаёт размер шрифта в пикселях относительно viewBox. Текст при этом адаптируется к размерам страницы. Также доступны и другие атрибуты.

Текст из SVG можно выделять и копировать. Текст, помещаемый в SVG-документ, индексируется поисковыми системами.


<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
    <text y="50" font-size="32" font-weight="bold" 
    font-family="Avenir, Helvetica, sans-serif">
        Этот кот в SVG
    </text>
</svg>
Этот кот в SVG

Нужно следить за размерами viewBox, чтобы длинный текст уместился в контейнере.

Как и в HTML, лишние пробелы игнорируются.

Чтобы сдвинуть текст по горизонтали, можно использовать атрибут x в text. Если атрибут не указан, то используется значение по умолчанию 0.

Атрибуты

  • direction - Направление текста. В некоторых языках (например, в арабском) принято писать текст справа налево. Для задания написания справа налево необходимо дополнительно включать атрибут unicode-bidi. Возможные значения: rtl | ltr (по умолчанию)
  • dominant-baseline - Выравнивание текста относительно горизонтальной линии. Возможные значения: auto (по умолчанию) | hanging | mathematical
  • fill - Цвет текста. Поддерживаются именованные значения, а также RGB-код в десятичной и шестнадцатеричной формах. Значение по умолчанию - black
  • font-family - Шрифт текста. Все шрифты, доступные на компьютере. При отсутствии заданного шрифта будет использован подобный (например, при отсутствии шрифта Arial будет использован Arial Bold). Значение по умолчанию - Arial
  • font-size - Размер шрифта. Значение по умолчанию 12 пт.
  • font-size-adjust - Значение по умолчанию - none
  • font-stretch - Сжатие и растяжение текста. Возможные значения: normal (по умолчанию) | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
  • font-style - Начертание текста. Возможные значения: normal (по умолчанию) | italic | oblique
  • font-weight - Вес шрифта. От 100 до 900 - Эти значения формируют упорядоченную последовательность, где каждый номер обозначает вес, который темнее своего предшественника. normal - то же, что "400". bold - то же, что "700". bolder - Определяет вес шрифта, более темный, чем наследуемый. Если такого веса нет, результатом будет более "темное" числовое значение (а шрифт не изменяется), если только наследуемое значение не "900", в этом случае результат будет также "900". lighter - Определяет вес шрифта, назначаемый шрифту, который светлее, чем наследуемый. Если такого веса нет, результатом будет более "светлое" числовое значение (а шрифт не изменяется), если только наследуемое значение не "100", в этом случае результат будет также "100". Возможные значения: normal (по умолчанию) | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  • glyph-orientation-horizontal - Горизонтальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (и значения со знаком минус). По умолчанию - auto или 0
  • glyph-orientation-vertical - Вертикальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (И значения со знаком минус). По умолчанию - auto или 0
  • kerning - Интервал между буквами. Возможные значения: auto (по умолчанию) | число
  • letter-spacing - Интервал между буквами. Возможные значения: normal | число
  • text-anchor - Выравнивание текста относительно начала строки. Возможные значения: start (по умолчанию), middle, end
  • text-decoration - Подчеркивание, надчеркивание, перечеркивание текста. Возможные значения: none (по умолчанию) | underline | overline | line-through
  • unicode-bidi - Для работы атрибута direction со значением ltr необходимо наличие в коде свойства unicode-bidi со значением embed или override. Возможные значения: normal (по умолчанию) | embed | bidi-override
  • word-spacing - Интервал между словами. Возможные значения: normal (по умолчанию) | число
  • writing-mode - Устанавливает расположение текстового фрагмента как единого целого относительно исходной точки. Возможные значения, например, слева направо - сверху вниз ( left to right top to bottom ) не изменяют порядок самих букв в словах. Возможные значения: lr-tb (по умолчанию) | rl-tb | tb-rl | lr | rl | tb
  • x - Абсцисса верхней левой точки текстового блока. Значение по умолчанию: 0
  • y - Ордината верхней левой точки текстового блока. Значение по умолчанию: 0

Стилизация

Текст может быть стилизован с помощью свойств CSS, таких как font-weight, font-style, text-decoration, text-transform и т.д.


<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 20">
  <text x="0" y="15">Подчеркнутый кот средствами SVG</text>
</svg>
Подчеркнутый кот средствами SVG

Частичная стилизация через <tspan>

Если нужно применить стили или атрибуты только для определенной части, то можно использовать элемент <tspan> к разным частям текста в строке.


<svg xmlns="http://www. w3.org/2000/svg"  viewBox="0 0 500 20">
  <text x="0" y="15">
  <tspan>Жирный кот</tspan>, 
  <tspan>наклонный кот</tspan> и <tspan>подчеркнутый кот</tspan>.</text>
</svg>
Жирный кот, наклонный кот и подчеркнутый кот.

Цвет

Цвет текста задаётся через свойство fill.


<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 52">
    <text y="50" font-size="40" font-weight="bold" font-family="Avenir, Helvetica, sans-serif" fill="red">Цветной кот</text>
</svg>
Цветной кот

Режим вывода текста

Японская письменность использует режим сверху вниз. Этот режим можно включить через атрибут writing-mode со значением tb (top-to-bottom). Я не знаю японских иероглифов, поэтому вставлю русские символы.


<svg xmlns="http://www.w3.org/2000/svg">
  <text x="70" y="20">Неко - японский кот</text>
</svg>
Неко - японский кот

Добавление текста в заголовок страницы

Можно сделать красивый заголовок на странице, используя CSS:


header { 
  width: 80%;
  margin: 0 auto;
}
svg text { 
  font-family: sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 90px;
  fill: blue;
}

<header>
    <svg xmlns="http://www. w3.org/2000/svg" viewBox="0 0 285 80">
        <text x="0" y="66">Hawaii</text>
    </svg>
</header>

Посмотреть демо.

SVG будет автоматически подстраиваться под размеры контейнера.

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

SVG-текст можно сделать ссылкой.


<header>
    <img src="waves.svg" alt="Waves"> 
</header>

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

Обводка текста

Обводка для текста делается похожим образом, как в CSS, только вместо указания цвета для текста нужно использовать свойство fill. Если цвет не указан, то используется чёрный цвет.


<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
	<text y="50" fill="#c96" 
    font-size="32px" 
    font-family="Futura Condensed ExtraBold, Arial Black, sans-serif" 
    stroke="yellow" stroke-width="2px">Обведи кота вокруг пальца</text>
</svg>
Обведи кота вокруг пальца

Присвоим атрибуту fill значение none, чтобы оставить только обводку.

Обведи кота вокруг пальца

При желании можно вынести код в стили.


<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
	<defs>
		<style>
		text {  
		  fill: #c96; font-size:32px;
		  font-family: Futura Condensed ExtraBold, Arial Black, sans-serif;
		  stroke: yellow; stroke-width: 2px;
		}
		</style>
	</defs>
	<text y="50">Обведи кота вокруг пальца</text>
</svg>

Градиент

Текст можно сделать градиентным. Задаём цвета градиента при помощи linearGradient и присваиваем ему идентификатор. Связываем идентификатор с свойством fill.


<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient x1="0%" x2="0%" y1="0%" y2="100%">
      <stop stop-color = "#ddd" offset = "0%"/>
      <stop stop-color = "#FF00ee" offset = "100%"/>
    </linearGradient>
  </defs>
  <text x="0" y="40" font-size="42" font-weight="bold" fill="url(#textgradient)" stroke="none">Градиентный кот</text>
</svg>
Градиентный кот

Текст вдоль кривой линии

Текст можно выводить не только строго вдоль вертикальной линии, но и вдоль замысловатой кривой.

Для начала нужно создать траекторию path в элементе defs. Элементу path добавляем атрибут id, чтобы связать текст в элементе textPath через xlink:href:


<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path fill="none" stroke="#000000"
      d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>
  </defs>
  
  <use xlink:href="#textpath"/>
  <text x="10" y="100" font-size="24">
  <textPath xlink:href="#textpath">
    Кот вдоль кривой
  </textPath>
  </text>
</svg>
Кот вдоль кривой

Пример размещения текста вдоль окружности вынесен в отдельную статью.

Вернуться в раздел SVG

Реклама

Форматирование текста в HTML | SEO-портал

Автор: Нотан Ройамов

Создано:

Обновлено:

Форматирование (оформление) текста на сайте способствует улучшению его восприятия пользователями и учитывается поисковыми роботами при оценке релевантности.

Что такое форматирование текста?

Под форматированием (оформлением) понимается процесс изменения внешнего вида текста посредством придания определённого формата отдельным его элементам (словам, словосочетаниям, предложениям, абзацам и т. д.).

Значение форматирования текста в SEO

Оформление контента веб-страниц осуществляется с помощью семантических HTML-тегов, помогающих поисковым роботам правильно понимать значение элементов контента:

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

Яндекс.Помощь

Как правило, для пользователей контент веб-страницы является объектом беглого просмотра, поэтому оформление текста посредством HTML-разметки с применением CSS-свойств способствуют улучшению его восприятия:

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

Яндекс.Помощь

Качественное оформление текста на сайте положительно влияет на следующие поведенческие факторы:

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

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

Пример форматирования текста

Форматирование в HTML — это процесс оформления элементов контента посредством HTML-тегов с применением CSS-правил или без него.

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

  1. без форматирования (сплошной текст),
  2. с HTML-форматированием (только разметка),
  3. с HTML-форматированием и CSS-оформлением.

Очевидно, что лучше всего воспринимается текст на 3-м изображении: информация не только структурирована посредством разделения на заголовки, абзацы и элементы списка, но и приятно оформлена с помощью CSS.

Как оформлять текст?

В процессе форматирования текста изменяется его HTML-код за счет применения тегов (элементов разметки) к его содержанию.

Форматирование может осуществляться вручную в HTML-коде файла или с помощью функционала текстовых редакторов:

Форматирование в HTML-редакторе обеспечивает более качественный и чистый код, позволяющий поисковым роботам максимально правильно понимать семантику контента.

Теги форматирования текста в HTML

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

Ниже представлена таблица самых актуальных блочных и строчных HTML-тегов для текста.

Блочные элементы форматирования
Тег Значение
h2 Заголовок 1-го уровня
h3-h6 Подзаголовки
p Абзац
ul Маркированный список
ol Нумерованный список
table Таблица
blockquote Цитата
main* Основной контент
article* Автономная часть контента
section* Раздел контента или его части
figure* Элемент контента
header* Верхний колонтитул
footer* Нижний колонтитул
nav* Элементы навигации
* — теги, появившиеся в спецификации HTML5.
Строчные элементы форматирования
Тег Значение и отображение
a Гиперссылка
q Цитата
i Курсивное начертание
em Курсивное начертание
b Полужирное начертание
strong Полужирное начертание
s Перечеркнутый текст
del Перечеркнутый текст
ins Подчеркнутый текст
abbr Аббревиатура
dfn Термин
br Перенос строки
time* Время
mark* Выделенный текст
* — теги, появившиеся в спецификации HTML5.

Выводы и заключение

Качественное оформление SEO-текста способствуют:

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

Фразовые теги в HTML. Размечем тексты с помощью фразовых… | by Tatiana Fokina

Как уже сказала выше, форматирование делится на визуальное и логическое. За визуальное форматирование отвечают теги визуального форматирования, за логическое — теги логического форматирования. Последние называют ещё семантическими.

К тегам визуального форматирования относятся:

  • <span>;
  • <mark>;
  • <br> и <wbr>;
  • <i>;
  • <b>;
  • <sup> и <sub>;
  • <ruby>;
  • <u>;
  • <s>.

А это список тегов логического форматирования:

  • <a>;
  • <em>;
  • <strong>;
  • <cite>;
  • <code>;
  • <abbr>;
  • <dfn>;
  • <ins>;
  • <del>;
  • <q>;
  • <kbd>;
  • <samp>;
  • <var>;
  • <time>;
  • <small>;
  • <bdi> и <bdo>.

Сейчас расскажу подробнее о каждом фразовом элементе.

<span></span>

span — это контейнер для текста.

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

Со span можно использовать атрибуты class="", title="", lang="" и xml:lang="". Последний — это аналог lang в XHTML-документах.

-- HTML --
Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в <span>страшное насекомое</span>.-- CSS --
.scary {
color: tomato;
}

Так отобразится этот текст в браузере:

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

Это исключение — трюк с атрибутом lang="". Если в тексте есть иностранные слова, то можно оборачивать их в span с указанием другого языка. Тогда скринридер прочтёт их с правильным произношением.

В примере сайт на русском языке, но в тексте встречаются слова на английском. Укажем для неё другой язык:

<html lang="ru">
...
<body>
...
...
<p>Я больше не мёрджу бездумно. Как говорится, <span lang="en"> enough is enough</span>.
</p>

По умолчанию фраза внутри span не будет отличаться от остального текста.

<br> и <wbr>

br (break) переносит строку с текстом точно в том месте, где его поставили. При этом отдельный абзац не создаётся.

br пригодится для форматирования стихов, текстов песен или адресов. Во всех остальных случаях для разбиения на абзацы нужно использовать тег p.

Это одиночный тег и его не нужно закрывать.

Я сидел на пустом берегу.<br>Голубая вода Онтарио отражала череду моих мыслей —<br>Мир и войну, и мёртвых, навеки ушедших во тьму, чтобы воцарился мир.

В браузере этот текст выглядит так:

wbr (word break opportunity) ставит потенциальный разрыв строки.

Если у вас слишком длинные слова или URL-адреса, то смело используйте wbr. Он подходит для случаев, когда вы не уверены в месте переноса строки.

wbr тоже одиночный тег.

Сэло не удивился, узнав, что солнечные пятна действуют на его друзей, попавших в хроно<wbr>-синкластический инфундибулум.

Закрепим: тег br переносит строку сразу. С wbr браузер сначала анализирует ширину контейнера, а уже потом ставит перенос.

Если нужно добавить дефис в местах разрыва строк, то используйте символ мягкого переноса &shy; (-):

Эйя&shy;фьядла&shy;йёкюдль

Перенос сработает, когда ширина контейнера уменьшится.

<a></a>

a — ссылка.

С а всё просто. Используйте этот тег для ссылок на другие сайты или внутри одной страницы.

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

<a href="https://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D0%BF%D0%B8%D0%B1%D0%B0%D1%80%D0%B0" target="_blank" rel="noopener noreferrer">Статья про капибар</a>

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

Автоматический стиль ссылки в ChromeСтиль ссылки в FirefoxСсылка в Internet Explorer 11Ссылка в Microsoft Edge

Важно, чтобы ссылки точно описывали куда они ведут. Куда вы попадёте, кликнув по «Подробнее» или «Далее»? Нужно прочитать весь текст, чтобы это понять. У пользователей скринридеров тоже возникнут проблемы.

Для тех, кому важно сохранить лаконичность ссылок, Аарон Густафсон предлагает такой выход:

<a href="/speaking-engagements/">
<b>A List of My</b>
Speaking
<b>Engagements</b>
</a>

В примере текст ссылки скрывается на уровне CSS. То есть он будет доступен для пользователей со скринридерами, но не отобразится в браузере из-за свойств display: none; или visibility: hidden;.

При клике по ссылке новая страница открывается в том же самом окне. Этим поведение можно управлять с помощью атрибута target="".

В примере ссылке задано значение _blank. Это значит, что она откроется в новом окне. В этом случае обязательно указывайте rel="noopener noreferrer". Это поможет пользователям избежать фишинговых атак.

Якорные ссылки — это ссылки внутри одного документа.

Расставить такие ссылки просто. Для слова, к которому ведёт якорь, задайте id="". Для якоря укажите путь через атрибут href="#нужный-id". Ссылку для скринридеров можно описать в атрибуте aria-label="". Закрепим на примере:

В следующем <a href="#fat-cat" aria-label="Стрижка котов">параграфе</a> я подробнее расскажу о том, как правильно стричь кошек в теле.<a>Грумминг толстых котов</a>

Тег a — важная часть логической разметки.

<em></em> и <i></i>

em (emphasis) — эмфатическое ударение.

Эмфатическое ударение — выделение слова интонацией для усиления эмоциональной выразительности.

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

Эмфатическое ударение может понадобиться при уточнении или исправлении неверного слова, например, когда речь идёт о распространённом заблуждении. Ещё его используют, когда приводится контраргумент, чтобы выделить его значимую часть. Также эмфатическое ударение используется в сарказме. Ещё один случай использования — намёки.

Слово, на котором стоит эмфатическое ударение, может изменить значение всего предложения.

Обычно в тег em оборачивают одно или два слова. Если информация срочная или автор настаивает на своей точке зрения, то em можно выделить всё предложение.

-- Пример 1 --
Нет, это <em>он</em> выложил релиз в прод (не я).-- Пример 2 --
Да, мне <em>определённо</em> не хватает для полного счастья системной красной волчанки.-- Пример 3 --
На корабле что-то есть. <em>Нам нужно срочно эвакуироваться!</em>

Текст внутри em выделяется курсивом.

Это тег логического форматирования. Поэтому скринридеры и голосовые помощники произнесут слово «он» с особой интонацией.

i (italic) делает текст наклонным.

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

-- Пример 1 --
<i>Низкоуровневый язык программирования</i> — язык программирования, близкий к программированию непосредственно в машинных кодах используемого реального или виртуального процессора.-- Пример 2 --
Пришлось читать документацию, <i lang="fr">c'est la vie</i>.

Такой текст выделяется курсивом:

Если пишите слова на иностранном языке, то для i можно задать атрибут lang="" или xml:lang="" в XHTML-документах. Это поможет скринридерам и поисковым роботам.

Я работаю простым <i lang="en">cleaning manager</i>. 

👉 Запомните, em — семантический тег, а i нет.
Об особенностях использования и различиях em и i подробно написал Факундо Коррадини в статье «You’re using <em> wrong».

<strong></strong> и <b></b>

strong — логическое ударение.

Логическое ударение — выделение слова интонацией для усиления его смысла или повышения значимости.

С помощью strong подчёркивают важность слов и предложений.

Придумайте пароль. Не 1234 или qwerty. <strong>Никому не сообщайте его!</strong>

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

b (bold) делает текст полужирным.

Тег b используют для визуального форматирования. Он не усиливает смысловой вес слов, в отличие от strong.

Используйте b, если нужно выделить названия книг, фильмов, имён, ключевые слова и тому подобное. В статьях с его помощью выделяют лид — первый абзац статьи.

Играю в <b>The Elder Scrolls</b> со времён пылевых бурь и скальных наездников.

В браузере строчка отобразится так:

👉 strong нужен для логического форматирования, а b — для визуального.

<mark></mark>

mark — контекстное выделение текста.

Представьте, что готовитесь к экзамену. Вы распечатали ответы на вопросы и вооружились текстовыделителем, чтобы отметить самое главное. mark похож на текстовыделитель, только в вебе.

Этот тег нужен для визуального выделения слов, которые имеют значимость для конкретного автора и в определённом контексте.

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

-- Пример 1 --
Изюму из Малаги. Всё думала про Испанию. Перед тем как Руди родился. Такая <mark>фосфоресценция</mark>, голубовато-зеленоватая. Для мозга очень полезно.-- Пример 2 --
Чаще обращайтесь к argumentum ad populum: «<mark>Все мои знакомые говорят</mark>, что пользуются YotaPhone и ездят на ё-мобилях».

Хотя с точки зрения семантики mark более значим, чем span, это всё равно тег визуального форматирования.

mark автоматически заданы стили background-color: yellow; и color: black;.

<s></s>

s зачёркивает текст.

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

2+2=<s>5</s> 4

К s применяется свойство text-decoration: line-through;.

Этот тег нужен исключительно для визуального форматирования и не учитывается поисковыми роботами и скринридерами. Чтобы последние объявляли зачёркивание, спецификация рекомендует задавать псевдоклассам ::before и ::after нужное значение свойства content.

Вместо s можно использовать CSS. Задайте элементу text-decoration: line-through;.

-- HTML --
Невероятное предложение! Коробок спичек всего за <span>1000 $</span> 999 $.-- CSS --
.crossout {
text-decoration: line-through;
}

В браузере строка отображается так:

Раньше тексты можно было зачеркнуть с помощью тега strike. Сейчас он исключён из спецификации.

👉 s не подходит, если нужно нужно определить, когда и почему был удалён текст. В этом случае используйте del.

<u></u>

u (underline) подчёркивает текст.

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

Во втором случае в тег взято название страны 德國 — Германии.

-- Случай 1 --
Мышь (кр<u>о</u>дётся).-- Случай 2 --
我來自<u>德國</u>。

К содержимому u применяется свойство text-decoration: underline;.

Этот тег отвечает за визуальное форматирование.

👉 Не используйте u, если подчёркнутый текст можно перепутать со ссылкой.

<ins></ins> и <del></del>

ins (insert) определяет добавленный в документ текст.

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

С этим тегом можно использовать атрибуты cite="" и datetime="". Вcite пишут адрес документа, который объясняет, почему текст добавлен или отредактирован.
В datetime пишут дату и время редактирования или удаления текста. Формат: год-месяц-деньTчас:минуты:секунды:часовой пояс.

<ins cite="https://ru.wikipedia.org/wiki/Falcon_Heavy" datetime="2018-03-06T01:32:03Z">Апдейт. Falcon Heavy успешно запустили.</ins>

Браузер подчеркнёт этот текст.

del (delete) определяет удалённый или потерявший актуальность текст.

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

Для del доступны те же атрибуты, что и для ins: cite="" и datetime="".

<del>Маск не запустит Falcon Heavy.</del>

В браузере текст отобразится как зачёркнутый.

Когда в документе заменяют часть содержимого, то ins используют вместе с del.

<del>Маск вряд ли запустит Falcon Heavy.</del> 
<ins cite="https://ru.wikipedia.org/wiki/Falcon_Heavy" datetime="2018-03-06T01:32:03Z">Первый испытательный запуск Falcon Heavy был успешно произведён 6 февраля 2018 года. </ins>

Этот код глазами браузера.

ins и del нужны для логического форматирования.

<q></q>

q (quote) — короткая цитата.

Используйте q, когда дословно цитируете кого-то в предложении.

Для q можно задать атрибут cite="", в котором указывается источник цитаты.

Митник прав: <q cite="https://www.livelib.ru/book/1000092721-iskusstvo-obmana">Это естественно — стремиться к абсолютной безопасности, но это желание заставляет многих людей соглашаться с ложным чувством защищённости</q>.

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

Браузеры добавят для такого текста двойные кавычки.

q {
display: inline;
}q:before {
content: open-quote;
}q:after {
content: close-quote;
}

Так браузер отобразит текст внутри q.

Отображение <q></q> в Chrome

Минутка типографики. Браузеры автоматически ставят английские двойные кавычки “…”. Их используют в английском для оформления цитат.

q {
quotes: "\201c" "\201d";
}

Русская типографика отличается от английской. Вместо английских кавычек принято использовать французские — ёлочки. Они выглядят так: «…».

Чтобы заменить стандартные кавычки, задайте для свойства quotes значение “\00ab” “\00bb”;.

q {
quotes: "\00ab" "\00bb";
}

Вуаля.

👉 Если нужно выделить большую цитату, которая занимает несколько строк или целый абзац, используйте тег blockquote.

<cite></cite>

cite — источник цитаты.

Оборачивайте в cite цитируемые названия книг, статей, игр, фильмов, сериалов и любые ссылки на другие источники. Исключение — имена авторов. Для имён используйте b.

Аарон Густафсон написал книгу <cite>Adaptive Web Design</cite> в 2011 году.  В ней он …

Содержимое тегаcite отображается по умолчанию курсивом.

Тег cite семантический.

<abbr></abbr>

abbr (abbreviation) — аббревиатура или акроним.

Аббревиатура — слово, образованное сокращением слова или словосочетания. Примеры: ГЭС и ФСБ.

Акроним — вид аббревиатуры. Акронимы образуются начальными звуками слов, которые входят в сокращение. Примеры: W3C, A11Y и Бенилюкс.

В abbr можно можно раскрыть аббревиатуру в атрибуте title="".

<abbr title="Hypertext Markup Language">HTML</abbr> — это стандартизированный язык разметки документов в вебе.

Браузер подчеркнёт слово пунктирной линией, а при наведении появится всплывающая подсказка.

В чёрной оптимизации title использовали не по назначению. Из-за этого современные скринридеры игнорируют содержимое атрибута. Поэтому лучше раскрывать аббревиатуру при первом упоминании в самом тексте без title="".

<dfn>Hypertext Markup Language (HTML)</dfn> — это стандартизированный язык разметки документов в вебе.

Тег abbr семантический.

Помните, одна аббревиатура — один abbr. Если сокращение повторяется, то не надо его ещё раз оборачивать в этот тег.

👉 Раньше для акронимов использовали отдельный тег acronym, но он был исключён из последней версии стандарта. Так что пользуйтесь abbr и не ломайте голову над видом аббревиатуры.

<dfn></dfn>

dfn (definition) — термин.

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

В dfn можно вкладывать abbr, если это термин-аббревиатура.

<dfn><abbr>HTML</abbr></dfn> — это стандартизированный язык разметки документов в вебе.

Вместе с dfn можно использовать атрибут title="". В нём приводится определение термина.

Во втором примере в dfn вложен abbr. В этом случае аббревиатура раскрывается в атрибуте title="".

-- Пример 1 --
<dfn>Капибара</dfn> — полуводное травоядное млекопитающее из семейства водосвинковых.-- Пример 2 --
<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> — это стандартизированный язык разметки документов в вебе.

В браузере текст станет наклонным.

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

<code></code>

code — фрагмент компьютерного кода.

Используйте code для названий элементов языков программирования или целых строк кода.

Тег <code>code</code> используется для того, чтобы показать фрагмент JS-кода.

Отображается как текст, написанный моноширинным шрифтом.

code можно использовать внутри pre, если нужно сохранить исходное форматирование. В этом случае сохранятся авторские пробелы и переносы.

<pre>
<code> ul
each val in [1, 2, 3, 4, 5]
li= val
</code>
</pre>

Получим такое форматирование:

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

<samp></samp>

samp (sample) — результат вывода компьютерной программы или скрипта.

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

<p>Поиск выполнен.</p>
<p>
<samp>Обработано объектов: 82.<br>
Найдено подходящих объектов: 2.
</samp>
</p>

Браузеры сделают текст моноширинным.

samp можно комбинировать с pre и code.

<pre>
<code>console.log(2.3 + 2.4)<br></code>
<samp>4.699999999999999</samp>
</pre>

Получим такой текст:

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

👉 Тег tt (TeleType) выполняет похожую функцию. Не используйте его. Он устарел и исключён из стандарта.

<kbd></kbd>

kbd (keyboard) — названия клавиш.

Используйте kbd, если пишите названия клавиш и голосовые команды.

Чтобы выйти, нажмите сначала <kbd>Esc</kbd>, потом <kbd>:</kbd>, затем <kbd>q</kbd> и <kbd>Enter</kbd>.

Если нужно написать сочетание из нескольких клавиш, то вложите дочерние kbd в общий контейнер.

Скопируйте, нажав <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>.

Текст внутри kbd написан моноширинным шрифтом.

kbd может содержать тег samp или быть вложенным в него.

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

Найдите пункт с настройками по пути
<kbd>
<kbd><samp>File</samp></kbd> →
<kbd><samp>Settings</samp></kbd>
</kbd>

Так отобразит текст браузер.

В samp вкладывают kbd, когда нужно показать как система интерпретировала пользовательский ввод.

<p>
<samp>yarn start:theproject does not exist, did you mean:</samp>
</p>
<blockquote>
<samp>
<kbd>yarn start:the-project</kbd>
</samp>
</blockquote>

Браузер использует для текста всё тот же моноширинный шрифт:

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

<var></var>

var (variable) — переменная.

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

-- Пример 1 --
У нас есть <var>число 1</var> и <var>число 2</var>.-- Пример 2 --
Она написала <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.

Браузеры выделят var курсивом.

👉 Для сложных математических формул и расчётов используйте специальный язык разметки MathML.

<small></small>

small — дополнительная информация.

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

<p><small>© 2013-2018, команда капибар</small></p>

Размер small зависит от основного размера шрифта и гарнитуры. К тегу применяется свойство font-size: smaller;, которое уменьшает шрифт на одну условную единицу.

Можно вкладывать один тег small в другой.

<p>Всем, всем, всем!
</p>
<p>
<small> У нас самая выгодная ставка по ипотеке.
<small>Предложение действительно, если ваш доход выше 100 веточек в месяц.
</small>
</small>
</p>

В этом случае размер текста будет меньше с каждым уровнем вложенности.

👉 Раньше small использовался для физического форматирования вместе с big. В последней спецификации он приобрёл семантическое значение, а big был исключён. Вместо big спецификация рекомендует использовать CSS.

<sup></sup> и <sub></sub>

sup (superscript) — надстрочный текст.

Надстрочным текстом пишут сноски или математические знаки и символы.

-- 1 пример --
В день нужно платить всего 0,666 % <sup>*</sup>-- 2 пример --
a<sup>n</sup> × a<sup>k</sup>= a<sup>n+k</sup>

Надстрочный текст расположен над базовой линией, а его высота в два раза меньше основного. К sup по умолчанию применяются свойства vertical-align: super; и font-size: smaller;.

sub (subscript) — подстрочный текст.

Подстрочный текст используется в формулах.

H<sub>2</sub>SO<sub>4</sub>

Подстрочный текст меньше в высоту и располагается ниже базовой линии. По умолчанию sub заданы свойства vertical-align: sub; и font-size: smaller;.

👉 Для сложных математических формул используйте язык разметки MathML.

<ruby></ruby>

ruby — верхняя или нижняя текстовая аннотация.

Тег связан с агатом — типографским шрифтом, размер букв в котором равен 5,5 пунктам.

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

Внутрь ruby вкладываются теги rt и rp.
В rt размещается аннотация к тексту.
Тег rp нужен для аннотаций для браузеров, которые не поддерживают ruby. Если браузер поддерживает ruby, то текст не отобразится.

<ruby>  
東 <rt>tō</rt>
京 <rt>kyō</rt>
</ruby>

Браузеры разместят один текст над другим и уменьшат надстрочный шрифт.

Токио!

Можно вкладывать один элемент ruby в другой. В этом примере указана транскрипция слов на хирагане и английском языке.

<ruby>
<ruby>東
<rt>とう</rt>南
<rt>なん</rt>
</ruby>
<rt lang=en>Southeast</rt>
</ruby>の方角

Текст в браузере отобразится так:

«Юго-восточное направление»

Тег ruby нужен для визуального форматирования.

<bdo></bdo> и <bdi></bdi>

bdo (bi-directional override) — изменение направления текста.

Тег bdo будет полезен, если на сайте несколько языков, один из которых читается справа налево или наоборот. Справа налево пишут в арабском языке и иврите.

В bdo обязательно нужно указывать атрибут dir="", который задаёт направление текста:
rtl — справа налево;
ltr — слева направо.

<bdo dir="rtl">קביברה</bdo> в переводе с иврита означает «капибара».

В браузере предложение выглядит так:

bdi (bi-directional isolate) — отмена изменения направления текста.

Используйте bdi для слов, которых не должно касаться изменение направления текста. Это полезно, когда направление текста заранее не известно или есть слова из языка с другим направлением.

В примере в тексте на иврите есть слово на английском, которое нам не нужно разворачивать.

-- HTML --
<div><bdi>C++</bdi> היא שפת תכנות מרובת פרדיגמות המבוססת על שפת התכנות C‏, שפותחה בשנות ה־80.-- CSS --
.content-rtl {
direction: rtl;
}

По умолчанию для bdi задан атрибут dir="auto".

Поведение bdi можно заменить стилями. Примените к span правило unicode-bidi: isolate;. Только помните, что в этом случае браузер не сможет понять семантику, которая передаётся с помощью bdi.

👉 На сентябрь 2018 bdi поддерживается браузерами частично.

<time></time>

time — дата и время в машиночитаемом формате.

Используйте time, если в тексте указаны точные даты и время. Это может быть время отправки комментария или сообщения, расписание, архив, календарь.

Этот тег не стоит использовать, если:

Внутри time можно использовать несколько атрибутов:
datetime="" — дата и время в машиночитаемом формате;
pubdate="" — дата публикации документа;
title="" — дополнительная информация.

Время указывается внутри time или в атрибуте datetime. Во втором примере в datetime указаны число и месяц.

-- Пример 1 --
<time>2 ноября 2018 года</time>.-- Пример 2 --
Акции Tesla упали из-за поведения Илона Маска в прямом эфире в <time datetime="09-07">в эту пятницу</time>. -- Пример 3 --
Мем опубликован <time title="Понедельник, 12-50">7 часов назад</time>.

Браузер отобразит эти строки как обычный текст. Содержимое атрибута title станет всплывающей подсказкой.

Формат времени в datetime="" жёстко определён.

  • Год: 1985.
    Должен состоять из четырёх и более цифр.
  • Год и неделя: 1984-W38.
    W — номер недели.
  • Год и месяц: 1985-10.
  • Год, месяц, день: 1985-10-25.
  • Месяц и день: 10-25.
  • Часы и минуты: 1:15.
  • Часы, минуты, секунды: 1:15:39.
  • Часы, минуты, доли секунд: 1:54:39.929.
    Доли нужно округлять до трёх знаков.
  • Дата и время, разделённые «T» или пробелом: 1985-10-25T1:15. Время можно указывать с секундами и долями секунд: 1985-10-25T1:15:39.
  • Часовой пояс можно задать несколькими способами: Z или +0000, +00:00, -0800, -08:00.
    Двоеточие можно не использовать.
  • Местная дата и время: 1985-10-25T1:15Z.
  • Временной интервал: P2T4h28M3S.
    P, количество дней, T, количество часов (H), минут (M) и секунд (S). Дни и часы можно не указывать.
  • Временной интервал можно указать другим способом: 1w 2d 2h 30m 10.501s.
    w — недели, d — дни, h — часы, m — минуты, s — секунды.
    Можно писать слитно, а буквы могут быть в любом регистре.

В спецификации есть полный список форматов записи времени.

time нужен для логического форматирования и важен для поисковиков. Благодаря этому тегу ссылки в поисковой выдачи размещаются в хронологическом порядке.

Браузеры автоматически преобразовывают дату из григорианского календаря в другую систему исчисления времени. Например, японский браузер покажет <time>16:00</time> как «16:00時». «時» означает «час».

И немного информационного дизайна. В блоге UX-дизайнера Михаила Озорнина есть советы о том, как писать дату и время в интерфейсах.

Фразовые теги — это важная часть HTML-разметки. Эти теги отвечают за визуальное и логическое форматирование. Благодаря этому тексты становятся понятными для пользователей и разных технологий.

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

Всего лишь пара фразовых тегов сделает код структурированным и предсказуемым, а страницы доступными.

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

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

Наконец, благодаря фразовым тегам вспомогательные технологии могут понимать тексты.

Работа с текстом в HTML

5572 Посещений

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

Виды шрифтов

Если вы хотите выделить тот или иной участок текста, воспользуйтесь тегом <strong> или <b>:

<strong>текст</strong>

<b>текст</b>

За курсив отвечают теги <i> и <em>:

<i>текст</i>

<em>текст</em>

Подчеркнутый шрифт гарантирует тег <u>:

Что касается надстрочного и подстрочного индекса, то здесь вам помогут теги <sup> и <sub>:

<sup>текст</sup>

<sub>текст</sub>

Например:

<html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>Работа с текстом в HTML</title>

</head>

<body>

<p><strong>Содержание:</strong></p>

<ul>

<p dir="ltr"><li><em>Что такое HTML и CSS. </em></li></p>

<p dir="ltr"><li><u>Введение в понятия HTML и CSS.</u></li></p>

<p dir="ltr"><li>Что такое <sup>HTML.</sup></li></p>

<p dir="ltr"><li>Как выглядит <sub>HTML-документ.</sub></li></p>

</ul>

</body>

</html>

Как отображается в браузере:

Создание блока с отступом

Блок с отступом делается при помощи тега <BLOCKQUOTE>:

<BLOCKQUOTE>текст</BLOCKQUOTE>

Например:

<p><strong><BLOCKQUOTE>Содержание:</BLOCKQUOTE></strong></p>

Как отображается в браузере:

Цвет, стиль и размер шрифта

Такие параметры как цвет, стиль и размер шрифта по умолчанию задаются тегом <BASEFONT> (не имеет отношения к заголовкам). У данного тега есть такие атрибуты как:

  • color = (цвет шрифта).
  • size = (размер шрифта: целое число от одного до семи).
  • face = (список названий шрифтов, прописанных через запятую).

Например:

Для изменения размера шрифта используется атрибут size тега <font>. Например:

<html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>Работа с текстом в HTML</title>

</head>

<body>

<p><strong><BLOCKQUOTE><font size="2">Содержание:</font>

</BLOCKQUOTE></strong></p>

<ul>

<p dir="ltr"><li><em><font size="3">Что такое HTML и CSS. </font></em></li></p>

<p dir="ltr"><li><u><font size="4">Введение в понятия HTML и CSS.</font></u></li></p>

<p dir="ltr"><li><font size="5">Что такое <sup>HTML.</sup></font></li></p>

<p dir="ltr"><li><font size="6">Как выглядит <sub>HTML-документ.</sub></font></li></p>

<p dir="ltr"><li><font size="7">Что такое CSS.</font></li></p>

</ul>

</body>

</html>

Как отображается в браузере:

Чтобы задать цвет используйте атрибут color тега <font>. Например:

<html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>Работа с текстом в HTML</title>

</head>

<body>

<p><strong><BLOCKQUOTE><font size="2" color= "FF0000">Содержание:</font>

</BLOCKQUOTE></strong></p>

<ul>

<p dir="ltr"><li><em><font size="3" color= "7FFF00">Что такое HTML и CSS. </font></em></li></p>

<p dir="ltr"><li><u><font size="4" color= "40E0D0">Введение в понятия HTML и CSS.</font></u></li></p>

<p dir="ltr"><li><font size="5" color= "BA55D3">Что такое <sup>HTML.</sup></font></li></p>

<p dir="ltr"><li><font size="6" color= "FFFF00">Как выглядит <sub>HTML-документ.</sub></font></li></p>

<p dir="ltr"><li><font size="7" color= "FF69B4">Что такое CSS.</font></li></p>

</ul>

</body>

</html>

Как отображается в браузере:

Чтобы задать шрифт, используйте атрибут face тега <font>:

<font face="название шрифта"></font>< /FONT>

Обратите внимание на то, что вы можете задавать несколько шрифтов, разделив их запятой:

<p><strong><BLOCKQUOTE><font size="2" color= "FF0000" face="Impact", "Arial Cyr", "Arial", "MS Sans Serif">Содержание:</font> </BLOCKQUOTE></strong></p>

Переход на следующую строку и выравнивание текста

Для перехода на следующую строку используется тег <br>. Например:

<p dir="ltr"><li>Как<br> подключить<br> CSS<br> к<br> HTML.</li></p>

Как отображается в браузере:

Для выравнивания текста по центру, левому, правому или обоим краям выполняется при помощи атрибута align тега <div>. Значения атрибута:

  • ALIGN="LEFT" — выравнивание по левому краю.
  • ALIGN="RIGHT" — выравнивание по правому краю.
  • ALIGN="CENTER" — выравнивание по центру .
  • ALIGN="JUSTIFY" — выравнивание по обоим краям.

Напомним также, что все эти значения можно задавать в CSS.

Оформление текста - Яндекс. Вики. Справка

Выделение текста

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

Разметка Результат
**Полужирный текст**
*Курсив*
_Курсив_
__Подчеркнутый текст__
~~Зачеркнутый текст~~
??Выделенный текст??
!!(син)Текст синего цвета!!

Поддерживаются цвета:

  • red / крас / красный;

  • green / зел / зеленый;

  • blue / син / синий;

Разметка Результат
**Полужирный текст**
*Курсив*
_Курсив_
__Подчеркнутый текст__
~~Зачеркнутый текст~~
??Выделенный текст??
!!(син)Текст синего цвета!!

Поддерживаются цвета:

  • red / крас / красный;

  • green / зел / зеленый;

  • blue / син / синий;

Сочетание элементов оформления

К одному фрагменту текста можно применить сразу несколько элементов оформления:

Разметка Результат
_**Полужирный курсив**_
*!!Красный курсив!!*
Разметка Результат
_**Полужирный курсив**_
*!!Красный курсив!!*

Элементы оформления текста можно использовать совместно с другими элементами разметки:

Разметка Результат
**[Полужирная ссылка](http://example. com)**
>Цитата с *курсивом*
Разметка Результат
**[Полужирная ссылка](http://example.com)**
>Цитата с *курсивом*

Всплывающая подсказка

Чтобы добавить к фрагменту текста всплывающую подсказку, например определение термина, используйте разметку:

Разметка Результат
(?Термин Определение термина?)
(?Термин с пробелами==Определение термина?)
Разметка Результат
(?Термин Определение термина?)
(?Термин с пробелами==Определение термина?)

Свойства в CSS: текст | Шнайдер блог

1717 Посещений

Благодаря свойствам CSS вы не только создаете текстовые эффекты, настраиваете шрифт, цвет и фон, но и «форматируете» текст по своему усмотрению. Рассмотрим ключевые свойства:

  • текст-оформление 一 оформление текста. Возможны такие значения:
  • нет 一 оформление по умолчанию.
  • подчеркивание 一 подчеркивание.
  • черта 一 черта над текстом.
  • сквозной 一 зачеркнутый текст.

Например:

Текст

<стиль>

h2 {

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

}

h3 {

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

}

h4 {

оформление текста: над чертой

}

h5 {

оформление текста: сквозное

Оформление по умолчанию.

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

Линия над текстом.

Зачеркнутый текст.

В браузере:

  • text-align 一 горизонтальное выравнивание текста. Значения: left, center, right, ustify.Например:

<стиль>

h2 {

оформление текста: нет; выравнивание текста: центр

}

h3 {

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

}

h4 {

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

}

h5 {

оформление текста: сквозное; выравнивание текста: ustify

В браузере:

  • текст-отступ 一 отступы в абзацах. Отступы задаются как в процентах, так и в единицах измерения. Кроме того, значения могут быть положительными и отрицательными. Например, чтобы задать красную строку, добавить в CSS следующее:

Текст

<стиль>

п {

отступ текста: 1.2em;

}

Благодаря свойствам CSS вы не только совершенствуете списки, создаете эффекты, настраиваете шрифт, цвет и фон, но можете и «форматировать» текст по своему усмотрению.

В браузере:

  • text-transform 一 смена регистра. Значения:
  1. использовать капитал 一 первая буква каждого слова заглавная.
  2. прописные 一 все буквы заглавные.
  3. строчные 一 все буквы строчные.
  4. нет 一 по умолчанию.

Например:

Текст

<стиль>

h2 {

преобразование текста: заглавные буквы;

}

h3 {

преобразование текста: прописные буквы;

}

h4 {

преобразование текста: нижний регистр;

}

ч5

{

преобразование текста: нет;

Первая буква каждого слова заглавная.

Все буквы заглавные.

Все буквы строчные.

По умолчанию.

В браузере:

Интервалы. За расстояние между буквами в словах и строках задаются несколько свойств, а задаются они в процентах и ​​единицах измерения:

  • интервал между словами 一 интервал между словами.
  • межбуквенный интервал 一 интервал между буквами.
  • высота строки 一 интервал между строками.

Например:

Текст

<стиль>

h2 {

интервал между словами: 15 пикселей;

}

h3 {

межбуквенный интервал: 10 пикселей;

}

h4 {

высота строки: 35 пикселей;

}

Свойство word-spacin.

Свойство letter-spacing.

Свойство line-height.

Свойство line-height.

Свойство line-height.

В браузере:

способов.text-decoration-skip - убираем подчеркивание для элементов

Рассмотрим все способы, как можно сделать подчеркнутый текст через html и CSS. Всего существует три варианта:

  • Через html тег и
  • Через свойство CSS text-decoration.
  • Через свойство CSS border-bottom

Подчеркнутый текст через html тег и

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

Название пришло от английского слова «подчеркивание». HTML тег считается более новым.

Например

Обычный текст.

Обычный текст. Подчеркнутый текст через тег ins

Преобразуется на странице в

Обычный текст. Подчеркнутый текст через тег u

Обычный текст.

Подчеркнутый текст через свойство CSS text-decoration

В CSS есть свойство text-decoration , которое отвечает за форматирование текста html для создания подчеркивания.

Синтаксис CSS text-decoration

текст-украшение : нет | подчеркивание | наложение | сквозная линия | наследование ;
  • нет - текст без оформления
  • подчеркивание - нижнее подчеркивание
  • над чертой - верхнее подчеркивание
  • линейный - зачеркивание текста
  • мигает - мерцающий текст (рекомендуется не применять это значение)

Нас интересует значение подчеркнуть

Например:

Текст со своимством text-decoration: подчеркивание

Преобразуется на странице в

Текст со своимством text-decoration: подчеркивание

Подчеркнутый текст через свойство CSS border-bottom

Свойство CSS border-bottom создано для создания рамок (границ) объекта снизу. Естественно таким образом можно задавать и подчеркивать тексту.

Рассмотрим пример

Преобразуется на странице в

Текст со своимством border-bottom (красное подчеркивание)
Текст со своимством border-bottom (пунктирное подчеркивание)

Задача

Решение

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

Для создания линии следует использовать свойство border-bottom со значением штриховой , добавляя его к селектору A . Чтобы указать применялось не ко всем ссылкам, указать уникальный класс, назовем его, например dot . Также необходимо убрать исходное подчёркивание ссылок с помощью свойств text-decoration со значением нет (пример 1).

Пример 1. Пунктирное подчеркивание

HTML5 CSS 2.1 IE Cr Op Сб Fx

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

Результат пример на рис. 1.

Толщина линии и цвет подчеркивания ссылок также задаются через свойство border-bottom .

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

Вариации подчеркивания

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

демонстрация подчеркивания

HTML

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

УСС

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

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

A { дисплей: встроенный блок; положение: относительное; текстовое оформление: нет; }

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

A :: before { дисплей: блок; позиция: абсолютная; содержание: ""; высота: 2 пикселя; ширина: 0; цвет фона: красный; переход: ширина 0,5s для облегчения входа-выхода, влево 0,5s для выхода из положения; осталось: 50%; внизу: 0; }

Т.е. высота линии подчеркивания будет 2px, длина 0, красного цвета, а за анимацию возвращает свойство transition. Ну и конечно же, отступ слева на 50%, т.е. центральная точка. Практически те же действия производим и с псевдоэлементом :: after:

A :: after { дисплей: блок; позиция: абсолютная; содержание: ""; высота: 2 пикселя; ширина: 0; цвет фона: красный; переход: ширина 0,5с, легкость входа-выхода; осталось: 50%; внизу: 0; }

A: hover :: before { ширина: 50%; слева: 0; } a: hover :: after { ширина: 50%; }

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

Подчеркивание для блочных элементов вроде тега

создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom , его выступает одновременно толщиной линии, ее стиль и цвет (пример 1).

Пример 1. Линия на всю ширину

HTML5 CSS 2.1 IE Cr Op Сб Fx

Линия под заголовком

Расстояние от линии до текста можно регулировать своимством padding-bottom , добавляя его к селектору h2 .Результат данного примера показан на рис. 1.

Подчеркивание текста

Чтобы подчеркнуть только текст, необходимо воспользоваться text-decoration со значением подчеркивания , опять же, добавляя его к селектору h2 (пример 2).

Пример 2. Линия на ширину текста

HTML5 CSS 2.1 IE Cr Op Сб Fx

Подчеркивание заголовка

Черный заголовок привлекает к себе внимание, Несмотря на то, что он черный, а не белый.

Результат примера показан на рис. 2.

В случае использования свойства text-decoration линия жестко привязана к тексту, определить ее положение и стиль не удастся.

или изучаем теги, форматирующие HTML текст

Вашему вниманию представлен один из ключевых и самых простых уроков самоучителя.

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

Смотрите ниже теги, форматирующие HTML текст :

  • Теги → жирный HTML текст (жирный шрифт).
  • Теги → жирный HTML текст (жирный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги → моноширинный HTML текст (моноширинный шрифт).
  • Теги → HTML текст , размер больше обычного (крупный шрифт).
  • Теги HTML текст , размер меньше обычного (мелкий шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → наклонный HTML текст (наклонный шрифт).
  • Теги → подчеркнутый HTML текст (подчеркнутый шрифт).
  • Теги → зачеркнутый HTML текст (зачеркнутый шрифт).
  • Теги HTML текст (шрифт) в нижнем индексе.
  • Теги HTML текст (шрифт) в верхнем индексе.

HTML форматирование текста: зачеркнутый, подчеркнутый текст

Результат: ... моноширинный шрифт

Результат: ... размер шрифта больше обычного

Результат: ... наклонный шрифт.

Результат: зачеркнутый текст (зачеркнутый шрифт)

Результат: верхний индекс

С пособы форматирования, представленные выше правила только для небольших участков текста.П возможность CSS если хотите установить определенный шрифт для всей страницы, или для нескольких строк, например.

Форматирование теста | Йоктон

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

Элемент является новым в HTML5 и используется для пометки или выделения текста в документе наиболее распространенным примером его использования является выделение результата поиска.
Например,

  

Ниже приведен некоторый контент, содержащий поиск . Выделение текста облегчит пользователю нахождение искомого.

Отобразит:
Ниже приведен некоторый контент, содержащий запрос поиск .Выделение текста облегчит пользователю нахождение искомого.

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

Для полужирного текста використовуйте теги или :

   Это жирный текст   

или

   Это жирный текст   

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

Для использования курсива применяйте теги или :

   Это курсивный текст   

или

   Это курсивный текст   

Разница между ними только в семантике. Тег используется, чтобы указать, что текст должен иметь дополнительный акцент, который следует подчеркнуть, тег не указывает на такое значение, а просто представляет текст, который должен быть выделен курсивом.
Например, если вы хотите подчеркнуть действие внутри предложения, можно сделать это, выделив его курсивом через : "Вы уже отправили отчет?"
Но если вам нужно идентифицировать книгу или газету, которую обычно выделяют стилистически, вы можете использовать просто : "Я прочитал Ромео и Джульетту в старшей школе."

Хотя сам элемент устарел еще в HTML4, он снова введен с альтернативным смысловым значением в HTML5 - для представления неартикулированной, нетекстовой аннотации.Вы можете использовать такое выделение для обозначения текста с ошибками или для выделения имени пользователя в Китае.
Рекомендуется избегать использования элемента там, где его можно спутать с гиперссылками.
Пример:

  

Этот параграф содержит некоторый ошЫбочный текст.

Этот параграф содержит некоторый ошЫбочный текст.

Чтобы отметить какое-то выражение как аббревиатуру, используйте тег :

  

Мне нравится писать на HTML !

Мне нравится писать на HTML !
Если присутствует, атрибут название , то он позволяет увидеть полное описание такой аббревиатуры.

Чтобы пометить текст как вставленный, використовуйте тег :

   Новый текст   

Новый текст

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

   Удаленный текст   

Удаленный текст
Элемент del представляет собой удаление из документа. Такие элементы не должны пересекать подразумеваемые границы абзаца.

Чтобы пометить текст как перечеркнутый, викорите тег :

   Перечеркнутый текст   

Перечеркнутый текст
Элемент s представляет собой содержимое, которое больше не является точным или не актуально.

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

  x  2  + x-4 = 0  

х 2 + х-4 = 0

Чтобы создать нижний индекс:

  HCl + NaOH = H  2  O + NaCl  

HCl + NaOH = H 2 O + NaCl

HTML Ссылки

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

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

По умолчанию HTML ссылки как подчеркнутый текст синего цвета. При наведении курсора мыши на ссылку, она становится красной. Ссылки, по которым уже кликали (посещенные ссылки), становятся фиолетовыми.

  • не посещенные ссылки: подчеркнутый текст синего цвета
  • посещенные ссылки: подчеркнутый текст фиолетового цвета
  • активные ссылки: подчеркнутый текст красного цвета

Изменить цвет ссылок и убрать подчеркивание можно при помощи CSS стилей.

Синтаксис

Для того, чтобы сказать браузеру, что данный часть текста является ссылкой, поместите его в тег ․ Адрес документа, на который следует перейти, указывается при помощи атрибута href.

Выглядит это так:

   текст ссылки .  

Пример¶

  

   
        Заголовок окна веб-страницы 
   
   
       

Пример ссылки

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

Результат¶

В этом примере мы использовали тег

, чтобы определить подзаголовки и тег , чтобы создать ссылки.Между тегами и мы поместили W3Docs.com. Нажмите на него и будете перенаправлены на домашнюю страницу нашего веб-сайта.

Атрибут target¶

Для того, чтобы ссылка открывалась в окне, необходимо добавить атрибут target, значение которого является "_blank" .

   W3Docs.com   

Не забудьте добавить слеш (/) к ссылке.

ID атрибута

Атрибут id используется для создания уникального идентификатора части документа для того, чтобы к нему можно было обращаться.

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

  1. Создать уникальный идентификатор для этой части текста. Идентификатором может быть слово или фраза (если вы используете фразу, между словами не должно быть пробела, можно использовать нижнее обозначение).
    Пример. Здесь находится часть текста с уникальным представителем «пример», куда пользователь будет перенаправлен после указанной ссылки.
  1. Создать гиперссылку с указанием id, которому предшествует символ решетка #.
    Пример. Когда мы кликнем на эту ссылку, мы будем перенаправлены на часть текста уникальным представителем «пример»

Теперь давайте посмотрим, как это выглядит в коде HTML.

Пример

  

   
        Заголовок окна веб-страницы 
   
   
       

Пример ссылки с атрибутом id

Здесь находится часть текста с уникальным представителем «пример», куда пользователь будет перенаправлен после указанной ссылки Когда мы кликнем на эту ссылку, мы будем перенаправлены на часть текста с уникальным указателем «пример»
Попробуйте сами!

Результат¶

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

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

  1. src - источник изображения
  2. alt - альтернативный текст
  3. width - ширина изображения
  4. height - высота изображения

Пример¶

  

   
        Заголовок окна веб-страницы 
   
   
      
           logo
      
  
  
Попробуйте сами!

Результат¶

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

Об HTML изображениях мы поговорим подробнее в новой главе.



Двойной тег подчеркивания? - CodeRoad



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

  

веб-сайт

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

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

9 ответов


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

    Каково лучшее место в документе для включения шаблонов подчеркивания Javascript? До сих пор я видел шаблоны, включенные в тег или .Что более уместно? Существуют ли последствия для производительности (скорость загрузки страницы) для любого подхода? У меня есть свои ...

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

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



40

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

  h2.dblUnderlined {border-bottom: 3px double; }
  

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

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



25

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

  .doubleUnderline {
    текст-оформление: подчеркивание;
    нижняя граница: 1px solid # 000;
}

 Тест 
  

Вот рабочий скрипка.

Поделиться Джеймс Хилл 26 марта 2013 в 17:29



4

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

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

веб-сайт

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

foobar

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

  h2 {
  нижняя граница: двойные 3 пикселя;
}
  

Если вы хотите иметь только текст заголовка «подчеркнутый», самый простой способ иметь внутренний код разметки, например

foobar

и CSS

  h2 span {
  нижняя граница: двойные 3 пикселя;
}
  

Поделиться Юкка К.Корпела 26 марта 2013 в 18:33


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

    Я хочу сделать поиск на сайте ASP.NET MVC 3, поэтому для поиска я должен найти совпадающие шаблоны и в этих словах совпадающую часть на ту же часть полужирным шрифтом (я использую этот тег html ). Так что у меня есть это в моем контроллере string [] words = content.Split ('...

  • Возвышенный текст и дефисы против подчеркивания

    Я столкнулся с проблемой с дефисами в возвышенном тексте 3, и я искал некоторую помощь.Я бы хотел, чтобы они работали так же, как и подчеркивания. С подчеркиванием, двойным щелчком на word_one выделяется все это, с помощью клавиатуры с ctrl-right переходит к подчеркиванию. С помощью дефисов, двойной ...



2

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

  оформление текста: двойное подчеркивание;
-webkit-text-decoration: двойное подчеркивание;
  

Увидеть text-decoration-line.

Поделиться Фабьен Снауварт 30 марта 2015 в 18:16



2

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

  .doubleUnderline {
     текст-украшение-строка: подчеркивание;
     стиль оформления текста: двойной;
}
  

Поделиться Тайлер Райт студент 09 октября 2018 в 13:48



1

Почему бы просто не сделать свой собственный "тег"?

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

Я хочу, чтобы этот материал был подчеркнут дважды.

http://jsfiddle.net/eoba541g/2/

Поделиться Ким Дженсен 12 сентября 2018 в 10:21



0

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

или

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

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



0

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

  $ borderWidth 1px
$ textColour черный

$ двойные границы
    &:после
        содержание ""
        абсолютное положение
        топ 100%
        ширина 5.7em
        справа 0
        border-top ($ borderWidth * 3) двойной $ textColour

. двойное подчеркивание
    @extend $ двойные границы
  

Обратите внимание, что ширина должна быть жестко закодирована (в данном случае 5.7em ).

Поделиться пользователь 1429980 19 сентября 2014 в 20:39



–1

  

О нас

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

Поделиться Акса Шахзади 17 октября 2019 в 09:21


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


Подчеркивания в литералах не поддерживаются на этом уровне языка

Я получил эту ошибку при создании окончательного двойника, используя подчеркивания, чтобы сделать двойной более читаемым. Он был объявлен в методе run (). public void run () {final double...


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

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


wysihtml5 - как отключить тег подчеркивания

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


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

Каково лучшее место в документе для включения шаблонов подчеркивания Javascript? До сих пор я видел шаблоны, включенные в тег или . Что более уместно? Существуют ли ...


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

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


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

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


Возвышенный текст и дефисы против подчеркивания

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


тег работает только на двойной щелчок, а не один клик

Привет у меня есть тег, который работает на двойной щелчок, но не на один клик. У меня есть функция javascript, вызываемая на теге. Может кто-то помочь на том же. Ниже приведен тег и ...


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

Я использую атрибуты управления html в файле xml, как показано ниже

Быстрый бурая лисица прыгает над ленивым ...


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

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

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

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

Наиболее распространённые стили

подчеркивание - подчёркивание текста сплошной линией.

 
HTML

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

 
CSS

.box {
    ширина: 300 пикселей;
    маржа: 0px авто;
    отступ: 3px 20px;
    радиус границы: 8 пикселей;
    цвет фона: # fc0;
    граница: 3px solid # 960;
}
.box p {
    размер шрифта: 25 пикселей;
    font-weight: жирный;
    выравнивание текста: центр;
    текст-оформление: подчеркивание;
}

  

сквозное - вывод перечеркнутого текста.

 
HTML

Перечёркнутый текст.

 
CSS

.box p {
    размер шрифта: 25 пикселей;
    font-weight: жирный;
    выравнивание текста: центр;
    оформление текста: сквозное;
}

  

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

 
HTML

Отмена эффектов.

 
CSS

.box p {
    размер шрифта: 25 пикселей;
    font-weight: жирный;
    выравнивание текста: центр;
    текстовое оформление: нет;
}

  

Менее использованное стили

overline - отображает текст с линией поверх него.

 
HTML

Линия над текстом.

 
CSS

текст-украшение: надстрочный;

  

мигает - этот параметр задаёт пульсирующий текст.

 
HTML

Пульсирующий текст.

 
CSS

текст-украшение: мигать;

  

Все что нужно знать для работы с сайтом

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

Добрый день!

Для того, чтобы сделать перечеркнутый текст, на самом деле существует не один сразу целых три HTML тега!

Вот их список:

 и вновь зачеркнутый текст 
 зачеркнутый текст 
 вновь зачеркнутый текст 
 

Все они делают вот такое вот красивое зачеркивание .

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

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

Для этого в этом теге также предусмотрены дополнительные параметры, отсутствовавшие у его предшественников - datetime, в котором можно указать дату и время, в которые произошло удаление, а также cite - в этом параметре можно указать ссылка на страницу, в которой описывается причина, по которой происходит удаление части текста.

П.С. Также удаление можно сделать без всяких тегов CSSсвойством сквозное:

Перечеркнутый текст написан здесь

.deleted-text {
оформление текста: сквозное;
}
 

Если у вас имеются еще какие-либо вопросы - пишите (можно в комментариях), обязательно постараюсь ответить!

А если у вас вдруг возникли поломки компьютера, нужна его диагностика, либо установка программ и многое другое, то вам поможет http: // zelcompuhelp.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *