Change color of one character in a text box HTML/CSS [duplicate]
I’m designing a web site and i would like to ask you guys that, how can I change the color of just one character in a string in a text box of HTML by CSS?
example : STACK OVER FLOW just the ‘A’ letter is red!
8 Answers 8
You can’t do this with a regular <input type=»text»> or <textarea> element, but with a normal element (like <div> or <p> ) made contenteditable , you have all the freedoms of html/css formatting.
I can’t believe no one has suggested this yet. But if you’re ok with a WebKit only solution, you can make a color gradient with discrete separations and apply it to the text like this:
This is nice because it’s not limited by the tag the text is placed in like some of the other answers. And if you’re in a situation where you can’t really change the html (for instance if you’re using the same style sheet on multiple pages and need to make a retroactive change) this could be helpful. If you can change the html though, xec’s answer has much better browser support.
::first-letter (:first-letter)
CSS псевдоэлемент ::first-letter применяет стили к первой букве первой строки блочного элемента, но только если нету другого предшествующего содержимого (такого как изображения или инлайн таблицы).
Может быть непросто определить первую букву элемента:
- Пунктуация, которая предшествует или следует сразу за первой буквой, включается в селектор. Пунктуация включает любой символ Юникода, определённый в классах open (Ps), close (Pe), initial quote (Pi), final quote (Pf), and other punctuation (Po).
- В некоторых языках существуют диграфы, которые должны преобразовываться в верхний регистр вместе, например IJ в Нидерландском. В этих случаях обе буквы диграфа должны соответствовать псевдоэлементу ::first-letter (это слабо поддерживается браузерами, смотрите таблицу совместимости ниже).
- Комбинация псевдоэлемента ::before и свойства content может привести к добавлению некоторого текста в начало элемента. В этом случае псевдоэлементу ::first-letter будет соответствовать первая буква добавленного содержимого.
Примечание: В CSS3 появилась запись ::first-letter (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :first-letter , введённую в CSS2.
Разрешённые свойства
Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::first-letter :
Как в html изменить цвет текста?
При оформлении текста на сайте нам часто приходится изменять цвет текста, размер, жирность, начертание и так далее. В этой статье вы узнаете как в HTML изменить цвет текста не прибегая к помощи дополнительных плагинов, модулей и библиотек.
Навигация по статье:
Если ваш сайт сделан на одной из CMS, то для изменения цвета текста вы можете использовать встроенный функционал визуального редактора, однако такая функция там не всегда есть, а ставить ради этого дополнительный модуль или плагин не всегда есть смысл.
Плюс бывают ситуации когда вам нужно изменить цвет текста в виджете или слайдере или ещё где то, где визуальный редактор не поддерживается.
Изменения цвета текста средствами HTML
К счастью в HTML есть специальный тег с атрибутом color, в котором можно указать нужный цвет текста.
Значение цвета можно задавать несколькими способами:
- При помощи кодового названия (Например: red, black, blue)
- В шестнадцатиричном формате (Например: #000000, #ccc)
- В формате rgba (Например: rgba(0,0,0,0.5))
Таким образом вы можете изменить цвет у целого абзаца, слова или одной буквы, обернув то что вам нужно в тег <font>
Как изменить цвет текста в HTML с использованием CSS?
Для изменения цвета текста для определённого абзаца или слова можно присвоить ему класс, а затем в CSS файле задать для этого класса свойство color.
Выглядеть это будет так:
HTML
CSS
Вместо color-text вы можете указать свой класс.
Если вы не хотите лезть в CSS файл чтобы внести изменения, то можно дописать CSS стили прямо в HTML коде станицы, воспользовавшись тегом <style>.
- 1. Находи вверху HTML страницы тег </head>. Если ваш сайт работает на CMS, то этот фрагмент кода находится в одном из файлов шаблона. Например: header.php, head.php или что-то наподобие этого в зависимости от CMS.
- 2. Перед строкой </head> добавляем теги <style>…</style>.
- 3. Внутри этих тегов задаём те CSS свойства, которые нам нужны. В данном случае color:
Этот способ подходит если вам нужно изменить цвет сразу для нескольких элементов на сайте.
Если же такой элемент один, то можно задать или изменить цвет текста прямо в HTML коде.
Изменяем цвет в HTML коде при помощи атрибута style
Для этого добавляем к тегу для которого нам нужно изменить цвет текста атрибут style.
Здесь же при необходимости через ; вы можете задать и другие CSS свойства, например, размер шрифта, жирность и так далее.
Лично я обычно использую вариант с заданием стилей в CSS файле, но если вам нужно изменить цвет текста для какого то одного-двух элементов, то не обязательно присваивать им класс и потом открывать CSS файл и там дописывать слили. Проще это сделать прямо в HTML при помощи тега <font> или артибута style.
Так же вы должны знать, что есть такое понятие как приоритет стилей. Так вот когда вы задаёте цвет текста или другие стили в html при помощи атрибута style, то у этих стилей приоритет будет выше чем если вы их зададите в CSS файле (при условии что там не использовалось правило !important)
Чтобы изменить цвет текста отдельного слова, фразы или буквы мы можем обернуть их в тег span и задать ему нужный цвет.
Как покрасить одну букву в html
Давно хотел выделить первые буквы в абзацах красным цветом и сделать их жирными. Но, честно говоря, долго думал, что такие вещи реализуются только на JavaScript-е. Оказалось, заблуждался 🙂
Чтобы выделить первый символ в тексте, можно воспользоваться псевдоэлементом first-letter языка CSS.
Для примера выделим первый символ у всех параграфов на странице.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title>Как выделить первый символ в тексте?</title> <style type=»text/css»> p:first-letter < font-weight:bold; color:#F00; ></style> </head> <body> <p>Параграф №1.</p> <p>Параграф №2.</p> <p>Параграф №3.</p> </body> </html>
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title>Как выделить первый символ в тексте?</title> <style type=»text/css»> p::first-letter < font-weight:bold; color:#F00; ></style> </head> <body> <p>Параграф №1.</p> <p>Параграф №2.</p> <p>Параграф №3.</p> </body> </html>
Вот здесь вы можете посмотреть пример страницы, для выделения первых символов параграфов которой используется first-letter.
Чем отличаются между собою два приведённых выше примера? Отличие имеется. Дело в том, что «правильнее» писать псевдоэлемент с двумя двоеточиями, но такой синтаксис не поддерживается браузерами Internet Explorer. Поэтому и используется «неправильный» синтаксис с одним двоеточием (этот синтаксис поддерживается не только IE, но и многими другими браузерами).
Во внешнем css-файле first-letter используется точно также.
По моему субъективному мнению, выделение первого символа делает текст веб-страницы более удобным для чтения. По такому тексту легче ориентироваться. Хотя, конечно, это спорное мнение.
Дата добавления: 2012-02-06
Рейтинг поста: 
5 