Какой CSS мне нужен, чтобы отметить фрагмент текста как выделенный?


В моем веб-приложении я хочу выделить фрагмент текста так, чтобы он выглядел так, как будто кто-то покрасил его определенным цветом. Приложение Medium также использует этот эффект.

(я хотел бы показать здесь изображение этого эффекта, но stackoverflow не позволяет мне опубликовать его, потому что у меня пока недостаточно очков репутации.)

Какая разметка CSS и / или HTML мне нужна для этого?

В качестве примечания: мое приложение написано с помощью React.

3   3  

3 ответа:

Вам необходимо использовать семантический <mark> тег для этого:

<p>This is some <mark>marked text</mark>.</p>

Затем вы можете стилизовать его любым способом, используя CSS:

mark {
  background-color: HotPink;
}
<p>This is additional <mark>marked text</mark>.</p>

Не имеет значения, написано ли приложение в React на любом другом фреймворке. Вы всегда можете определить CSS для базового html-тега, например, как предложил @Salaman.

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

mark.hotPink {
  background-color: HotPink;
}
<p>Do not forget to check out our <mark class="hotPink">hot new offer</mark> today.</p>

<p>Also, you can check out our <mark>standard offers as well</mark>.</p>

Вы можете написать CSS для тега, но вы, вероятно, не хотите делать это для каждого тега mark (потому что вы не знаете, может ли это повлиять на какую-то другую часть системы. лучший (и самый безопасный) способ сделать это-создать пользовательский класс (т. е. class="hotPink" и назначить его своей метке.

Надеюсь, это поможет, всего наилучшего! :)

Есть много способов сделать это:

  • выделите с помощью тега HTML <mark>

Here is an example of <mark>highlighted text</mark> using the &lt;mark&gt; tag.
  • Выделите текст только с помощью HTML-кода

<span style="background-color: #FFFF00">Yellow text.</span>
  • Выделите текст с помощью CSS и HTML

body { background-color:green; }
.highlight { background-color:#FFFF00; }
p { background-color:#FFFFFF; 
<span class="highlight">Highlighted Text</span>