Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.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 ExplorerChromeOperaSafariFirefoxAndroidiOS
3. 0+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, отличается от цвета темы для текста, см. раздел Особые случаи ниже.

Как изменить цвет шрифта на изображение фона?

  1. Примените изображение фона, как описано в статье KB0129.
  2. Установите основной цвет шрифта think-cell с высоким контрастом относительно изображения фона и установите в качестве альтернативного цвета такой же по уровню яркости цвет, как и изображение. См. KB0105.

Как получить белые метки на темном фоне?

  1. Настройте темный фон, как описано в статье KB0129.
  2. Установите белый основной цвет шрифта, как описано в статье KB0105.

Особые случаи

В некоторых версиях PowerPoint может возникать ошибка, которая приводит к отображению неправильных цветов шрифта.

Дополнительные сведения и способы решения см. в статье KB0206.

Заполнитель основного текста образца слайдов не использует цвет текста темы.

Если шаблон PowerPoint неоднозначно использует цвета темы, то по нашему опыту, целевой цвет шрифта чаще всего — это цвет заполнителя основного текста. Поэтому think-cell использует этот цвет как основной цвет шрифта. Ошибка не влияет на альтернативный цвет шрифта и выбирается, как описано выше.

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

Как изменить цвет по умолчанию выделенного текста с помощью CSS

Содержание ¶

  1. Как изменить цвет шрифта при выделении текста
  2. Как изменить фоновый цвет при выделении текста
  3. Как изменить цвет тени при выборе текста
  4. Как изменить цвет полей Textarea и Input при выборе текста
  5. Как изменить цвет выбранного изображения
  6. Как создать разные эффекты выделения для одного и того же элемента на одной странице
  7. Как применить эффекты выделения для всей страницы

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

Если вам не нравится синий цвет, или по какой-либо другой причине (например, это может быть связано с дизайном вашей веб-страницы) вы хотите изменить цвет выделения, 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 г. 
      и вы можете выиграть до $$$$, включая потрясающие
       лето 
      поездки!