Подчеркнутый текст тег: html (CSS). , . text-decoration: underline.
27.09.2018 Разное
Как сделать в HTML подчеркнутый текст.
Прежде, чем мы узнаем, как можно сделать в HTML подчеркнутый текст, нужно сделать очень важное замечание. Практически каждый пользователь, посещая веб-страницы, уже определенно привык к тому, что все ссылки на странице выглядят как подчеркнутый текст. Оформленные таким образом ссылки легко выделяются среди общего текста, что значительно упрощает навигацию. С другой стороны, если вы используете в HTML подчеркнутый текст, который, по сути, не является ссылкой, то вы вводите пользователя в некоторое замешательство: он думает, что это ссылка, но, попробовав кликнуть по ней, понимает, что это не так.
Поэтому, с точки зрения юзабилити, использование подчеркнутого текста не для ссылок – лучше исключить, но если все же это нужно вам для создания определенных декораций и без этого никак – используйте.
Давайте, наконец, узнаем, как сделать подчеркнутый текст в HTML.
Способ 1. Использование тегов <ins></ins< для создания подчеркнутого шрифта. Все, что мы заключаем в этот парный тег, как вы уже поняли, мы делаем подчеркнутым. Пример.
1 | <ins>это подчеркнутый текст</ins> |
Получим такой вид:
это подчеркнутый текст
Способ 2. Использование тега <u></u>. Результат будет аналогичен предыдущему:
1 | <u>это подчеркнутый шрифт </u> |
Хотя способ 2-й тоже рабочий, его все же не рекомендуется использовать, так как тег <u> относится к устаревшим тегам.
Другие посты
HTML — Форматирование текста html-документа и теги форматирования страницы / ProgLang
Если Вы пользуйтесь текстовым редактором, например, таким как Microsoft Word или Microsoft Excel, то Вы должны быть знакомы с форматированием текста и как сделать текст жирным (полужирным), наклонным (курсивом), зачеркнутым или подчеркнутым. Это всего лишь четыре из одиннадцати доступных вариантов, указывающих, как можно форматировать текст в HTML и XHTML.
Полужирный или жирный текст
Полужирный шрифт или жирный шрифт в HTML можно задать с помощь двух тегов <b>…</b> и <strong>…</strong>. Все, что находится в тегах <b>…</b> и <strong>…</strong> отображается в HTML жирным текстом (полужирным), как показано ниже:
Пример
<!DOCTYPE html> <html> <head> <title>Пример выделения жирным текста и шрифта в HTML</title> </head> <body> <p>С помощью тега b делаем <b>жирный шрифт</b>.</p> <p>С помощью тега strong делаем <strong>текст жирным</strong>.</p> </body> </html>
Получим следующий результат:
Курсив — наклонный текст или шрифт
Сделать в HTML курсивом текст можно с помощь двух тегов <i>…</i> и <em>…</em>. Все, что находится в тегах курсива <i>…</i> и <em>…</em> отображается в HTML наклонным текстом (шрифтом), как показано ниже:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример выделения курсивом текста и шрифта в HTML</title>
</head>
<body>
<p>С помощью тега i делаем <i>наклонный текст или шрифт</i>.</p>
<p>С помощью тега em делаем <em>текст курсивом</em>.</p>
</body>
</html>
Получим следующий результат:
Подчеркнутый текст
Подчеркнуть текст в HTML можно с помощь тега <u>…</u>. Все, что находится внутри тега <u>…</u> отображается в HTML подчеркнутым текстом (шрифтом), как показано ниже:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример подчеркивания текста в HTML</title>
</head>
<body>
<p>С помощью тега u делаем <u>подчеркнутый текст или слово</u>.</p>
</body>
</html>
Получим следующий результат:
Зачеркнутый текст
Зачеркнуть текст в HTML можно с помощь тега <strike>…</strike>. Все, что находится внутри тега <strike>…</strike> отображается в HTML зачеркнутым текстом (шрифтом), как показано ниже:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример зачеркивания текста в HTML</title>
</head>
<body>
<p>С помощью тега strike делаем <strike>зачеркнутый текст</strike>.</p>
</body>
</html>
Получим следующий результат:
Моноширинный шрифт
Содержимое элемента <tt>…</tt> записывается в HTML моноширинным шрифтом. Большинство шрифтов обладают переменной шириной, потому что разные буквы имеют разную ширину (например, буква «щ» шире буквы «г»). Однако в моноширинном шрифте каждая буква имеет одинаковую ширину.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример моноширинного шрифта в HTML</title>
</head>
<body>
<p>С помощью тега tt делаем <tt>моноширинный шрифт</tt>.</p>
</body>
</html>
Получим следующий результат:
Верхний индекс
Содержимое тега <sup>…</sup> отображается в HTML в верхнем индексе. Тег верхнего индекса <sup> в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты. Данный элемент хорошо подходит когда необходимо, например, написать в HTML степень числа.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример верхнего индекса в HTML</title>
</head>
<body>
<p>С помощью тега sup делаем верхний<sup>индекс</sup> или степень числа, например, 2<sup>3</sup>.</p>
</body>
</html>
Получим следующий результат:
Нижний индекс
Содержимое тега <sub>…</sub> отображается в HTML в нижнем индексе. Тег нижнего индекса <sub> в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример нижнего индекса в HTML</title>
</head>
<body>
<p>С помощью тега sub делаем нижний<sub>индекс</sub>.</p>
</body>
</html>
Получим следующий результат:
Вставленный текст
Содержимое внутри тега <ins>…</ins> отображается в HTML как вставленный текст.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример вставленного текста в HTML</title>
</head>
<body>
<p>Хочу зарабатывать <del>много</del> <ins>очень много</ins> денег.</p>
</body>
</html>
Получим следующий результат:
Удаленный текст
Содержимое внутри тега <del>…</del> отображается в HTML как удаленный текст.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример удаленного текста в HTML</title>
</head>
<body>
<p>Хочу зарабатывать <del>много</del> <ins>очень много</ins> денег.</p>
</body>
</html>
Получим следующий результат:
Большой текст
Содержимое тега <big>…</big> отображается в HTML большим текстом, на один размер шрифта больше, чем остальная часть окружающего его текста, как показано ниже:
Пример
<!DOCTYPE html> <html> <head> <title>Пример большого текста в HTML</title> </head> <body> <p>С помощью тега big делаем <big>текст больше</big>.</p> </body> </html>
Получим следующий результат:
Маленький текст
Содержимое внутри тега <small>…</small> отображается в HTML маленьким текстом, на один размер шрифта меньше, чем остальная часть окружающего его текста, как показано ниже:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример маленького текста в HTML</title>
</head>
<body>
<p>С помощью тега small делаем <small>текст меньше</small>.</p>
</body>
</html>
Получим следующий результат:
Группировка элементов и содержимого страницы в HTML
Элементы <div> и <span>
позволяют в HTML группировать несколько элементов для создания секций или подсекций страницы.Например, Вы можете поместить все ссылки на странице в тег <div>, чтобы указать, что все элементы в этом теге <div> относятся к меню. Затем Вы можете задать стиль тегу <div>, чтобы элементы отображались с использованием специального набора правил стиля (CSS).
Пример с тегом <div>
<!DOCTYPE html> <html> <head> <title>Пример группировки элементов и текста в HTML</title> </head> <body> <div> <a href="/index.html">ГЛАВНАЯ</a> / <a href="/about.html">О НАС</a> / <a href="/contacts.html">КОНТАКТЫ</a> </div> <div> <h2>Название статьи</h2> <p>Содержимое страницы...</p> </div> </body> </html>
Получим следующий результат:
С другой стороны, элемент <span> может использоваться для группировки только встроенных элементов. Итак, если у Вас есть часть предложения или абзаца (параграфа), который Вы хотите объединить, Вы можете использовать элемент <span> следующим образом:
Пример с тегом <span>
<!DOCTYPE html>
<html>
<head>
<title>Пример группировки элементов и текста в HTML</title>
</head>
<body>
<p>Группировки элементов с помощью <span>тега span</span>.</p>
</body>
</html>
Получим следующий результат:
Эти теги обычно используются с CSS, чтобы Вы могли задать стиль к секции страницы.
Поделитесь:
Изучаем курсивный, жирный, подчеркнутый и зачеркнутый текст
Здравствуй, уважаемый читатель.
Это восьмой урок изучения html, в котором мы поговорим о изменении вида текста. Из данного урока вы узнаете как сделать шрифт жирным, курсивным и подчеркнутым. Этот урок небольшой и очень легкий, но и нужный.
Перед прочтением данного урока рекомендую пройти предыдущие уроки:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. Изображения Урок 5. Ссылки. Часть 1 Урок 5. Ссылки. Часть 2 Урок 6. Атрибуты Урок 7. Таблицы
Теория и практика
При написании текста зачастую появляется необходимость выделить текст. Сделать его жирным или курсивом, чтобы на его обратили внимание. Сразу перейдем к примерам:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <title>Главная</title> </head> <body> <p>Меню</p> <ul> <li><a href="example.html" title="Главная">Главная</a></li> <li><a href="banan.html" title="Польза банана">Банан</a></li> <li><a href="apple.html" title="Польза яблока">Яблоко</a></li> <li><a href="persik.html" title="Польза персика">Персик</a></li> </ul> <p>Nullam <strong>eget aliquet</strong> sapien, <b>vitae vulputate</b> diam. <ins>Vivamus at arcu</ins> urna. Sed eget <em>neque et</em> sapien <i>auctor</i> adipiscing. <del>Aenean tincidunt</del> metus at facilisis imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </body> </html> |
Как это выглядит в браузере:
Сейчас о каждом теге по порядку:
1. За выделение жирным шрифтом отвечают теги <b></b> и <strong></strong>. Дело в том что тег <b></b> является устаревшим, а вместо него рекомендуется использовать тег <strong></strong>.
2. Чтобы выделить текст курсивом отвечают теги <i></i> и <em></em>. Но тег <i></i> также устарел как и тег <b>, поэтому вместо него используйте тег <em></em>.
3. Чтобы подчеркнуть текст, его необходимо взять в тег <ins></ins>.
4. Чтобы зачеркнуть текст, его необходимо взять в тег <del></del>.
Итак. Еще раз посмотрим, но только в виде таблицы:
Также данные теги можно комбинировать Но важно чтобы тег открывался и закрывался правильно. Далее в примере написано правильно! Нельзя допускать такого: <em><strong>eget aliquet</em></strong>. То есть тег сначала должен открываться, потом закрываться. А если хотите еще в один тег взять — необходимо брать все теги внутри в эту конструкцию. Например:
<em><strong>eget aliquet</strong></em> |
Как это будет выглядеть в браузере:
Сегодня мы рассмотрели как можно выделить текст на странице. Всё очень просто. Пробуйте всё прописать руками. Тогда вы лучше запомните их и будете помнить где и как их применить.
Больше практикуйтесь!
Основные HTML теги форматирования текста
Здравствуйте, уважаемые читатели блога MonetaVInternete.ru! В этой статье речь пойдет о тегах форматирования текста. Яркими примерами являются выделение текста жирным или курсивом. Также мы рассмотрим влияние некоторых тегов на внутреннюю оптимизацию сайта и правила их написания. Про то, что такое теги и атрибуты вы можете прочитать в приведенной статье. Кстати, вы можете встретить подобные элементы оформления текста вы можете во многих текстовых редакторах, например в Ворде.
Теги разделяются на 2 вида: блочные и строчные. При использовании первых, вы сможете изменить содержание части текста (строки, отдельные фрагменты или же слова), а вторые являются структурой HTML-документа. Теги форматирования, которые мы рассмотрим в этой статье, преимущественно строчные.
Правила и порядок написания тегов
Вы уже знаете, что такое открывающий и закрывающий теги. Если нет, то прочтите статью, приведенную в самом начале этого материала. Если коротко, то теги бывают двух видов: одиночные (например, перенос на новую строку ) и контейнерные (парными). Так вот, все теги форматирования текста являются парными. Это означает, что любой элемент имеет открывающий и закрывающий теги, а выделяемый фрагмент должен быть помещен между ними. Например, правильное выделение фразы будет выглядеть так:
<strong> Выделенный фрагмент </strong>
Когда браузер обработает этот фрагмент, то вы увидите вот такой текст: Выделенный фрагмент. Кстати, в RSS ленте все теги не отображаются (что такое RSS лента и новостная рассылка).
Главное при написании тегов — не забывайте их закрывать. Иначе весь текст на странице будет выделен жирным (в примере с тегом <strong>). Но бывают такие случаи, когда нужно выделить определенный фрагмент и жирным и курсивом одновременно. Но тега, выполняющего это действие, не существует. Выход из этой ситуации один: использовать два тега одновременно. В каком порядке их использовать значения не имеет. Поэтому, написав текст с тегами так:
<strong><em> Выделенный фрагмент</em></strong>
или вот так:
<strong><em> Выделенный фрагмент</em></strong>
Вы все равно получите Выделенный фрагмент курсивом и жирным одновременно. Однако, предпочтительно использовать первый вариант, потому что изначально он был единственным и правильным. Также не стоит забывать о том, что каждый браузер может обрабатывать теги по-разному (что такое браузер и какой них самый лучший), в зависимости от настроек. А теперь перейдем к самим тегам форматирования
Выделение текста жирным и курсивом — теги <strong>, <B>, <em> и <I>
Самые популярные теги форматирования текста — выделение его жирным и курсивом. Обычно их используют для придания важности какому-либо фрагменту. Первый случай служит для выделения фрагмента, содержащего полезную информацию или ключевые слова. Курсив применяется в тех же целях, что и жирный текст, но информация менее важна, потому что курсив на фоне основного текста менее заметен, нежели жирный текст.
Рассмотрим для начала выделение текста жирным. Для этого действия используется два тега — <strong> и <B>. Разницы во внешнем виде нет. Хотя, учитывая то, что любой браузер может интерпретировать каждый элемент по-своему, вы сможете увидеть какие-либо отличия. Вот как выглядит текст в тегах <strong> и <B> в уже обработанном браузером виде:
Текст в тегах strong
Текст в тегах b
А вот как выглядят две данные строчки в исходном коде страницы:
<strong>Текст в тегах strong </strong> <b>Текст в тегах b </b>
Ту же ситуацию мы можем наблюдать в случае с тегами выделения курсивом <em> и <I>. Попытайтесь найти отличия между двумя примерами:
Текст в тегах em
Текст в тегах I
А вот исходный код:
<em>Текст в тегах em </em> <i>Текст в тегах I </i>
Итак, рассмотренные теги выделения жирным и курсивом фактически не отличаются, но зачем же тогда нам, например, тег <strong> если есть <B>? Ведь последний содержит всего один символ (не считая скобок) и, следовательно, легче в написании. А все дело в том, что теги <strong> и <em> влияют на внутреннюю оптимизацию сайта. Если вы будете окружать этими тегами ключевые слова, то это благоприятно скажется на продвижении сайта.Главное не переусердствовать — максимум в тексте должно быть 5% жирного текста в теге <strong>, и столько же и курсива в теге <em>.
Если же вы хотите просто выделить в тексте какой-либо момент, то используйте тег <B> или <I>. Вообще, я думаю, что поисковики тоже рассматривают текст в этих тегах как более важный, но на внутреннюю оптимизацию они все-таки оказывают меньшее влияние, нежели <strong> и <em>.
Теги выделения текста чертой — <u>, <s> и <strike>
Теперь рассмотрим несколько тегов, которые используют черту в оформлении текста. Самый известный вам из текстовых редакторов — тег <u> или подчеркивание. Влияние на ранжирование этот тег не оказывает (насколько я знаю), а вот выделить какой-либо текст и заострить на нем внимание поможет. Пример использования данного тега я привел чуть выше.
Еще два схожих по назначению тега — <s> и <strike>. Оба выполняют функцию зачеркивания текста. Использовать этот тег можно в любых ситуациях: если вы обновляете документ (а точнее его часть), то можно перечеркнуть старое и добавить новое; если вы собираетесь написать нечто, отходящее от темы материала; что-то не соответствующее морально-этическим нормам.
Отличия же этих двух тегов заключаются только в их написании, вследствие чего предпочтительней использовать первый, т.к. во-первых удобнее писать, а во-вторых, на вашей странице будет находиться меньшее количество HTML-кода, а поисковики это любят.
Тег <font> и атрибуты — параметры шрифта текста
Теперь рассмотрим тег, который не используется без атрибутов. С помощью его вы сможете задать параметры для определенного фрагмента текста. Вообще, сейчас предпочтительней использовать CSS (каскадные таблицы стилей), т.к. с помощью них можно сильно сократить весь HTML код страницы. Итак, рассмотрим тот самый тег <font>. Для него существует всего три атрибута:
- face — сам шрифт. Например, Arial, Courier или Verdana. Можно перечислить несколько, т.к. не у всех пользователей имеется обширный набор шрифтов, а написав несколько в атрибуте face, браузер сможет выбрать, какой использовать, а точнее — какой присутствует в системе;
- size — атрибут, указывающий размер текста. Может быть выражен как в условных единицах, так и в пикселях;
- color — цвет текста. Данный атрибут можно использовать как в HTML-кодах цветов, так и в словесных. Первые имеют вид #FFFFFF (где F — любая цифра или буква от A до F), а вторые записываются простыми словами (например, red — красный).
Так выглядит текст в теге <font> с использованием каждого атрибута:
</pre> <span>Этот текст имеет размер 6px</span> <pre></pre> <span>Этот текст красного цвета</span> <pre></pre> <span>Этот текст имеет шрифт Arial</span> <pre></pre> <span>Этот текст красного цвета и размера 5px</span> <pre>
А вот что вы увидите, после обработки написанного кода:
Блочные элементы оформления текста — заголовки <h2>-<h6>, абзац <p>
Напоследок мы рассмотрим блочные элементы, которые используются практически в каждом документе. Это теги заголовков и абзаца. Рассмотрим первое. Заголовки бывают 6-ти видов и каждый имеет свой тег. Каждый вид носит лишь свой порядковый номер и записывается с помощью тегов <h2>, <h3>,…, <h6>. Вот как выглядят все заголовки в обработанном виде:
Цифра после слова заголовок соответствует цифре в теге <h*>. Заголовки оказывают огромное влияние на на внутреннюю оптимизацию, поэтому заключайте в теги <h*> ключевые слова. Особенностей этого дела довольно много, о чем я расскажу в последующих статьях.
А теперь поговорим про тег выделения абзаца <p>. Функция данного тега заключается в отделении текста между <p> и </p> от другого такого же текста пустой строкой. Если посмотреть исходный код какого-либо документа, то вы можете увидеть следующее:
В зеленых прямоугольниках один абзац, в красных — другой. А вот как этот код выглядит после обработки браузером (стрелочка указывает на пустую строку):
В итоге мы получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.
Вот и подошла к концу статья про теги форматирования документа. Их намного больше, нежели я описал в этом материале. Просто о некоторых нужно рассказать довольно много, вследствие чего им будет посвящены отдельные статьи с полным обзором. До скорых встреч на страницах блога MonetaVInternete.ru!
Перечёркнутый текст в HTML и CSS
Первыми тегами для зачёркнутого текста были <strike>
и <s>
.
<strike>Перечёркнутый текст</strike>
<s>Перечёркнутый текст</s>
C приходом HTML 4 их использование стало осуждается, а в HTML 5 их вовсе запретили. В место них ввели <del>
, он помечает текст как удаленный, что семантически правильнее.
<del>Перечёркнутый текст</del>
По виду они не отличается:
Изменить цвет линии
Первый способ
С помощью CSS свойства text-decoration-color
, который задаёт цвет линии (не поддерживается в Internet Explorer и Edge).
<del>Перечёркнутый текст</del>
del {
text-decoration: line-through;
text-decoration-color: red;
}
Также можно изменить стиль линии с помощью text-decoration-style
.
Значение | Описание | Пример |
---|---|---|
text-decoration-style: solid; |
Одинарная линия | |
text-decoration-style: double; |
Двойная линия | |
text-decoration-style: dotted; |
Точечная линия | |
text-decoration-style: dashed; |
Пунктирная линия | |
text-decoration-style: wavy; |
Волнистая линия |
Второй способ
Тегу <del>
задается цвет линии, вложенному <span>
цвет текста.
<del>
<span>Текст зачёркнут красной линией</span>
</del>
del {
color: red;
text-decoration: line-through;
}
del span {
color: blue;
}
Третий способ
Линия добавляется псевдо элементом :before
, но у текста не должно быть переносов.
<del>Перечёркнутый текст</del>
del {
position: relative;
color: #000;
text-decoration: none;
}
del:before {
content: "";
border-bottom: 2px solid red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
При такой реализации, можно расположить линию за текстом.
del {
position: relative;
color: #000;
text-decoration: none;
}
del:before {
content: "";
border-bottom: 2px solid red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
z-index: -1;
}
Анимированное подчеркивание текста
Решение подходит для выделения важного слова или слов в заголовках
Пример:
Анимированное подчеркивание текстаHTML:
<div> Анимированное <span>подчеркивание<svg xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 500 150″ preserveAspectRatio=»none»> <path d=»M5,125.4c30.5-3.8,137.9-7.6,177.3-7.6c117.2,0,252.2,4.7,312.7,7.6″></path> <path d=»M26.9,143.8c55.1-6.1,126-6.3,162.2-6.1c46.5,0.2,203.9,3.2,268.9,6.4″></path></svg></span> текста </div>
<div> Анимированное <span>подчеркивание<svg xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 500 150″ preserveAspectRatio=»none»> <path d=»M5,125.4c30.5-3.8,137.9-7.6,177.3-7.6c117.2,0,252.2,4.7,312.7,7.6″></path> <path d=»M26.9,143.8c55.1-6.1,126-6.3,162.2-6.1c46.5,0.2,203.9,3.2,268.9,6.4″></path></svg></span> текста </div> |
CSS:
.underline { font-family: ‘Roboto Condensed’, sans-serif; font-size: 32px; line-height: 50px; margin: 20px 0; text-align: center; } .underline span { position: relative; } .underline svg { position: absolute; width: 100%; height: 60px; left: 0; top: 0; z-index: -1; } .underline svg path { stroke: red; stroke-width: 9; fill: none; animation: underline 10s infinite; animation-delay: 0s; opacity: 0; } .underline svg path + path { animation-delay: 0.5s; } @keyframes underline { 0% { stroke-dasharray: 0 1500; opacity: 1; } 15% { stroke-dasharray: 1500 1500; } 85% { opacity: 1; } 90% { stroke-dasharray: 1500 1500; opacity: 0; } 100% { stroke-dasharray: 0 1500; opacity: 0; } }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.underline { font-family: ‘Roboto Condensed’, sans-serif; font-size: 32px; line-height: 50px; margin: 20px 0; text-align: center; } .underline span { position: relative; } .underline svg { position: absolute; width: 100%; height: 60px; left: 0; top: 0; z-index: -1; } .underline svg path { stroke: red; stroke-width: 9; fill: none; animation: underline 10s infinite; animation-delay: 0s; opacity: 0; } .underline svg path + path { animation-delay: 0.5s; } @keyframes underline { 0% { stroke-dasharray: 0 1500; opacity: 1; } 15% { stroke-dasharray: 1500 1500; } 85% { opacity: 1; } 90% { stroke-dasharray: 1500 1500; opacity: 0; } 100% { stroke-dasharray: 0 1500; opacity: 0; } } |
Форматирование текста HTML
HTML содержит несколько элементов для определения текста со специальным значением.
Пример
Этот текст выделен жирным шрифтом
Этот текст выделен курсивом
Это нижний индекс и верхний индекс
Попробуй сам »Элементы форматирования HTML
Элементы форматирования были разработаны для отображения специальных типов текста:
HTML и Элементы
Элемент HTML
определяет полужирный текст,
без особой важности.
Элемент HTML
определяет текст
с большим значением. Содержимое внутри обычно выделено жирным шрифтом.
Элементы HTML и
Элемент HTML
определяет часть
текст другим голосом или другим настроением. Содержимое внутри обычно отображается в
курсив.
Совет: Тег
часто используется для обозначения технического термина,
фраза с другого языка, мысль, название корабля и т. д.
Элемент HTML
определяет
выделенный текст. Содержимое внутри обычно отображается курсивом.
Совет: Программа чтения с экрана произнесет слова на
с ударением, используя словесное ударение.
HTML элемент
Элемент HTML
определяет
мелкий текст:
HTML Элемент
Элемент HTML
определяет текст
которые следует отметить или выделить:
HTML элемент
Элемент HTML
определяет текст
который был удален из документа.Браузеры обычно задевают
через удаленный текст:
HTML Элемент
Элемент HTML
определяет текст
который был вставлен в документ. Браузеры обычно подчеркивают вставленные
текст:
HTML Элемент
Элемент HTML
определяет
подстрочный текст. Подстрочный текст появляется на полсимвола ниже нормальной строки,
и иногда отображается более мелким шрифтом.Подстрочный текст можно использовать для
химические формулы, такие как H 2 O:
HTML Элемент
Элемент HTML
определяет
надстрочный текст. Надстрочный текст отображается на полсимвола выше обычного
линия, и иногда отображается более мелким шрифтом. Можно использовать надстрочный текст
для сносок, например WWW [1] :
Упражнения HTML
Элементы форматирования текста HTML
Тег | Описание |
---|---|
Определяет полужирный текст | |
Определяет выделенный текст | |
Определяет часть текста другим голосом или настроением | |
<маленький> | Определяет меньший текст |
Определяет важный текст | |
Определяет текст с нижним индексом | |
Определяет надстрочный текст | |
Определяет вставленный текст | |
| Определяет удаленный текст |
<отметка> | Определяет выделенный / выделенный текст |
CSS свойство text-decoration-line
Пример
Установить различные типы линий оформления текста:
div.а {текст-украшение-строка: надстрочный;
}
div.b
{
text-decoration-line: подчеркивание;
}
div.c
{
текст-украшение-строка: сквозная;
}
div.d
{
text-decoration-line: нижнее подчеркивание;
}
Определение и использование
Свойство text-decoration-line
устанавливает тип используемого оформления текста.
(например, подчеркивание, подчеркивание, сквозная линия).
Совет: Также обратите внимание на свойство text-decoration, который является сокращенным свойством для text-decoration-line, text-decoration-style и текст-украшение-цвет.
Примечание. Вы также можете комбинировать несколько значений, например подчеркивание и над чертой, чтобы отображать строки как под текстом, так и над ним.
Значение по умолчанию: | нет |
---|---|
Унаследовано: | № |
Анимация: | нет.Прочитать о animatable |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.textDecorationLine = «overline» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следует -moz-, указывают первую версию, которая работала с префиксом.
Имущество | |||||
---|---|---|---|---|---|
текст-украшение-строка | 57,0 | 79,0 | 36,0 6,0 -моз- | 7.1 -webkit- | 44,0 |
Синтаксис CSS
текст-украшение-строка: нет | подчеркивание | наложение | сквозная строка | начальная | наследование;
Стоимость недвижимости
Значение | Описание | Играй |
---|---|---|
нет | Значение по умолчанию.Задает отсутствие строки для оформления текста | Играй » |
подчеркивание | Указывает, что строка будет отображаться под текстом | Играй » |
черта | Указывает, что над текстом будет отображаться линия | Играй » |
сквозной | Указывает, что строка будет отображаться через текст | Играй » |
начальный | Устанавливает для этого свойства значение по умолчанию.Читать о начальная | Играй » |
наследовать | Наследует это свойство от своего родительского элемента. Читать о наследовать |
Связанные страницы
Учебное пособие по CSS: CSS Text
Ссылка на HTML DOM: свойство textDecorationLine
Выравнивание, стили шрифтов и горизонтальные правила в HTML-документах
Выравнивание, стили шрифтов и горизонтальные правила в HTML-документахВ этом разделе спецификации обсуждаются некоторые элементы HTML и атрибуты, которые могут использоваться для визуального форматирования элементов.Многие из них устарело.
15.1 Форматирование
15.1.1 Фон цвет
Определения атрибутов
- bgcolor = цвет [CI]
- Не рекомендуется. Это Атрибут устанавливает цвет фона для тела документа или ячеек таблицы.
Этот атрибут устанавливает цвет фона холста для тела документа. (элемент BODY ) или для таблиц (элемент ТАБЛИЦА , TR , TH и Элементы ТД ).Дополнительные атрибуты для указания цвета текста могут быть используется с элементом BODY .
Этот атрибут устарел в пользу таблиц стилей для указания информации о цвете фона.
15.1.2 Выравнивание
Возможно выравнивание элементов блока (таблицы, изображения, объекты, абзацы, и т. д.) на холсте с атрибутом align . Хотя это атрибут может быть установлен для многих элементов HTML, его диапазон возможных значений иногда отличается от элемента к элементу.Здесь мы только обсуждаем значение атрибут выравнивания для текста.
Определения атрибутов
- выровнять = слева | по центру | справа | по ширине [CI]
- Не рекомендуется. Это
атрибут определяет горизонтальное выравнивание своего элемента относительно
окружающий контекст. Возможные значения:
- слева : текстовые строки отображаются заподлицо слева.
- по центру : текстовые строки расположены по центру.
- справа : текстовые строки отображаются заподлицо справа.
- по ширине : текстовые строки выравниваются по обоим полям.
Значение по умолчанию зависит от основного направления текста. Для текста слева направо по умолчанию align = left , а для текста справа налево по умолчанию это align = right .
УСТАРЕВШИЙ ПРИМЕР:
В этом примере заголовок центрируется на холсте.
Как вырезать по дереву
Используя CSS, например, вы можете добиться такого же эффекта, как показано ниже:
<ГОЛОВА>Как резать по дереву <ТЕЛО>Как вырезать из дерева
Обратите внимание, что это будет центрировать все объявления h2 .Вы можете уменьшить объем стиля, установив Атрибут class элемента:
<ГОЛОВА>Как резать по дереву <ТЕЛО>Как вырезать из дерева
УСТАРЕВШИЙ ПРИМЕР:
Аналогичным образом, чтобы выровнять абзац на холсте по правому краю с помощью HTML , выровняйте атрибут, который вы могли иметь:
...Много текста абзаца ...
, который с CSS будет:
<ГОЛОВА>Как резать по дереву <ТЕЛО>... Много текста абзаца ...
УСТАРЕВШИЙ ПРИМЕР:
Чтобы выровнять ряд абзацев по правому краю, сгруппируйте их с помощью метки DIV элемент:
... текст в первом абзаце...
... текст во втором абзаце ...
... текст в третьем абзаце ...
В CSS свойство text-align наследуется от родительского элемента, вы поэтому можно использовать:
<ГОЛОВА>Как резать по дереву <ТЕЛО>... текст в первом абзаце ...
...text во втором абзаце ...
... текст в третьем абзаце ...
Чтобы центрировать весь документ с помощью CSS:
<ГОЛОВА>Как резать по дереву <ТЕЛО> ... тело по центру ...
Leave a Comment