Атрибут class тега <samp>

Описание

Атрибут class позволяет назначать CSS-классы элементу <samp>, который используется для обозначения вывода компьютерной программы или системы. Классы помогают стилизовать этот вывод в соответствии с дизайном вашего интерфейса.

Пример использования:
<samp class="code-output error-message"> Error: File not found </samp> <style> .code-output { font-family: monospace; background-color: #f5f5f5; padding: 8px 12px; border-radius: 4px; } .error-message { color: #d32f2f; border-left: 3px solid #d32f2f; } </style>

Типичные классы для <samp>:

Класс Назначение Пример стилей
cli-output Вывод командной строки background: #000; color: #0f0;
system-message Системные сообщения border: 1px solid #ddd;
success-status Успешное выполнение color: #388e3c;
error-status Ошибки выполнения color: #d32f2f;

Рекомендации по именованию:

  • Используйте семантические имена (console-output, api-response)
  • Придерживайтесь единого стиля именования (рекомендуется kebab-case)
  • Разделяйте логические блоки пробелами для нескольких классов
  • Избегайте избыточных префиксов (вместо samp-output используйте просто output)

Пример с несколькими классами:

<samp class="terminal dark-theme scrollable"> $ npm install
Successfully installed 15 packages
Time elapsed: 2.4s </samp> <style> .terminal { font-family: 'Courier New', monospace; padding: 12px; border-radius: 6px; } .dark-theme { background: #1e1e1e; color: #e0e0e0; } .scrollable { max-height: 200px; overflow-y: auto; } </style>
Совет: Для лучшей читаемости кода:
  • Используйте моноширинный шрифт для текста в <samp>
  • Добавляйте отступы и фон для визуального выделения
  • Различайте типы сообщений цветами (ошибки, предупреждения, успех)

Доступность:

  • Обеспечьте достаточный цветовой контраст (минимум 4.5:1)
  • Для цветовых индикаторов добавляйте текстовые метки
  • Используйте ARIA-атрибуты при необходимости (aria-live для динамического контента)