Как изменить цвет выделения текста на сайте только с помощью CSS
Здравствуйте, дорогие читатели блога beloweb.ru. Сегодня я хочу рассказать Вам как изменить цвет выделения текста на сайте только с помощью CSS.
Естественно это не очень Важный момент в дизайне Вашего сайта. Но если Вы измените цвет выделения это ещё больше подчеркнёт уникальность Вашего дизайна. Тем более если стандартный синий цвет выделения текста ну никак не хочет сочетаться с другими цветами Вашего шаблона.
За урок огромное спасибо сайту css-tricks.com.
В общем, друзья, давайте начинать.
Друзья, делается это очень просто, нужно только прописать несколько не сложных строк в стилях CSS. Здесь мы рассмотрим как сделать один цвет выделения для всего текста на сайте, а так же сделаем отдельные цвета для того текста который мы захотим, другими словами для каждого текста отдельный цвет.
Цвет выделения для всего текста на сайте
По умолчанию давайте выберем серый цвет #ccc. И для того чтобы цвет выделения изменился, нужно добавить вот эти строки в стили:
::selection {background: #ccc;}
::-moz-selection {background: #ccc;}
::-webkit-selection {background: #ccc; color:#fff;}
Всё. Теперь на нашем сайте цвет выделения стал серым. Но и это ещё не всё.
Цвет текста
Например мне захотелось чтобы именно сами буквы меняли цвет. Для этого просто нужно задать свойство color: с желаемым цветом. Таким образом вот как будет выглядеть код:
::selection {background: #ccc; color:#fff;}
::-moz-selection {background: #ccc; color:#fff;}
::-webkit-selection {background: #ccc; color:#fff;}
Вот теперь при выделении цвет буквы будет белого цвета.
Цвет выделения для отдельного текста на сайте
Например нам хочется, чтобы сверху текст выделялся зелёным, посередине красным, а снизу голубым. Для этого просто нужно к тегу <p> присвоить соответствующий класс, например для красного выделения класс будет red и так далее.
Таким образом вот как будет выглядеть код CSS:
p.red::selection {background: #FFB7B7;}
p.red::-moz-selection {background: #FFB7B7;}
p.red::-webkit-selection {background: #FFB7B7;}
p.blue::selection {background: #67cfff;}
p.blue::-moz-selection {background: #67cfff;}
p.blue::-webkit-selection {background: #67cfff;}
p.green::selection {background: #78e780;}
p.green::-moz-selection {background: #78e780;}
p.green::-webkit-selection {background: #78e780;}
Как видите, что для каждого цвета мы задали свой класс. Теперь давайте посмотрим как это будет выглядеть в HTML:
<p>Пример зелёного цвета при выделении текста</p> <p>Пример красного цвета при выделении текста</p> <p>Пример голубого цвета при выделении текста</p>
Как видите, здесь нет ничего сложного. Просто к каждому тегу <p> мы присвоили класс с соответствующим цветом.
Вот и всё, дорогие друзья. Теперь мы научились изменять цвет при выделении текста. Если у Вас возникнут какие либо вопросы обращайтесь в комментариях. До скорых встреч.
CSS разрешить только выделение текста на веб-странице?
Есть ли легкий фрагмент CSS или Javascript, который позволит мне сделать выбор / выделение вещей на странице доступным только для текста? Меня всегда раздражало, когда вы пытаетесь выделить текст, а в итоге выделяете дивы, изображения и прочее.
Есть ли способ ONLY выделить текст? Это будет включать абзац, якоря, текст внутри изображений divs & и все теги заголовков.
Спасибо! — Джексон
Я загружаю результаты всем, кто отвечает на этот вопрос, в настоящее время я запускаю код @Nick Рэдфорда, который он ETA’D.
Вот он, и он ближе, все еще много выделения помимо текста происходит с помощью ctrl+a: http://designsweeter.com/
Поделиться Источник alt 22 июня 2011 в 00:45
2 ответа
- Как отключить выделение текста через jQuery?
Я знаю, что этот вопрос уже задавался ( здесь ), но все ответы, которые я нашел, касались css selector :selection (который еще не слишком широко поддерживается браузерами). Итак, как я могу отключить выделение текста на моей странице html через jQuery, не полагаясь на трюки css?
- Как избежать выделения текста на веб-странице с помощью css?
Я разрабатываю веб-приложение и хочу заблокировать выбор любого текста на веб-странице для пользователя. Лично мне не нравится добавлять для этого какие-либо Javascript. Выполнимо ли это только с помощью CSS? Заранее спасибо.
17
html{
-o-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
p,a,h2,h3,h4,h5,h5,h6,div,br,li,td,article{
-o-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
user-select: text;
}
Первый блок отключает выделение в html, второй повторно включает его для любого элемента, который может содержать текст по состоянию на HTML5. Он довольно большой, но
html{-moz-user-select:none;-o-user-select:none;-webkit-user-select:none;user-select:none}p,a,h2,h3,h4,h5,h5,h6,div,br,li,td,article{-moz-user-select:text;-o-user-select:text;-webkit-user-select:text;user-select:text}
Поделиться alt 22 июня 2011 в 01:16
6
это может сработать:
img, div {
-o-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
Поделиться Joe 22 июня 2011 в 00:48
Похожие вопросы:
выделение текста в CSS?
Я пытаюсь изменить выделение текста на своей странице HTML. Я хочу изменить значение hex в css для выделенного текста всякий раз, когда я выбираю какой-то текст из пункта. Как я могу сделать это в…
Замена текста на веб-странице
Я хочу взять ввод текста пользователем, который заменит написанный текст на веб-странице. просто подумайте, что у меня есть имя в html, я сделал форму, в которой введите его имя и нажмите (хорошо)…
Как проверить процент полужирного текста на веб-странице?
У меня есть пример, где мне нужно проверить, как стилизуется содержимое страницы (не обязательно только с CSS). Например, тест (cucumber), который я хотел бы написать, — это: Для того чтобы…
Как отключить выделение текста через jQuery?
Я знаю, что этот вопрос уже задавался ( здесь ), но все ответы, которые я нашел, касались css selector :selection (который еще не слишком широко поддерживается браузерами). Итак, как я могу…
Как избежать выделения текста на веб-странице с помощью css?
Я разрабатываю веб-приложение и хочу заблокировать выбор любого текста на веб-странице для пользователя. Лично мне не нравится добавлять для этого какие-либо Javascript. Выполнимо ли это только с…
Как разрешить выделение текста в TideSDK
Я разрабатываю приложение для использования с TideSDK. Очевидно, что в Chrome пользователь может выбрать любой текст html, который он видит. Однако в TideSDK, похоже, что выделение текста по…
Отключите выделение текста, нажав кнопку Пуск
Я знаю, что могу отключить выделение текста для div, но это не то, что я хочу. У меня есть этот jquery Color picker , и, как вы можете видеть на веб-странице в плоском примере, если вы выбираете…
CSS или Javascript, чтобы отключить выделение текста выделение от CTRL + в
Примечание: этот вопрос отличается от того, как отключить выделение выделения текста с помощью CSS? Прежде чем спросить, я прочитал историю обсуждения вышеприведенного вопроса. Все работает…
Отключить частичное выделение текста в веб-приложении phonegap (android)
Я хочу отключить эффект выделения текста (всплывающий инструмент для copy/paste/select-all на Andorid) на некоторых элементах DOM веб-приложения phonegap. В основном я хочу включить выделение текста…
Как эта веб-страница отключила выделение текста?
Привет, я нашел эту веб-страницу сегодня: http:/ / www.snopes.com/inboxer/hoaxes/sister. asp Я не мог понять, как он отключает выделение текста. Это не обычный метод CSS или javascript. Кто-нибудь…
user-select. Выделение текста в CSS
CSS стиль user-select управляет поведением выделения текста и других элементов на странице. Это незаменимое CSS свойство когда нужно запретить выделение текста.Internet Explorer поддерживает свойство -ms-user-select.
Chrome, Opera, Safari и Android поддерживают свойство -webkit-user-select.
Firefox поддерживает свойство -moz-user-select.
Значение contain поддерживается только в IE.
Чаще всего CSS стиль user-select применяется для кликабельных интерактивных элементов, для которых нежелательно выделение текста.
Краткая информация по CSS-свойству user-select
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
Правила написания свойства user-select
user-select: auto | none | text | all | containПройдемся теперь по всем значениям.
auto — для редактируемых элементов значение принимается contain. Если у родительского элемента user-select установлено как all (none), то для элемента оно тоже будет all (none). Во всех остальных случаях принимается значение text.
none — пользователю запрещается выделять элемент.
text — пользователь может выделить текст в элементе.
all — позволяет выделить текст внутри элемента, включая дочерние элементы.
contain — позволяет выделять текст, но лишь внутри элемента.
Пример применения стиля user-select
Проиллюстрируем работу user-select на примере. Давайте сделаем так, чтобы верхний текст нельзя было выделить. Не забудьте про кроссбраузерное написание user-select.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля user-select</title>
<style>
body {
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.enable {
-ms-user-select: all;
-moz-user-select: all;
-webkit-user-select: all;
user-select: all;
}
</style>
</head>
<body>
<p>Ха! А этот текст нельзя выделить</p>
<p><input type="text" value="Этот текст выделяется"></p>
<p>Этот текст тоже выделяется</p>
</body>
</html>Управление выделением элементов на сайте при помощи CSS спецификации user-select
При верстке многих элементов часто появляется необходимость снять возможность их выделения. Иначе красиво оформленная кнопка изменяется визуально при случайном выделении.
Управлять выделением можно при помощи CSS спецификации user-select.
Управление выделением текста на странице при помощи user-selectРазберем несколько вариантов выделения. В первом варианте нам нужно сделать так, чтобы текст нельзя было выделить.
Для этого создадим абзац с текстом и добавим в него спецификацию user-select со значением none.
<p>Этот текст невозможно выделить как при помощи мыши так и при помощи клавиатуры</p>
Второй вариант. Сделаем так, чтобы текст можно было выделить один нажатие и полностью.
<p>Этот текст выделяется одним нажатием вместе с дочерними элементами.</p>
Допустим у нас есть страница с текстом и изображениями. Нужно сделать так, чтобы мы могли выделить только текст без изображений.
<p>В этом тексте находится изображение <img src="image.jpg"> и при выделении текста изображение не выделяется.</p>
Если у вас есть кнопка, например, в <div> контейнера и вы не хотите, чтобы она не выделялась вместе с текстом, при двойном нажатии на содержимое и другими возможными способами, то вы также можете использовать «user-select:none;».
<div>Кнопка</div>
Получается, что для любого элемента на HTML странице прописав спецификацию user-select мы можем управлять выделением.
Запрет вызова контектсного менюДалеко не секрет, что если вы запретили выделение текста, то можно вызвать контектсное меню и через него обойти этот запрет. Поэтому идеальным решением будет запрет вызова контектсного меню. Это можно сделать с помоью jаvascript события «oncontextmenu=»return false;».
<div oncontextmenu="return false;">Этот текст нельзя выделить и при попытке вызова контектсного меню ничего не происходит.</div>
Выше также прописаны параметры user-select для браузера Mozilla и Chrome.
Таким образом, испозльуя CSS спецификацию user-select и событие jаvascript можно защитить свой контент от копирования. Но помните, что это решение не является идеальным и несложно обходится через панель разработчика. В крайнем случае можно просто сделать скриншот вашего текста и потом распознать его.
Поделиться в соц. сетях:Выделяем важные слова или оформляем текст html страницы! : WEBCodius
Здравствуйте, уважаемые читатели блога. В прошлой статье я рассмотрел блочные теги для структурирования текста.
А сегодня мы рассмотрим оформление текста html-страницы, т.е. рассмотрим теги, которые помогут выделить важные фрагменты текста, чтобы привлекать к ним внимание посетителей. А также научимся вставлять на страницу специальные символы.
Выделение фрагментов текста. Теги strong и em.
Самым важным средством HTML применяющемся для выделения важных фрагментов текста является тег STRONG. Он выделяет текст полужирным шрифтом. Выделять текст полужирным шрифтом умеет также тег «b». Хоть теги «strong» и «b» похожи по своему действию, но они не являются эквивалентными.
Тег b является тегом физической разметки и просто устанавливает полужирное начертание текста. А strong является тегом логической разметки и отмечает важность выделенного текста. Тег «strong» имеет более важное значение при поисковой оптимизации сайта и его содержимое имеет больший вес для поисковиков.
Для курсивного выделения фрагментов текста применяются теги «i» и «em». Содержимое этих тегов выводится под наклоном имитируя рукописный шрифт.
При разработке web-сайтов для выделения текста чаще применяются теги «strong» и «em», чем теги «b» и «i». Пример использования тегов «strong», «b»,
«em» и «i» для оформления текстов:
И выглядит это так:
Применим теги «strong» и «em»; на нашей страничке из предыдущих статей:
Результат:
Кроме элементов strong, b, em и i в HTML имеется множество тегов для оформления текста html документа. Привожу краткий список таких тегов:
- abbr — Аббревиатура. по умолчанию в браузере отображается подчеркнутым;
- acronym — Акроним. В отличие от аббревиатуры обозначает устоявшееся сокращение. Отображается подчеркнутым;
- cite — небольшая цитата, отображается курсивом;
- code — фрагмент исходного кода программы, отображается моноширинным шрифтом;
- del— отмечает текст, удаленный из Web-страницы, отображается зачеркнутым;
- dfn — обозначает новый термин в документе, отображается курсивом;
- ins — используется для выделения текста, который был добавлен в новую версию документа, отображается подчеркнутым;
- kbd — применяется для выделения данных вводимых с клавиатуры, либо для названия клавиш, выводится моноширинным шрифтом;
- q — используется для выделения цитат, содержимое автоматически помещается в кавычки;
- samp — обозначает данные, выводимые какой-либо программой, отображается моноширинным шрифтом;
- tt — фактически тоже самое что и «samp», только является тегом физической разметки, а «samp» — логической. отображается моноширинным шрифтом;
- var — выделение имени переменной в исходном коде программы, отображается курсивом.
И вот так они отображаются в браузере:
Разрыв строк
Как мы узнали из предыдущих статей, для перевода строк используются блочные элементы, в частности тег «p», выделяющий абзац.
Давайте поместим на нашу web-страницу сведения об авторских правах:
Сайт об автомобилях.
Результат:
И как мы видим строки разделены слишком большим расстоянием, как-будто они не имеют друг к другу никакого отношения. В этом случае для разрыва строк лучше использовать тег br. Этот тег устанавливает перенос строки, но в отличие от тега «p», не устанавливает отступ перед строкой. Применим тег «br» на нашей страничке:
Так гораздо лучше:
Поэтому в некоторых случаях при оформлении текста html страницы не забывайте про тег «br».
Вставка специальных символов. Литералы.
Иногда на web-страницу требуется вставить какой-нибудь специальный символ, например такие символы:
Для вставки специальных символов в HTML используются литералы. Литерал — это последовательность символов, которая начинается с символа & и заканчивается символом ;, а между ними помещается последовательность букв — код символа. Так для вставки этих символов используются соответственно следующие литералы:
Вставим на нашу страницу в блок об авторских правах символ копирайта:
Теперь страничка выглядит совсем круто:
Ниже привожу названия наиболее часто используемых символов:
Особое место среди этих символов занимает «неразрывный пробел». Если необходимо чтоб в каком-то месте строки текста перенос не выполнялся, то вставляете туда «неразрывный пробел».
Кроме литерала «неразрывный пробел» для запрета переноса строк можно использовать парный тег nobr. Тег «nobr» уведомляет браузер о том, что отображать текст следует без переносов.
Правда применение этого тега может привести к появлению в окне браузера горизонтальной полосы прокрутки и пользователю придется прокручивать текст по горизонтали, чтобы увидеть его полностью, что очень не удобно.
И еще этот тег не входит в спецификацию HTML, что приводит к не валидному коду. По этому советую применять этот тег только в крайних случаях при оформлении текста html страницы.
HTML также позволяет вставлять любой символ, поддерживаемый кодировкой Unicode. Для этого используется литерал со следующей структурой:
Узнать код нужного символа можно либо в Интернете, либо можно воспользоваться утилитой «Таблица символов», поставляемая в составе Windows. Запустить ее можно так: «Пуск — Все Программы — Стандартные — Служебные — Таблица символов» или нажать WIN+R и набрать в окне выполнить charmap. Появится окно «Таблица символов».
Если в списке символов выделить символ, который нельзя ввести с клавиатуры, в строке статуса с левой стороны появится надпись вида «Клавиша: Alt + код символа». Берете это код символа и вставляете в литерал.
Для примера вставим символ © в нашу страницу с помощью кода символа. Выделяем этот символ в «Таблице символов» и в статусной строке с левой стороны видим надпись «Клавиша: Alt+0169». Берем код «0169» и в нашей web-странице вместо литерала «copy» вставляем:
И убеждаемся, что на странице отображается все правильно.
На сегодня у меня все. Как всегда подведу итоги:
мы рассмотрели теги для оформления текста html страницы. Наиболее важные из них тег «strong» — жирное выделение текста и тег «em» — курсивное начертание;
для разрыва строк без отступов применяем тег «br»;
- и для вставки специальных символов используем литералы вида:
В следующей статье я расскажу как вставлять картинки на страницу, поэтому советую подписаться на обновления моего блога!)))
Страница 3 из 11 Выделение текста и шрифты
Не стоит задавать шрифты их названиями. Нет никакой гарантии, что нужный шрифт есть у читателя. Лучше задать его стандартными тегами: хоть результат и зависит от средства просмотра и его настроек, зато наверняка текст будет изображен во-первых похоже, а во-вторых в едином стиле. Вот эти теги:
Цитаты, переменные, адреса
Неформатированный текст
Для предотвращения форматирования используется тег <PRE> — </PRE>. Текст, заключенный между двумя этими тегами выводится точно так, как он набран в исходном документе. Это бывает нужно, например, в текстах программ. <PLAINTEXT> Переводит вывод текста в шрифт фиксированной ширины, а также выключает HTML-обработку текста до тех пор, пока браузер не встретит </PLAINTEXT> тег.
Например: <FONT SIZE=3 COLOR="">--</FONT> <FONT SIZE=+1> <A HREF="txt.htm" target="verz">Простейший HTML-документ.</A> </FONT>
<BASEFONT>
Тег <BASEFONT> служит для указания размера, типа и цвета шрифта, стандартных для данного документа. Эти величины обязательны для всего документа, если только не переназначаются при помощи элемента FONT. После закрытия элемента FONT значения тега <BASEFONT> восстанавливаются. Значения атрибутов BASEFONT могут быть изменены другим тегом <BASEFONT> в любом месте документа. Обратите внимание, что это не контейнер и закрывающего тега не существует. Тег <BASEFONT> использует те же самые атрибуты, что и элемент FONT.
|
Урок 3. Заголовки и форматирование текста
Заголовки в HTML
Для начала поговорим о заголовках. В предыдущих уроках Вы могли видеть как используется текст. Однако, наряду с ним, в html есть теги, обозначающие заголовки: h2, h3, h4, h5, h5, h6. Они идут в порядке от самого большого, до самого маленького: h2 — самый большой заголовок, h3 — чуть меньше, ну а h6, последний из них, соответственно самый маленький.
<html>
<head>
<title>html заголовки</title>
</head>
<body><h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
<h4>Заголовок 3</h4>
<h5>Заголовок 4</h5></body>
</html>
Демонстрация Скачать исходники
Вышеуказанный код отобразит следующее
| Внимание! сразу хочу сказать, что заголовки надо использовать аккуратно! Поисковый робот, который создаёт массив информации по вашему сайту в ПЕРВУЮ очередь по Контенту анализирует заголовки. И если, например, в них будет содержаться пустая информация вроде Занимательно, Внимание, А тут вот ещё интересно, то это пойдёт в минус Вашему сайту! Сразу обращайте на это внимание и делайте заголовки информативными! Например: Введение в социологию, Парадокс Энштейна-Подольского-Розена, Жизнеописание Горация, Юрский период, в которых должен содержаться Смысл всей или промежуточной информации данной страницы. |
Форматирование текста в HTML
Наверное, Вы уже заметили, что если Вы переносите строку и продолжаете печатать текст в коде, то сам текст всё равно идёт в одним абзацем без переноса строки. Для того, чтобы перенести строку надо использовать одиночный тег br в месте принудительного переноса.
Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга.
<html>
<head>
<title>html параграфы</title>
</head>
<body><p>Текст первого абзаца. Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>
<p>Текст второго абзаца. Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p></body>
</html>
Демонстрация Скачать исходники
У тега p есть атрибут align, который отвечает за выравнивание параграфа. Может иметь следующие значения:
left — выравнивание по левой стороне
right — выравнивание по правой стороне
center — по центру
jastify — по ширине
| Атрибут align есть и у заголовков (тег h), и у параграфов (тег p). |
Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру
<html>
<head>
<title>html выравнивание параграфов</title>
</head>
<body><p align="left">Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>
<p align="right">Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p>
<p align="center">Текст третьего абзаца. Текст третьего абзаца. Текст третьего абзаца.</p>
</body>
</html>
Демонстрация Скачать исходники
В браузере отобразится следующее
Также существует тег center. Он центрирует его содержимое (текст, изображение и тд). Для текста его действие аналогично выравниванию по центру.
<html>
<head>
<title>центрирование в html</title>
</head>
<body><center>Текст по центру</center>
</body>
</html>
Как выделить текст полужирным в html?
strong — стандартное выделение текста жирным.
b — выделение ключевого слова жирным. Вошло в обиход раньше тега strong, поэтому некоторые считают его устаревшим (однако тег используется в HTML5). Наравне со strong воспринимается Поисковыми системами при определении ключевых слов, словосочетаний.
Внимание! Выделение текста данными тегами понимается Поисковой Системой как особо важное.
Будьте внимательны:
1. выделяйте только важные слова и словосочетания
2. важные — это не четверть текста. Старайтесь ограничить применение данного тега.
Рассмотрим пример кода выделения текста жирным
<html>
<head>
<title>html выделение жирным</title>
</head>
<body><p>Если Вы хотите выделить какую-то фразу, чтобы она просто была видна пользователю,
например, напоминание, то <strong>делаем так</strong>. Или так в случае <b>ключевого слова</b></p></body>
</html>
Демонстрация Скачать исходники
В браузере отобразится следующее
И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова
Как выделить текст курсивом в html?
i — выделение курсивом. Данным открывающим и закрывающим тегами следует выделять только важную информацию (ключевые слова), так как поисковые системы будут выдавать данные, ориентируясь по ним.
em — стандартное выделение курсивом. Нет ограничений в использовании.
cite — данный вид курсива используется для цитаты, ссылки на материал и авторов.
dfn — для выделения определений и терминов.
| Результат выделения данных тегов будет одинаковым — это выделение курсивом. Однако следует понимать, что данные Вашей страницы будет считывать не только человек, но и Поисковый Робот. Если Вы хотите, чтобы конкретные части текста лучше индексировались (отображалось по запросу в поисковике), то лучше использовать соответствующее для этого выделение — дня цитат cite, для терминов dfn и тд. |
Рассмотрим пример кода c выделением текста курсивом
<html>
<head>
<title>Допустим страница о машинах</title>
</head>
<body><i>Mercedes-Benz</i> - это немецкий автоконцерн, который был основан в 1886 году.
Название произошло от двух марок - <dfn>Мерседес</dfn> и <dfn>Бенц</dfn>.
Он занимается в основном выпуском <dfn>легковых автомобилей премиум-класса</dfn>, <dfn>грузовых автомобилей</dfn>, <dfn>автобусов</dfn>.
<p><cite>http://ru.wikipedia.org/wiki/Mercedes-Benz</cite></p></body>
</html>
Демонстрация Скачать исходники
В браузере отобразится так
Как выделить текст подчёркиванием в html?
u — стандартное выделение подчёркиванием (лучше использовать с последними спецификациями html)
ins — так помечаются новые данные (текст, пояснение) вставленные в Ваш документ (либо добавленные, либо взамен старых). Выделяются подчёркиванием
Данные и в первом, и во втором случае будут выделен подчёркиванием.
Как сделать перечёркнутый текст в html?
Перечёркнутым выделяется текст в следующих тегах
del — внесённое исправление.
strike — стандартное перечёркивание.
s — сокращённая запись strike
<html>
<head>
<title>Перечёркнутый текст в html</title>
</head>
<body>Дважды два равно <del>пяти</del> четырём. Обычный <s>перечёркнутый текст</s>
</body>
</html>
Демонстрация Скачать исходники
Как выделить текст в верхнем и нижнем индексах в html?
sub — тег, отображающий текст ниже уровня строки шрифтом меньшего размера.
sup — тег, отображающий текст выше уровня строки шрифтом меньшего размера.
<html>
<head>
<title>индексы в html</title>
</head>
<body><p>a<sup>2</sup>+b<sup>2</sup> = c<sup>2</sup> - теорема Пифагора.</p>
<p>H<sub>2</sub>O - химическая формула воды.</p></body>
</html>
Демонстрация Скачать исходники
В браузере отобразится следующее
Тег font в html
Для редактирования текста в html также используется тег font. Однако с введением блочной вёрстки и популярностью CSS данный способ быстро начал забываться.
Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:
face — название шрифта. Можно приводить несколько названий шрифтов (чере запятую), так как у пользователя, просматривающего Ваш сайт, такого шрифта может НЕ быть по умолчанию или он не будет поддерживать данный язык. Например пользователь из Польши или Китая. Соответственно, если данный шрифт не найден, то используется следующий по списку.
size — активные значения от 1 до 7. Шрифт по молчанию равен 3.
color — цвет текста. Если не задать параметр, то текст будет чёрным.
<html>
<head>
<title>Тег font в html</title>
</head>
<body><font face="Tahoma" size=5 color="blue">Шрифт Tahoma, размер 5, цвет синий.</font>
</body>
</html>
Демонстрация Скачать исходники
Повторюсь, данный способ устарел, поэтому советую не привыкать его использовать.
Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE
Да, действительно можно облегчить себе жизнь и избавиться от многих отступов, переносов и прочего. Для этого существует тег pre. Количество пробелов, большее одного, в коде приравнивается к одному, однако в pre текст остаётся в таком виде, в котором его ввели.
| Также тег pre приятен её тем, что в нём можно использовать такие теги как: img, object, big, small, sub, sup |
<html>
<head>
<title>Тег pre в html</title>
</head>
<body><pre>Как захотели ввести текст
так он и отобразился! =)</pre></body>
</html>
Демонстрация Скачать исходники
В браузере будет так
Другие теги для форматирования текста
Тег abbr обозначает аббревиатуру. Аббревиатура — сокращенное слово или словосочетание. Аббревиатуры можно встретить повсюду, например, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title
<html>
<head>
<title>Тег abbr в html</title>
</head>
<body><abbr title="Hypertext Markup Language">HTML</abbr>
</body>
</html>
Демонстрация Скачать исходники
В браузере будет выглядеть так
Тег acronym в отличие от аббревиатуры обозначает устоявшиеся слово (акроним), которое употребляется как самостоятельное. Например: СССР (Союз Советских Социалистических Республик), СПИД (Синдром приобретённого иммунного дефицита), США (Соединённые Штаты Америки).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title
<html>
<head>
<title>Тег acronym в html</title>
</head>
<body><acronym title="Hypertext Markup Language">HTML</acronym>
</body>
</html>
Горизонтальная черта в html или тег hr
Для обозначения горизонтальной линии в html используется тег hr. Сверу и снизу он выделяется отступами.
У данного тега есть следующие атрибуты:
align — выравнивание горизонтальной линии. Ранее уже упоминались типы выравнивания: по левому краю (left), по центру (center), по правому (right).
width — фиксирует длину черты в пикселях или процентах
size — толщина линии
color — цвет линии
noshade — убирает рельефность линии
<html>
<head>
<title>Тег font в html</title>
</head>
<body>Обычная линия
<hr>Линия по центру длиной 50% от ширины блока, толщина линии 2
<hr align="center" size=2 width=50%>Линия справа, синяя, 200 пикселей<hr align="right" color="blue" width="200">
</body>
</html>
Демонстрация Скачать исходники
В браузере
Спасибо за внимание! Урок был долгий и сложный! Вы сделали большой шаг вперёд!
Выделение в HTML
Выделение в HTMLСтатус: Extra
Эти элементы позволяют форматировать разделы текста в конкретным образом, чтобы сделать акцент и т. д. Теги НЕ вызывают разрыв абзаца, и может использоваться в частях текста внутри абзацев.
Если не поддерживается реализациями, как и все теги, эти теги следует игнорировать, но отображать содержимое.
Все эти теги имеют связанные закрывающие теги, как в
Это выделенный текст.
Некоторые из этих стилей более явны, чем другие, о том, как они должны быть представлены физически. Логические стили должны использоваться везде, где это возможно, если, например, в этом нет необходимости для обозначения форматирования текста. (Например, «Курсив обязателен».)
Примечание:
Браузеры, неспособные отображать указанный стиль, могут отображать его. в каком-либо альтернативном или стандартном стиле, с некоторой потерей качества для читателя. Некоторые реализации могут полностью игнорировать эти теги, поэтому поставщики информации не должны полагаться на них как на важно для информационного содержания.
Эти имена элементов являются производными от имен макросов TeXInfo.
Физические стили
- ТТ
- Шрифт пишущей машинки фиксированной ширины.
- B
- Полужирный шрифт, если доступно, в противном случае альтернативное отображение разрешается.
- я
- Курсивный шрифт (или наклонный, если курсив недоступен).
- U
- Подчеркнутый.
Логические стили
- EM
- Курсив, как правило, курсив.
- СИЛЬНЫЙ
- Более сильный акцент, как правило, жирный.
- КОД
- Пример кода. обычно моноширинный шрифт. (Не путайте с PRE)
- САМП
- Последовательность буквальных символов.
- КБД
- в инструкции по эксплуатации, текст, введенный пользователем.
- VAR
- Имя переменной.
- DFN
- Определяющий экземпляр термина. Обычно полужирный или полужирный курсив.
- CITE
- Цитата. Обычно курсив.
Примеры использования
Этот текст содержит выделенное слово. Не думайте , что он будет курсивом!
Это было сделано с использованием элемента EM . Цитата
обычно курсивом и не имеет формальной необходимой структуры:
Моби Дик - это название книги.
Смелая ссылка, на которую еще никто не ссылался: фрагменты текста
фрагменты текста позволяют указать фрагмент текста во фрагменте URL-адреса. При переходе по URL-адресу с таким фрагментом текста браузер может выделить и / или привлечь внимание пользователя.
• Обновлено
Идентификаторы фрагментов #
Chrome 80 был большим выпуском. Он содержал ряд долгожданных функций, таких как модули ECMAScript в веб-воркерах, нулевое объединение, необязательное связывание и многое другое. О выпуске, как обычно, было объявлено в блоге Chromium. Вы можете увидеть отрывок из сообщения в блоге на скриншоте ниже.
Сообщение в блоге Chromium с красными рамками вокруг элементов с атрибутом id . Вы, наверное, спрашиваете себя, что означают все красные прямоугольники. Они являются результатом выполнения следующего фрагмента в DevTools. Он выделяет все элементы, у которых есть атрибут id .
document.querySelectorAll ('[id]'). ForEach ((el) => {
el.style.border = 'solid 2px red';
}); Я могу разместить глубокую ссылку на любой элемент, выделенный красным квадратом, благодаря идентификатору фрагмента, который я затем использую в хэше URL-адреса страницы. Предполагая, что я хотел добавить ссылку на . Оставьте отзыв в поле «Форумы по продуктам» в стороне, я мог бы сделать это вручную, создав URL-адрес https: // blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html # HTML1 . Как вы можете видеть на панели «Элементы» в инструментах разработчика, рассматриваемый элемент имеет атрибут id со значением HTML1 .
id элемента. Если я проанализирую этот URL-адрес с помощью конструктора JavaScript URL () , будут обнаружены различные компоненты. Обратите внимание на свойство hash со значением # HTML1 .
новый URL ('https: // blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1 ');
Тот факт, что мне пришлось открыть Инструменты разработчика, чтобы найти id элемента, многое говорит о вероятности того, что автор сообщения в блоге должен был связать этот конкретный раздел страницы.
Что делать, если я хочу связать что-то без id ? Скажем, я хочу сделать ссылку на заголовок ECMAScript Modules in Web Workers . Как вы можете видеть на скриншоте ниже, рассматриваемый не имеет атрибута id , что означает, что я не могу ссылаться на этот заголовок.Это проблема, которую решают фрагменты текста.
.Text Fragments #
Предложение Text Fragments добавляет поддержку указания фрагмента текста в хэше URL. При переходе к URL-адресу с таким фрагментом текста пользовательский агент может выделить и / или привлечь внимание пользователя.
Совместимость с браузером #
Функция фрагментов текста поддерживается в браузерах на основе Chromium 80 и более поздних версий. На момент написания Safari и Firefox публично не заявляли о намерении реализовать эту функцию.См. Ссылки по теме для указателей на обсуждения Safari и Firefox.
По соображениям безопасности функция требует, чтобы ссылки открывались в контексте noopener . Поэтому не забудьте включить rel = "noopener" в разметку привязки или добавить noopener в список функций окон Window.open () .
textStart # В простейшей форме синтаксис текстовых фрагментов выглядит следующим образом: хэш-символ # , за которым следует : ~: text = и, наконец, textStart , который представляет текст, закодированный в процентах. Я хочу сделать ссылку на.
Например, скажем, что я хочу связать с заголовком ECMAScript Modules in Web Workers в сообщении блога о функциях Chrome 80, URL-адрес в этом случае будет:
https: // blog .chromium.org / 2019/12 / chrome-80-content-indexing-es-modules.html #: ~: text = ECMAScript% 20Modules% 20in% 20Web% 20Workers
Фрагмент текста выделен следующим образом . Если щелкнуть ссылку в поддерживающем браузере, таком как Chrome, фрагмент текста будет выделен и прокручивается в поле зрения:
Фрагмент текста прокручивается и выделяется. textStart и textEnd #А что, если я хочу создать ссылку на весь раздел под названием ECMAScript Modules in Web Workers , а не только на его заголовок? Процентное кодирование всего текста раздела сделало бы URL-адрес непрактично длинным.
К счастью, есть способ получше. Вместо всего текста я могу кадрировать желаемый текст, используя синтаксис textStart, textEnd . Поэтому я указываю пару слов с процентной кодировкой в начале желаемого текста и пару слов с процентной кодировкой в конце желаемого текста, разделенных запятыми , .
Это выглядит так:
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html #: ~: text = ECMAScript% 20Modules% 20in% 20Web% 20Workers, ES% 20Modules% 20in% 20Web% 20Workers. .
Для textStart у меня ECMAScript% 20Modules% 20in% 20Web% 20Workers , затем запятая , , за которой следует ES% 20Modules% 20in% 20Web% 20Workers. как текст Конец . Когда вы щелкаете в поддерживающем браузере, таком как Chrome, весь раздел выделяется и прокручивается для просмотра:
Теперь вы можете задаться вопросом о моем выборе textStart и textEnd . Фактически, немного более короткий URL-адрес https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html #: ~: text = ECMAScript% 20Modules, Web% 20Workers. с двумя словами на каждой стороне тоже подойдет. Сравните textStart и textEnd с предыдущими значениями.
Если я сделаю еще один шаг и теперь использую только одно слово для textStart и textEnd , вы увидите, что у меня проблемы.URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html #: ~: text = ECMAScript, Workers. теперь еще короче, но выделенный фрагмент текста больше не является изначально желаемым. Выделение прекращается при первом появлении слова Workers. , что правильно, но не то, что я намеревался выделить. Проблема в том, что желаемый раздел не идентифицируется однозначно текущими однословными значениями textStart и textEnd :
prefix- и -suffix # Использование достаточно длинных значений для textStart и textEnd — одно из решений для получения уникальной ссылки. Однако в некоторых ситуациях это невозможно. Кстати, почему я выбрал в качестве примера сообщение в блоге о выпуске Chrome 80? Ответ заключается в том, что в этом выпуске были представлены фрагменты текста:
Обратите внимание, как на скриншоте выше слово «текст» появляется четыре раза.Четвертое вхождение написано зеленым шрифтом кода. Если бы я хотел связать это конкретное слово, я бы установил textStart на text . Поскольку слово «текст» — это всего лишь одно слово, не может быть textEnd . Что теперь? URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html #: ~: text = text совпадает с первым появлением слова «Текст». «уже в заголовке:
Внимание : Обратите внимание, что при сопоставлении фрагментов текста регистр не учитывается.
К счастью, есть решение. В таких случаях я могу указать префикс - и -суффикс . Слово перед зеленым шрифтом кода «текст» — это «the», а слово после него — «параметр». Ни одно из трех других вхождений слова «текст» не имеет таких же окружающих слов. Вооружившись этими знаниями, я могу настроить предыдущий URL-адрес и добавить префикс - и суффикс - .Как и другие параметры, они также должны быть закодированы в процентах и могут содержать более одного слова. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html #: ~: text = the-, text, -parameter . Чтобы синтаксический анализатор мог четко идентифицировать префикс - и - суффикс , они должны быть отделены от textStart и дополнительного textEnd тире - .
Полный синтаксис #
Полный синтаксис фрагментов текста показан ниже. (Квадратные скобки указывают на необязательный параметр.) Значения всех параметров должны быть закодированы в процентах. Это особенно важно для символов тире –, амперсанда и и запятой , , поэтому они не интерпретируются как часть синтаксиса текстовой директивы.
Каждый из префиксов - , textStart , textEnd и -suffix будет соответствовать только тексту в пределах одного элемента уровня блока, но полный textStart, textEnd диапазоны могут охватывать несколько блоки.Например, : ~: text = Быстрая, ленивая собака не найдет соответствия в следующем примере, потому что начальная строка «Быстрая» не появляется в одном непрерывном элементе уровня блока:
quick brown fox
перепрыгнул через ленивую собаку Однако в этом примере он совпадает:
< div> Быстрая коричневая лиса 