Атрибут style тега <samp>
Описание
Атрибут style позволяет задавать CSS-стили непосредственно для элемента <samp>, что полезно для быстрой стилизации вывода программ без создания отдельных CSS-правил.
<samp style="
font-family: 'Courier New', monospace;
background-color: #1e1e1e;
color: #f0f0f0;
padding: 12px;
border-radius: 4px;
white-space: pre;
">
$ npm install
+ react@18.2.0
added 15 packages in 2.4s </samp>
+ react@18.2.0
added 15 packages in 2.4s </samp>
Рекомендуемые стили:
| Свойство | Пример | Назначение |
|---|---|---|
font-family |
monospace |
Моноширинный шрифт для кода |
background-color |
#1e1e1e |
Фон терминала |
color |
#f0f0f0 |
Цвет текста |
white-space |
pre |
Сохранение форматирования |
Пример с цветовым кодированием:
<samp style="
font-family: monospace;
background: #282c34;
color: #abb2bf;
padding: 15px;
border-radius: 6px;
line-height: 1.5;
">
<span style="color: #56b6c2">$</span> git status<br>
<span style="color: #98c379">On branch</span> main<br>
<span style="color: #d19a66">Your branch is up to date</span>
</samp>
Рекомендации по использованию:
- Используйте для разовых стилевых правок
- Для повторяющихся стилей создавайте CSS-классы
- Сохраняйте читаемость (достаточный контраст)
- Для многострочного вывода используйте
white-space: pre
Ограничения:
- Инлайновые стили имеют наивысший приоритет
- Усложняют поддержку кода
- Не поддерживают медиа-запросы
Примечание: Для сложных проектов рекомендуется выносить стили в CSS-классы:
<samp class="terminal-output"> с соответствующими CSS-правилами.