Здравствуйте! Чтобы создать цитаты в стиле Telegram с фоновым цветом и изменением цвета в HTML, вы можете использовать HTML для разметки и CSS для стилизации. Вот пример, как это можно сделать:
### Шаг 1: HTML-разметка
Вы можете использовать элемент `<blockquote>` для цитаты:
```html
<div class="quote">
<p>Это пример цитаты в стиле Telegram.</p>
<span>— Автор</span>
</div>
```
### Шаг 2: CSS-стилизация
Теперь добавим CSS для стилизации цитаты. Вы можете настроить цвета и шрифт по своему усмотрению:
```css
.quote {
background-color: #e9f5fa; /* Цвет фона */
border-left: 5px solid #1a73e8; /* Левая граница */
padding: 10px 15px; /* Отступы */
margin: 20px 0; /* Отступы сверху и снизу */
border-radius: 4px; /* Закругление углов */
font-style: italic; /* Курсив для текста */
}
.quote span {
display: block; /* Перенос на новую строку */
text-align: right; /* Выравнивание по правому краю для автора */
color: #555; /* Цвет текста автора */
margin-top: 10px; /* Отступ сверху для автора */
}
```
### Шаг 3: Итоговый пример
Объединим HTML и CSS в полный пример:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Цитаты в стиле Telegram</title>
<style>
.quote {
background-color: #e9f5fa;
border-left: 5px solid #1a73e8;
padding: 10px 15px;
margin: 20px 0;
border-radius: 4px;
font-style: italic;
}
.quote span {
display: block;
text-align: right;
color: #555;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="quote">
<p>Это пример цитаты в стиле Telegram.</p>
<span>— Автор</span>
</div>
</body>
</html>
```
Вы можете добавить несколько таких блоков с цитатами на страницу, и они все будут выглядеть как цитаты в мессенджере Telegram. Так же вы можете менять цвета и стили по своему усмотрению для создания уникального дизайна.