Как изменить цвет одного слова в css

Как поменять цвет/размер отдельного слова в тексте? [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме.

Закрыт 7 лет назад .

Как поменять цвет/размер отдельного слова в тексте? Возможно ли это? Может через регулярные выражения?

Отслеживать
задан 26 авг 2016 в 19:40
19 1 1 серебряный знак 1 1 бронзовый знак
посредством только css
26 авг 2016 в 19:59
запихиваешь это слово в элемент и задаешь, что надо. регулярные выражения — это для джаваскрипта.
27 авг 2016 в 7:33

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

В общем случае, посредством только CSS — так сделать нельзя. (По крайней мере способа сделать это на момент написания комментария мне неизвестно).

Это потому что CSS правила оперируют сущностями DOM (и небольшим набором сущностей в DOM не входящих — псевдоэлементами). В DOM нет такого понятия как отдельное слово.

Да, и регулярных выражений в CSS тоже нету. Потому что они там не нужны, языка селекторов для задач решаемых CSS — достаточно.

«Решаемо чистым css» это только если текст статический, не меняется, искать там ничего не надо и Вы тупо вешаете ручками на слово а потом его цсской красите.

Так что если хотим странного — вперед учить javascript.

Отслеживать
ответ дан 26 авг 2016 в 20:06
Утка Учится Укрываться Утка Учится Укрываться
7,137 3 3 золотых знака 29 29 серебряных знаков 55 55 бронзовых знаков

Ну допустим так:

function i1(i1, i2, i3) < var i4 = document.getElementById("text"); i4.innerHTML = i4.innerHTML.replace(i1, "" + i1 + ""); return; >

Моё новое предложение 
 
 Чёрный, 12 пикселей 
 
 Красный, 48 пикселей 
 
 Белый, 16 пикселей 

Вот тут пример на JSFiddle.

Отслеживать
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
ответ дан 26 авг 2016 в 19:56
2,510 5 5 золотых знаков 29 29 серебряных знаков 59 59 бронзовых знаков
А теперь сравни код в фиддле и в ответе. Минус, пока не исправишь.
29 авг 2016 в 20:35

@Qwertiy, какая важная деталь. Исправил код в вопросе. Просто когда этот JSFiddle создавал проблемы возникли: ru.stackoverflow.com/questions/559895/… и поменять кое-что пришлось.

30 авг 2016 в 7:09

Убрал минус. Но 1. В onclick не стоит писать javascript: . 2. использование атрибута onclick — это нехорошо. 3. return лишний. 4. И вообще, моно было сделать сниппет.

30 авг 2016 в 8:44

@Qwertiy, пункты 1, 2 и 3 — почему? Может у него не только Javascript на странице. Чем onclick плох? return всегда везде добавляю, он ничем не вредит. Хотя можно его и убрать, да от этого ничего и не изменится. А как сниппеты делать я не умею, не нашёл.

30 авг 2016 в 8:47

1. Обработчик содержит кусок кода. А у кода нет протокола. Протокол javascript: парсится как протокол только в href. А в onclick он превращается в метку в коде. И, кажется, какие-то браузеры не умели такое корректно обрабатывать. 2. Просто плохой стиль. Требует наличия всех обработчиков в глобальном пространстве, соответственно оно захламляется и повышается риск случайных пересечений с другими скриптами. Хотя для примера несущественно. Но если бы обработчик добавлялся из кода, то проблем с неработающим фиддлом бы не возникло. 3. Если нет разницы, зачем писать больше? 4. Кнопка Фрагмент кода.

Как изменить цвет одного слова в css

Перемена

Как изменить стиль первого слова в тексте (:first-word)

Недавно спрашивали, как средствами CSS сделать динамическое выделение первого слова в тексте. Оказалось, не всё так просто.

Первое, что приходит в голову — воспользоваться псевдоклассом :first-word. Однако, такого псевдокласса не существует. Получается, задача решения не имеет.

Не всё так грустно — первое слово в тексте можно поймать и выделить с помощью PHP или JavaScript. Об этих двух способах я сегодня и расскажу.

Каким образом вообще меняется стиль текста в HTML?

Для этого текст оборачивается в какой-нибудь тег. Можно присвоить класс или айди, чтобы точнее к нему прицелиться. Мы обойдемся без классов и в качестве примера возьмем заголовок H1 с тегом span внутри, и зададим ему такой стиль:

Т.е. текст в заголовках H1, обернутый в span, будет красного цвета.

Теперь наша задача сводится к тому, чтобы вычленить из заголовка первое слово и обернуть его в тег span .

Сделаем это сначала на PHP, а потом на JavaScript.

На PHP задача решается очень просто с помощью строковых функций.

Допустим у нас есть некая переменная $title, содержащая искомый текст.

Для решения задачи воспользуемся функцией explode(), которая возвращает массив строк, полученных разбиением строки с помощью разделителя. В нашем случае разделителем будет являться первый пробел.

В результате получим:

Теперь тегу span можно задать нужный стиль.

JavaScript

С ванильным JavaScript вряд ли кто-то захочет связываться, а вот на jQuery задача решается ещё проще, чем на PHP.

Скрипт находит все заголовки H1 на странице и оборачивает первое слово внутри их тегом span.

Не забудьте подключить jQuery.

В результате первое слово всех заголовков H1 будет красного цвета, как и в примере с PHP.

Взяв за основу эти решения, можно пойти дальше и усложнить их до нужного результата. А про CSS обязательно расскажу, как только найдётся нормальное решение.

Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.

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

С помощью CSS легко установить цвет текста в документе. Если вы хотите, чтобы абзацы на вашей странице отображались в определенном цвете, вы просто указываете это в своей внешней таблице стилей, и браузер отображает ваш текст в этом выбранном цвете. Что происходит тогда, когда вы хотите изменить цвет только одного слова (или, возможно, всего нескольких слов) в абзаце текста? Для этого вам нужно будет использовать встроенный элемент, такой как тег.

В конечном счете, изменение цвета отдельного слова или небольшой группы слов в предложении легко с помощью CSS, и теги являются допустимым HTML, поэтому не беспокойтесь о том, что это какой-то хак. При таком подходе вы также избегаете использования устаревших тегов и атрибутов, таких как «шрифт», который является продуктом ушедшей эпохи HTML.

Эта статья для начинающих веб-разработчиков, которые, вероятно, плохо знакомы с HTML и CSS. Это поможет вам узнать, как использовать тег HTML и CSS для изменения цвета определенного текста на ваших страницах. При этом у этого метода есть некоторые недостатки, которые мы рассмотрим в конце этой статьи. А пока читайте дальше, чтобы узнать, как изменить цвет текста. Это очень легко и должно занять около двух минут.

Пошаговая инструкция

1. Откройте веб-страницу, которую вы хотите обновить, в своем любимом текстовом редакторе HTML. Это может быть программа, например Adobe Dreamweaver, или простой текстовый редактор, такой как Notepad, Notepad ++, TextEdit и т. Д.
2. В документе найдите слова, которые вы хотите отобразить на странице другим цветом. Для этого урока давайте использовать несколько слов, которые находятся внутри более крупного абзаца текста. Этот текст будет содержаться в паре тегов. Найдите одно из двух слов, цвет которых вы хотите отредактировать.
3. Поместите курсор перед первой буквой в слове или группе слов, которые вы хотите изменить цвет. Помните, что если вы используете редактор WYSIWYG, такой как Dreamweaver, вы работаете в режиме «просмотра кода» прямо сейчас.
4. Давайте обернем текст, цвет которого мы хотим изменить, с помощью тега, включая атрибут класса. Весь абзац может выглядеть так:
5. Мы только что использовали встроенный элемент,, чтобы придать этому конкретному тексту «крючок», который мы можем использовать в CSS. Наш следующий шаг — перейти к нашему внешнему файлу CSS, чтобы добавить новое правило.

Советы и вещи, которые нужно остерегаться

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

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

С помощью CSS легко установить цвет текста в документе. Если вы хотите, чтобы абзацы на вашей странице отображались в определенном цвете, вы просто указываете это в своей внешней таблице стилей, и браузер отображает ваш текст в этом выбранном цвете. Что происходит тогда, когда вы хотите изменить цвет только одного слова (или, возможно, всего нескольких слов) в абзаце текста? Для этого вам нужно будет использовать встроенный элемент, такой как тег.

В конечном счете, изменение цвета отдельного слова или небольшой группы слов в предложении легко с помощью CSS, и теги являются допустимым HTML, поэтому не беспокойтесь о том, что это какой-то хак. При таком подходе вы также избегаете использования устаревших тегов и атрибутов, таких как «шрифт», который является продуктом ушедшей эпохи HTML.

Эта статья для начинающих веб-разработчиков, которые, вероятно, плохо знакомы с HTML и CSS. Это поможет вам узнать, как использовать тег HTML и CSS для изменения цвета определенного текста на ваших страницах. При этом у этого метода есть некоторые недостатки, которые мы рассмотрим в конце этой статьи. А пока читайте, чтобы узнать, как изменить этот цвет текста. Это очень легко и должно занять около двух минут.

Пошаговая инструкция

1. Откройте веб-страницу, которую вы хотите обновить, в своем любимом текстовом редакторе HTML. Это может быть программа, например Adobe Dreamweaver, или простой текстовый редактор, такой как Notepad, Notepad ++, TextEdit и т. Д.
2. В документе найдите слова, которые вы хотите отображать другим цветом на странице. Для этого урока давайте используем некоторые слова, которые находятся внутри более крупного абзаца текста. Этот текст будет содержаться в паре тегов. Найдите одно из двух слов, цвет которых вы хотите отредактировать.
3. Поместите курсор перед первой буквой в слове или группе слов, которые вы хотите изменить цвет. Помните, что если вы используете WYSIWYG-редактор, такой как Dreamweaver, вы сейчас работаете в режиме «просмотра кода».
4. Давайте обернем текст, цвет которого мы хотим изменить, с помощью тега, включая атрибут класса. Весь абзац может выглядеть так:
5. Мы только что использовали встроенный элемент,, чтобы придать этому конкретному тексту «крючок», который мы можем использовать в CSS. Наш следующий шаг – перейти к нашему внешнему файлу CSS, чтобы добавить новое правило.

1. В нашем CSS-файле давайте добавим:
2. Это правило установит этот встроенный элемент,, для отображения красным цветом. Если бы у нас был предыдущий стиль, который устанавливал бы текст нашего документа черным, этот встроенный стиль заставлял бы фокусируемый текст выделяться и выделяться другим цветом. Мы могли бы также добавить другие стили к этому правилу, возможно, выделив текст курсивом или жирным шрифтом, чтобы подчеркнуть его еще больше?
3. Сохраните свою страницу.
4. Протестируйте страницу в вашем любимом веб-браузере, чтобы увидеть изменения в действии.
5. Обратите внимание, что в дополнение к некоторым веб-профессионалы предпочитают использовать другие элементы, такие как пары тегов или. Эти теги использовались специально для жирного шрифта и курсива, но были объявлены устаревшими и заменены на и. Тем не менее, теги по-прежнему работают в современных браузерах, поэтому многие веб-разработчики используют их в качестве хуков встроенного стиля. Это не самый плохой подход, но если вы хотите избежать каких-либо устаревших элементов, мы рекомендуем придерживаться тега для таких стилевых нужд.

Советы и вещи, которые нужно остерегаться

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

Похожие публикации:

1. Как поставить две картинки рядом в css
2. Как поставить текст снизу css
3. Как при наведении на картинку заменить ее на другую картинку css
4. Как прижать кнопку к низу блока css

Хочу изменить цвет первой буквы в каждом абзаце. Что мне для этого надо сделать?

Выделить другим цветом первую букву в каждом абзаце текста.

Решение

Удобнее всего воспользоваться стилевым псевдоэлементом :first-letter , добавляя его к селектору p . В стилях вначале указывается селектор, затем :first-letter , после чего в фигурных скобках пишется свойство color и его значение, как показано в примере 1.

Пример 1. Применение псевдоэлемента first-letter

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Основная идея социально–политических взглядов К. Маркса была в том, что субъект политического процесса однозначно верифицирует институциональный гуманизм
 
Последнее особенно ярко выражено в ранних работах В.И. Ленина.
  

Результат данного примера показан ниже.

Рис. 1. Вид текста, у которого изменен цвет первых букв в каждом абзаце

В данном примере псевдоэлемент :first-letter применяется для изменения цвета первой буквы. Аналогично можно изменить размер символа и гарнитуру шрифта.

CSS по теме

• color
• Псевдоэлемент :first-letter

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

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

Изменить цвет одного повторяющегося символа во всем тексте (word)?

Есть нижние подчеркивание в тексте между словами вместо пробелов (пример: солнце_светит). Как сделать так, чтобы макрос окрасил все нижние подчеркивания в белый цвет.

• Вопрос задан более трёх лет назад
• 12089 просмотров

Комментировать

Решения вопроса 1

Инженер и вэб-дизайнер, рисую.

Макросы для такого не нужны.
Выделяете одно нижнее подчеркивание — в меню Главная кнопка «Заменить»
В поле найти «_» — без кавычек, в поле Заменить на «_» — без кавычек, выделяете это нижнее подчеркивание, кнопка «Больше >>» > Формат > Шрифт > Цвет выбираете белый и Нажимаете заменить все.
А зачем Вам такое делать? Может просто воспользоваться неразрывными пробелами?

Ответ написан более трёх лет назад

Нравится 4 6 комментариев