Какой CSS мне нужен, чтобы отметить фрагмент текста как выделенный?
В моем веб-приложении я хочу выделить фрагмент текста так, чтобы он выглядел так, как будто кто-то покрасил его определенным цветом. Приложение Medium также использует этот эффект.
(я хотел бы показать здесь изображение этого эффекта, но stackoverflow не позволяет мне опубликовать его, потому что у меня пока недостаточно очков репутации.)
Какая разметка CSS и / или HTML мне нужна для этого?
В качестве примечания: мое приложение написано с помощью React.
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 <mark> 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>