Тег | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <basefont> предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всем документе за исключением тега <font>, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере <head> или <body>, причем несколько раз. Это позволяет изменять вид шрифта для части документа.
Синтаксис
<basefont>
Закрывающий тег
Не требуется.
Атрибуты
- color
- Устанавливает цвет текста.
- face
- Определяет гарнитуру шрифта.
- size
- Задает размер шрифта в условных единицах.
Валидация
Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег BASEFONT</title> </head> <body> <basefont face="Arial, Helvetica, sans-serif" size="4" color="maroon"> <p>Добро пожаловать на мою страничку, которая оформлена с использованием тега BASEFONT</p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид текста в браузере Internet Explorer 8
Как изменить цвет текста и фона в текстовом поле?
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.![]() | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Установить цвет фона и текста для однострочного текстового поля формы.
Решение
Цвет фона элемента задается стилевым свойством background-color, а цвет текста с помощью color, эти свойства необходимо добавить к селектору INPUT. Поскольку тег <input> является универсальным, то он создает не только текстовое поле, но и другие элементы форм и чтобы определить стиль для конкретного поля можно воспользоваться классами, как показано в примере 1.
Пример 1. Цвет текста и фона в текстовом поле
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет текста и фона</title>
<style>
.colortext {
background-color: #ffe; /* Цвет фона */
color: #930; /* Цвет текста */
}
</style>
</head>
<body>
<form method="post" action="handler.
php">
<p><input type="text">
<input type="submit" name="Submit" value="Послать"></p>
</form>
</body>
</html>
Результат примера показан на рис. 1.
Рис. 1. Вид текстового поля после добавления к нему стилей
В данном примере добавляется новый класс с именем colortext, он добавляется к тегу <input> с помощью конструкции.
Аналогично можно определить стиль одновременно для всех текстовых полей, зная, что к тегу <input> в этом случае всегда добавляется атрибутtype. Используя запись INPUT[type=»text»] задаем стиль для всех элементов <input>, но стиль применяется только в том случае, когда значение атрибута type равно text (пример 2).
Пример 2. Использование селекторов атрибутов
XHTML 1.0CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Цвет фона и текста в поле</title> <style> INPUT[type="text"] { background-color: navy; color: #ffe; } </style> </head> <body> <form method="post" action="handler.php"> <p><input type="text"> <input type="submit" name="Submit" value="Послать"></p> </form> </body> </html>
Как изменять цвет текста в html документе
О том, как изменять цвет фона в html документе мы рассмотрели в прошлом уроке, а сейчас узнаем, как изменять цвет текста в html документе.
Для этого вам может понадобиться все та же таблица html цветов, в которой каждый цвет представлен как html кодом цвета, так и буквенным написанием.
В тему:
По умолчанию цвет текста в html документе черный. Изменить цвет текста можно двумя способами. В начале мы рассмотрим, как изменить цвет текста с помощью нам уже известного тега <body></body>. Для этого в этот тег мы добавим еще один атрибут text=»». Он будет выглядеть следующим образом <body text=»#0000CD»>. Т. е. с помощью text=» #0000CD» мы задали цвет текста и в данном случае он будет синим. Весь код нашей страницы будет иметь следующий вид:
<html> <head> <title>Моя первая страница</title> </head> <body text="#0000CD">Вот вы и создали свою первую web страницу!!!</body> </html>
Должен вам сказать, что в данном случае задавая цвет текста через тег <body></body> мы установили такой текст для всего документа. Т. е. какой бы текст вы не написали на вашей странице, в данном случае он будет отображаться синим цветом.
Задать цвет только отдельному отрезку текста можно при помощи тега <font> и обязательного закрывающего его тега </font>. Поэтому если вам нужно изменить цвет текста не во всем документе, а в каком-то конкретном месте, то можно использовать этот тег.
К примеру, давайте изменим цвет текста слов, «web страницу!!!» которые присутствуют в нашем документе. Для этого нужно наши слова «web страницу!!!» поместить между тегами, следующим образом: <font>web страницу!!!</font>, а для того чтобы изменить цвет текста необходимо еще в тег <font> дописать следующий атрибут color=»», все это будет выглядеть следующим образом: <font color=»#B22222″>web страницу!!!</font>
В данном случае текст, заключенный между тегами будет окрашен в красный цвет. Весь код нашей странички будет выглядеть так:
<html> <head> <title>Моя первая страница</title> </head> <body text="#0000CD">Вот вы и создали свою первую <font color="#B22222">web страницу!!!</font> </body> </html>
Это не все атрибуты тега <font>, при помощи данного тега можно задавать не только цвет текста в html документе, но так же размер и вид шрифта текста. Как это сделать мы рассмотрим в следующих уроках по html.
Материал подготовлен порталом: webmastermix.ru
Рекомендуем ознакомиться:
- Подробности
Обновлено: 04 Сентябрь 2013
Создано: 13 Январь 2010
Просмотров: 67647
HTML: изменение цвета определенных слов в строке текста
У меня есть следующее сообщение (слегка измененное):
«Участвуйте в конкурсе до 30 января 2011 года, и вы можете выиграть до $$$$-включая удивительные летние поездки!»
В настоящее время у меня есть:
<p>
форматирование текстовой строки, но вы хотите изменить цвет «January 30, 2011» на #FF0000 и «summer» на #0000A0.
Как мне сделать это строго с HTML или встроенным CSS?
html css text colors inlineПоделиться Источник Mitch 07 января 2011 в 05:38
8 ответов
- Изменение цвета определенных слов в метке SWT?
В Swing можно использовать HTML для стилизации слов на этикетке. E.g если бы я хотел, чтобы определенное слово на этикетке было выделено жирным шрифтом или другого цвета, я мог бы сделать это с HTML. Есть ли эквивалентная функция для SWT? Скажем, если бы у меня были слова A quick brown fox jumped…
- Изменение цвета текста при альтернативных разрывах строк?
Я хотел бы составить список, в котором следующая строка будет иметь изменение цвета текста, а затем вернуться к предыдущему цвету на следующей строке. Я искал повсюду ответ на этот вопрос, прежде чем спросить, но ничего не нашел. У меня есть простой текстовый список html (а не таблица), который…
125
<p> Enter the competition by <span>January 30, 2011</span> and you could win up to $$$$ — including amazing <span>summer</span> trips! </p>
Или вы можете использовать вместо этого классы CSS:
<html> <head> <style type="text/css"> p { font-size:14px; color:#538b01; font-weight:bold; font-style:italic; } .date { color: #ff0000; } .season { /* OK, a bit contrived... */ color: #0000a0; } </style> </head> <body> <p> Enter the competition by <span>January 30, 2011</span> and you could win up to $$$$ — including amazing <span>summer</span> trips! </p> </body> </html>
Поделиться Jacob 07 января 2011 в 05:41
49
Вы можете использовать тег HTML5 <mark>
:
<p>Enter the competition by
<mark>January 30, 2011</mark> and you could win up to $$$$ — including amazing
<mark>summer</mark> trips!</p>
И используйте это в CSS:
p { font-size:14px; color:#538b01; font-weight:bold; font-style:italic; } mark.red { color:#ff0000; background: none; } mark.blue { color:#0000A0; background: none; }
Тег <mark>
имеет фон по умолчанию color…at, по крайней мере, в Chrome.
Поделиться Juan Pablo Pinedo 14 декабря 2012 в 23:58
35
<p>
Enter the competition by <span>January 30, 2011</span> and you could win up to $$$$ — including amazing <span>summer</span> trips!
</p>
Элементы span являются встроенными и, таким образом, не нарушают поток абзаца, а только стиль между тегами.
Поделиться Damien-Wright 07 января 2011 в 05:41
- Изменение цвета выделения текста
Возможный Дубликат : Изменение цвета выделения Как этому сайту удается сделать выделение текста розовым, а не синим по умолчанию в моем браузере?
- Регулярное выражение для сопоставления определенных слов в строке
Я ищу регулярное выражение, которое соответствовало бы началу определенных слов в строке. Скажи, что у меня есть это: Это пример строки текста. Я бы хотел сопоставить каждую букву Т с которой начинается слово: Э то т он пример строки Т внутр. Любая помощь будет очень признательна.
20
используйте пролеты. ex) <span>January 30, 2011</span>
Поделиться brian_d 07 января 2011 в 05:41
18
<font color="red">This is some text!</font>
Это сработало лучше всего для меня, когда я хотел изменить только одно слово в предложении на красный цвет.
Поделиться user8588011 10 сентября 2017 в 15:01
3
Адаптируйте этот код так, как вам нравится, чтобы он соответствовал вашим потребностям, вы можете выбрать текст? в абзаце должен быть какой шрифт или стиль вам нужен!:
<head>
<style>
p{ color:#ff0000;font-family: "Times New Roman", Times, serif;}
font{color:#000fff;background:#000000;font-size:225%;}
b{color:green;}
</style>
</head>
<body>
<p>This is your <b>text. <font>Type</font></strong></b>what you like</p>
</body>
Поделиться Trevor Lee 19 июня 2016 в 11:23
2
Вы также можете создать класс:
<span> I am in yellow color!!!!!!</span>
затем в файле css сделайте:
.mychangecolor{ color:#ff5 /* it changes to yellow */ }
Поделиться JayMcpeZ_ 20 ноября 2015 в 15:34
-2
Вы могли бы использовать более длинный путь Боринджера
<p>Enter the competition by</p><p>summer</p>
вы получаете очко за rest
Поделиться otis answer 17 ноября 2015 в 19:51
Похожие вопросы:
Изменение цвета определенных слов в строке
Я пытаюсь изменить цвет конкретных слов, которые начинаются с @ , однако я продолжаю получать ошибку в приведенном ниже коде. Судя по тому, что я вижу, это что-то с переменной диапазона. Я получаю…
Изменение цвета текста в Greasemonkey
Я хочу написать сценарий Greasemonkey, который изменит цвет текста на любой странице, оставив структуру такой, какая она есть. Я хотел бы изменить первые 10 видимых символов на красные, следующие…
изменение цвета конкретных слов в TextView
У меня есть строковый массив: String[] words = {spades, hearts, diamonds, clubs}; Я хотел бы изменить цвет текста всех вхождений этих слов в пределах TextView с обычного черного цвета на красный….
Изменение цвета определенных слов в метке SWT?
В Swing можно использовать HTML для стилизации слов на этикетке. E.g если бы я хотел, чтобы определенное слово на этикетке было выделено жирным шрифтом или другого цвета, я мог бы сделать это с…
Изменение цвета текста при альтернативных разрывах строк?
Я хотел бы составить список, в котором следующая строка будет иметь изменение цвета текста, а затем вернуться к предыдущему цвету на следующей строке. Я искал повсюду ответ на этот вопрос, прежде…
Изменение цвета выделения текста
Возможный Дубликат : Изменение цвета выделения Как этому сайту удается сделать выделение текста розовым, а не синим по умолчанию в моем браузере?
Регулярное выражение для сопоставления определенных слов в строке
Я ищу регулярное выражение, которое соответствовало бы началу определенных слов в строке. Скажи, что у меня есть это: Это пример строки текста. Я бы хотел сопоставить каждую букву Т с которой…
Измените цвет шрифта для каждого слова в строке (JS или PHP)
Я искал, но не могу найти решение для увеличения цвета шрифта (например, легкость +10%) для каждого из 3 или 4 слов в названии. Цвет шрифта будет первоначально установлен в SCSS с помощью цветового…
Динамическое изменение цвета для определенных слов
У меня есть textarea, который пользователь будет вводить свой ввод, и я хочу изменить цвет для определенных слов, которые я ожидаю найти в строке ввода, например, я ожидаю, что пользователь введет…
Изменение цвета ключевых слов в linux terminal при вводе текста
Я пишу интерпретатор в C, который работает в консоли ubuntu. Я хочу изменить цвета ключевых слов , таких как int , double , function во время набора текста. Пример: functio должен быть белым, но как…
Как изменить цвет шрифта? :: think-cell
Автоматический выбор цвета шрифта
По умолчанию think-cell автоматически выбирает цвет шрифта для текста метки, чтобы обеспечить оптимальную читаемость даже при внесении изменений в диаграмму. В результате таких изменений метки могут перемещаться на другой фон, что требует обновления цвета шрифта. Эта операция может быть выполнена незаметно во время автоматического обновления диаграммы.
think-cell выбирает из двух конкретных цветов темы PowerPoint: Шрифт PowerPoint по умолчанию и шрифт противоположной яркости (Текст/фон — темная 1 и Текст/фон — светлая 1). Измените эти два цвета, чтобы изменить цвет шрифта всей презентации, например выберите темно-синий вместо черного или светло-серый вместо белого.
Убедитесь, что в PowerPoint выбран один из параметров стиля фона темы. Это необходимо, чтобы PowerPoint правильно использовал цвета темы для текста и фона. При преобразовании старой презентации или шаблона из файла *.ppt/*.pot в новый формат *.pptx/*.potx, PowerPoint не устанавливает правильный стиль фона.
- В PowerPoint 2007 и 2010: Конструктор → Фон → Стили фона.
- В PowerPoint 2013 и более поздних версиях: Конструктор → Варианты → Дополнительно → Стили фона.
Дополнительные сведения о правильной настройке стиля фона см. в статье KB0129.
Некоторые файлы PowerPoint неоднозначно используют цвета конструктора. Затем think-cell пытается определить цвет шрифта на основе доступных сведений о файле. Дополнительные сведения см. в разделе Особые случаи далее на этой странице.
Ручной выбор цвета шрифта
Вы можете применить цвет шрифта к выбранным меткам вручную (см. Цвет шрифта).
Подробное описание автоматического выбора цвета шрифта в think-cell
Какой цвет шрифта think-cell использует для текста метки?
think-cell выбирает между двумя цветами для меток: основным цветом шрифта и альтернативным цветом шрифта. Основной цвет шрифта think-cell — это цвет, который PowerPoint использует по умолчанию для текста.
Второй цвет, альтернативный цвет шрифта think-cell, должен быть цветом противоположной яркости. Поэтому think-cell рекомендует настраивать цветовую тему согласованно, то есть светлый альтернативный цвет должен дополнять темный основной цвет или наоборот. Таким образом корпорация Microsoft задумывала работу пар светлого/темного текста/фона — сравните шаблоны PowerPoint, которые автоматически устанавливаются с Office.
Светлые стили фона (например, стиль фона 1, 2) | Темный стиль фона (например, стиль фона 3, 4) | |
Основной текст цвета | Текст/фон — темная 1 | Текст/фон — светлая 1 |
Альтернативный цвет текста | Текст/фон — светлая 1 | Текст/фон — темная 1 |
Сведения об изменении этих цветов см. в статье KB0105.
Метки внутри фигур think-cell
Если метка размещена в фигуре, которую контролирует think-cell (обычно в сегменте гистограммы/линейчатой диаграммы или в области диаграммы с областями), цвет шрифта для этой метки автоматически выбирается из основного и альтернативного цветов шрифта для обеспечения оптимального контраста с фоном.
Если яркость альтернативного цвета близка к яркости основного цвета, из-за чего контрастность получается недостаточной, think-cell использует черный или белый цвет для инвертированных меток для усиления контраста с фоном.
Метки за пределами фигур think-cell
Если метка не размещена в фигуре, которую контролирует think-cell, то think-cell неизвестен фоне, на котором расположена метка. Поэтому программа использует основной цвет шрифта.
think-cell не может определить фактический фон метки, так как цвет за меткой может быть не цветом фона темы PowerPoint, а другим цветом, который был задан следующим образом: нажатие правой кнопкой мыши на фон → Формат фона. В этом случае фон может даже быть градиентом, изображением, текстурой или шаблоном. Метка также может быть размещена в пользовательской фигуре или изображении PowerPoint.
Это также относится к меткам, заключенным в рамки В этом случае think-cell использует цвет фона темы для фона метки и основной цвет шрифта для текста метки.
Как узнать текущие цвета шрифта think-cell?
Чтобы быстро узнать, какие цвета сейчас think-cell использует для текста и линий на диаграммах, просто откройте цветовую палитру PowerPoint.
Нажмите правой кнопкой мыши на текстовое поле и откройте раскрывающееся меню Цвет шрифта. Наведите указатель мыши на верхнюю часть первых двух квадратов палитры, как показано на снимках экрана. Во втором квадрате показан основной цвет шрифта think-cell. В первом квадрате показан альтернативный цвет шрифта think-cell.
Если основной цвет шрифта, используемый think-cell, отличается от цвета темы для текста, см. раздел Особые случаи ниже.
Как изменить цвет шрифта на изображение фона?
- Примените изображение фона, как описано в статье KB0129.
- Установите основной цвет шрифта think-cell с высоким контрастом относительно изображения фона и установите в качестве альтернативного цвета такой же по уровню яркости цвет, как и изображение. См. KB0105.
Как получить белые метки на темном фоне?
- Настройте темный фон, как описано в статье KB0129.
- Установите белый основной цвет шрифта, как описано в статье KB0105.
Особые случаи
В некоторых версиях PowerPoint может возникать ошибка, которая приводит к отображению неправильных цветов шрифта.
Дополнительные сведения и способы решения см. в статье KB0206.
Заполнитель основного текста образца слайдов не использует цвет текста темы.
Если шаблон PowerPoint неоднозначно использует цвета темы, то по нашему опыту, целевой цвет шрифта чаще всего — это цвет заполнителя основного текста. Поэтому think-cell использует этот цвет как основной цвет шрифта. Ошибка не влияет на альтернативный цвет шрифта и выбирается, как описано выше.
Если заполнитель основного текста использует несколько цветов шрифта и конечный цвет в think-cell отличается от ожидаемого, обратитесь наша группа поддержки.
Как изменить цвет по умолчанию выделенного текста с помощью CSS
Содержание ¶
- Как изменить цвет шрифта при выделении текста
- Как изменить фоновый цвет при выделении текста
- Как изменить цвет тени при выборе текста
- Как изменить цвет полей Textarea и Input при выборе текста
- Как изменить цвет выбранного изображения
- Как создать разные эффекты выделения для одного и того же элемента на одной странице
- Как применить эффекты выделения для всей страницы
Каждый раз, когда пользователь выбирает текст для выделения, автоматически применяется какой-нибудь фоновый цвет, а иногда может меняться цвет текста. Если вы раньше не заметили этого, просто выделите это предложение, чтобы увидеть фоновый цвет текста.
Если вам не нравится синий цвет, или по какой-либо другой причине (например, это может быть связано с дизайном вашей веб-страницы) вы хотите изменить цвет выделения, CSS3 дает эту возможность!
Псевдоэлемент ::selection является известной функцией CSS3, который переопределяет цвет выделенного текста на уровне браузера или системы. Он также дает возможность указать цвет и фон для выбранного пользователем текста.
Можно изменить цвет/фоновый цвет определенных элементов или всей веб-страницы.
Количество свойств, используемых с этим псевдоэлементом, ограничено. С помощью псевдоэлемента ::selection можно изменить значения только трех свойств (color, background-color и text-shadow). В этой статье мы покажем, каким будет эффект для каждого из этих свойств.
Для максимальной совместимости браузера используйте расширение -moz- для поддержки в Firefox (::-moz-selection).
Как изменить цвет шрифта при выделении текста¶
Чтобы изменить цвет элемента, необходимо добавить стиль к элементу с помощью псевдоэлемента ::selection. Можно изменить только цвет шрифта, а также цвет шрифта вместе с фоном.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.green::-moz-selection{
color: #8ebf42;
}
.green::selection{
color: #8ebf42;
background-color: initial;
}
.bg-green::-moz-selection{
background-color: #8ebf42;
}
.bg-green::selection{
background-color: #8ebf42;
}
.bg-transparent::-moz-selection{
color: #8ebf42;
background-color: transparent;
}
.bg-transparent::selection{
color: #8ebf42;
background-color: transparent;
}
.white-green::-moz-selection{
color: #fff;
background-color: #8ebf42;
}
.white-green::selection{
color: #fff;
background-color: #8ebf42;
}
</style>
</head>
<body>
<p>Выберите этот текст и увидите зеленый цвет шрифта и фон по умолчанию.</p>
<p>Выберите этот текст и увидите цвет шрифта по умолчанию и зеленый фон.</p>
<p>Выберите этот текст и увидите зеленый цвет шрифта без фонового цвета.</p>
<p>Выберите этот текст и увидите белый цвет шрифта и зеленый фоновый цвет.</p>
</body>
</html>
Попробуйте сами!В этом примере фоновый цвет по умолчанию — это цвет данного сайта.
Как изменить фоновый цвет при выделении текста¶
Здесь нужно применить то же самое, только для фонового цвета. Просто добавьте стиль к элементу с помощью ::selection и установите выбранный вами цвет для свойства background-color.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.green::-moz-selection{
background-color: #8ebf42;
}
.green::selection{
background-color: #8ebf42;
}
.yellow::-moz-selection{
background-color: #ffcc00;
}
.yellow::selection{
background-color: #ffcc00;
}
</style>
</head>
<body>
<p>Текст с фоновым цветом по умолчанию.</p>
<p>Выберите этот текст и увидите зеленый фон.</p>
<p>Выберите этот текст и увидите желтый фон.</p>
</body>
</html>
Попробуйте сами!В случае, если не хотите фоновый цвет при выделении текста, установите свойство background-color со значением «transparent».
Как изменить цвет тени при выборе текста¶
Используйте дальше псевдоэлемент ::selection для добавления, удаления или изменения вида текстовой тени при выделении.
Вам необходимо только установить свойство text-shadow для псевдоэлемента ::selection.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.shadow2{
text-shadow: 1px 1px 1px;
}
.shadow3{
text-shadow: 1px 2px 4px #000;
}
.shadow4{
text-shadow: 1px 2px 4px;
}
.shadow1::-moz-selection{
text-shadow: 1px 1px 1px;
background-color: transparent;
}
.shadow1::selection{
text-shadow: 1px 1px 1px;
background-color: transparent;
}
#shadow2::-moz-selection{
text-shadow: none;
background: #fffae6;
}
.shadow2::selection{
text-shadow: none;
background: #fffae6;
}
.shadow3::-moz-selection{
text-shadow: 1px 1px 2px #222;
}
.shadow3::selection{
text-shadow: 1px 1px 2px #222;
}
.shadow4::-moz-selection{
text-shadow: 1px 2px 4px #208A28;
background-color: transparent;
color: #208A28;
}
.shadow4::selection{
text-shadow: 1px 2px 4px #208A28;
background-color: transparent;
color: #208A28;
}
</style>
</head>
<body>
<p>Выделите текст и увидите его тень.</p>
<p>Выделите текст, чтобы удалить его тень.</p>
<p>Выделите текст, чтобы он стал яснее.</p>
<p>Выделите текст, чтобы изменить цвет его тени.</p>
</body>
</html>
Попробуйте сами!Как изменить цвет полей Textarea и Input при выборе текста¶
Также возможно изменить цвет при выделении текста для полей <textarea> и <input>. Давайте рассмотрим пример с псевдоэлементом ::selection с элементами textarea и input:
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
input::-moz-selection{
color: #1c87c9;
background-color: #eee;
}
input::selection{
color: #1c87c9;
background-color: #eee;
}
textarea::-moz-selection{
color: white;
background-color: #8ebf42;
}
textarea::selection{
color: white;
background-color: #8ebf42;
}
</style>
</head>
<body>
<p>Элемент input</p>
<form><input type="text" value="Выделите этот input текст" /></form>
<p>Элемент textarea</p>
<textarea rows="5" cols="25">Выделите этот textarea текст</textarea>
</body>
</html>
Попробуйте сами!Как изменить цвет выбранного изображения¶
Вы можете изменить цвет выделенного изображения с помощью псевдоэлемента ::selection. Смотрите пример сами:
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
img {
padding: 10px;
}
#img2::-moz-selection{
background-color: #d9d9d9;
}
#img2::selection{
background-color: #d9d9d9;
}
</style>
</head>
<body>
<p>Здесь второе изображение при выделении становится серым.</p>
<p>Выделите обе изображения, чтобы увидеть разницу.</p>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
</body>
</html>
Попробуйте сами! Как создать разные эффекты выделения для одного и того же изображения на одной страницеПредставьте, что у вас есть 4 параграфа, и вы хотите применить разные цвета для каждого из них по отдельности.
В таком случае необходимо изменить цвет выделения для разных параграфов или разных разделов страницы.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p.green::selection {
background: #8ebf42;
}
p.green::-moz-selection {
background: #8ebf42;
}
p.blue::selection {
background: #1c87c9;
}
p.blue::-moz-selection {
background: #1c87c9;
}
p.yellow::selection {
background: #ffcc00;
}
p.yellow::-moz-selection {
background: #ffcc00;
}
p.red::selection {
background: #ff6666;
}
p.red::-moz-selection {
background: #ff6666;
}
</style>
</head>
<body>
<p>Выберите текст, и он выделится зеленым цветом.</p>
<p>Выберите текст, и он выделится синим цветом.</p>
<p>Выберите текст, и он выделится желтым цветом.</p>
<p>Выберите текст, и он выделится красным цветом.</p>
</body>
</html>
Попробуйте сами!Селекторы не могут быть объединены ни в коем случае. Если вы объедините несколько селекторов, они не будут работать, так как браузеры игнорируют все селекторы, когда какая-нибудь часть непонятна или недействительна.
Селекторы не могут быть объединены ни в коем случае. Если вы объедините несколько селекторов, они не будут работать, так как браузеры игнорируют все селекторы, когда какая-нибудь часть непонятна или недействительна.¶
Применение эффектов выделения к определенным элементам может быть напрасной потерей времени, если просто необходимо иметь одинаковый эффект для всей страницы вашего сайта. Использование псевдоэлемента ::selection дает возможность задать цвет выделения для всей страницы без его применения к определенным элементам.
Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
::-moz-selection{
color: #fff;
background-color: #8ebf42;
}
::selection{
color: #fff;
background-color: #8ebf42;
</style>
</head>
<body>
<h4>Выберите несколько элементов на странице и увидите белый цвет выделения, а фоновый цвет установлен в зеленый для всей страницы.</h4>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.. I</p>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
</body>
</html>
Попробуйте сами!::selection поддерживается многими браузерами. Проблема совместимости с Firefox решается при помощи добавления префикса -moz- перед селектором. В случае планшетов и мобильных устройств данный селектор не поддерживается в iOS Safari и Opera Mini.
Не рекомендуется полагаться на нестандартные функции CSS, если есть высокий риск, что веб-браузер может без предупреждения в любой момент удалить поддержку для неофициального CSS селектора или псевдоэлемента .
Добавление стиля с помощью этого псевдоэлемента в соответствии с цветами вашего сайта (вместо использования скучного синего фонового цвета при выделении текста) может сделать вашу веб-страницу интересным. Для определенной части вашей страницы можете выбрать фоновый цвет выделения или применить разные цвета для разных частей.
HTML-теги. Изменение цвета шрифта — Инструкция по применению
В нашей системе у вас есть возможность верстать текст на страницах при помощи основных HTML-тегов. Для этого вам понадобятся страница, созданная с модулем «Редактируемая страница», «Периодика», «Каталог товаров» (только при редактировании текстового поля «Описание раздела» или «Описание» для позиции каталога), «Анкета» (только при редактировании формы «Помощь/Информация») и начальное понимание об оформлении при помощи тегов. Внимание! Данная возможность в нашей системе не предоставляет возможности вставлять активное содержимое на страницу и менять ее дизайн и может быть использована только для оформления контента. | |
HTML-теги. Изменение цвета шрифта. Шаг 1Чтобы изменить цвет шрифта, войдите при редактировании в режим HTML. |
|
HTML-теги. Изменение цвета шрифта. Шаг 2Найдите слово/словосочетание/предложение/абзац, для которого вы хотите изменить цвет. |
|
HTML-теги. Изменение цвета шрифта. Шаг 3Вставьте тег «» (где после знака «=» название или код цвета, который вам необходим) перед словом/словосочетанием/предложением/абзацем. Внимание! Узнать код необходимого вам оттенка можно в графическом редакторе или в интернете, например, по этой ссылке. |
|
HTML-теги. Изменение цвета шрифта. Шаг 4Сразу же после слова/словосочетания/предложения/абзаца вставьте тег «». |
|
HTML-теги. Изменение цвета шрифта. Шаг 5Подтвердите изменение цвета, нажав кнопку «Сохранить». |
|
HTML-теги. Изменение цвета шрифтаЕсли все действия были выполнены верно, необходимый абзац будет выделен выбранным вами цветом. |
|
css — HTML: изменение цвета определенных слов в строке текста
css — HTML: изменение цвета определенных слов в строке текста — qaruПрисоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.
Спросил
Просмотрено 573к раз
У меня следующее сообщение (немного изменено):
«Примите участие в конкурсе до 30 января 2011 г., и вы сможете выиграть до $$$$ — включая прекрасные летние поездки! »
Сейчас у меня:
форматирует текстовую строку, но вы хотите изменить цвет «30 января 2011» на # FF0000 и «лето» на # 0000A0.
Как сделать это строго с помощью HTML или встроенного CSS?
Сэм Р.14.9k99 золотых знаков5757 серебряных знаков106106 бронзовых знаков
Создан 07 янв.
МитчМитч1,935 22 золотых знака 77 серебряных знаков33 бронзовых знака
Принять участие в конкурсе
30 января 2011 г.
и вы можете выиграть до $$$$, включая потрясающие
лето
поездки!
Или вы можете вместо этого использовать классы CSS:
Принять участие в конкурсе
30 января 2011 г.
и вы можете выиграть до $$$$, включая потрясающие
лето
поездки!