HTML-превью

Тег HTML Preformatted <pre> используется для определения предварительно отформатированного текста в HTML-документе.

Пример

В следующем примере показан простой предварительно отформатированный элемент.

<!DOCTYPE html>
<html>
    <body>
        <pre>Apple
Banana
Cherry</pre>
    </body>
</html>

Примечание: HTML-предварительно отформатированный элемент начинается с тега <pre> и заканчивается конечным тегом </pre> .

CSS по умолчанию для HTML <pre>

По умолчанию для предварительно отформатированного элемента установлены следующие свойства CSS.

Копировать

display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px;

Встроенный стиль для предварительно отформатированного элемента HTML

Мы можем изменить стиль предварительно отформатированного элемента с помощью встроенного стиля, используя атрибут style.

В следующем примере мы установили красный цвет для предварительно отформатированного элемента.

<!DOCTYPE html>
<html>
    <body>
        <pre style="color:red;">Apple
Banana
Cherry</pre>
    </body>
</html>

Применить CSS к предварительно отформатированному элементу HTML

Мы можем применить CSS ко всем предварительно отформатированным элементам, используя тег pre .

<!DOCTYPE html>
<html>
    <head>
        <style>
            pre {
              color:red;
            }
          </style>
    </head>
    <body>
        <pre>Apple
Banana
Cherry</pre>
    </body>
</html>

Заключение

В этом уроке по HTML мы изучили тег HTML <pre> и рассмотрели различные примеры, охватывающие определение предварительно отформатированного элемента HTML и его стилизацию.