1PROMTAI.RU

Моё оформление тега — pre

Этот стиль создаёт красиво оформленный блок
с сетчатым фоном, округлыми углами и хорошей читаемостью текста. Он также заботится о том, чтобы содержимое оставалось доступным через прокрутку, если оно выходит за пределы элемента.

pre { 
display: grid;
 border: 3px solid teal; 
border-radius: 10px; 
font-family: monospace; 
font-size: 1.2em; 
line-height: 1.5; 
overflow: auto; 
color: lightgreen; 
margin: 2%; 
padding: 2%; 
max-height: 300px; 
background: linear-gradient( teal, transparent 1px), linear-gradient( 90deg, teal, transparent 1px); 
background-size: 15px 15px; 
background-position: center center;
background-color: black; 
}

/*---можно добавить если растягивает окно-----*/

pre {
	white-space: pre-wrap;
	max-width: 100%;
}

CSS-стиль для элемента
. Вот краткое объяснение каждого из свойств:

display: grid;

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

 

border: 3px solid teal;

Добавляет рамку вокруг элемента с толщиной 3 пикселя и цветом teal.

 

border-radius: 10px;

Округляет углы рамки элемента с радиусом 10 пикселей.

 

font-family: monospace;

Устанавливает моноширинный шрифт для текста внутри элемента, что идеально подходит для отображения кода.

 

font-size: 1.2em;

Увеличивает размер шрифта на 20% относительно размера шрифта родительского элемента.

 

line-height: 1.5;

Устанавливает высоту строки в 1.5 раза больше размера шрифта, что улучшает читаемость.

overflow: auto;

Добавляет полосы прокрутки, если содержимое выходит за пределы элемента.

color: lightgreen;

Устанавливает цвет текста на светло-зелёный.

margin: 2%;

Добавляет отступ вокруг элемента, равный 2% от ширины родительского элемента.

padding: 2%;

Добавляет внутренние отступы внутри элемента, равные 2% от ширины родительского элемента.

max-height: 300px;

Ограничивает максимальную высоту элемента до 300 пикселей, чтобы предотвратить его слишком большое увеличение.

background: linear-gradient(teal, transparent 1px), linear-gradient(90deg, teal, transparent 1px);

Устанавливает фоновое изображение в виде двух градиентов, создавая эффект сетки. Первый градиент создаёт вертикальные линии, а второй — горизонтальные.

background-size: 15px 15px;

Устанавливает размер фона, чтобы градиенты повторялись каждые 15 пикселей по обеим осям.

background-position: center center;

Центрирует фоновое изображение по горизонтали и вертикали.

background-color: black;

Устанавливает основной цвет фона элемента на чёрный.

На 9 октября 2024 года я дополнительно начал использовать плагин : Prismatic

Рекомендую, мне очень понравилась его подсветка кода.

Метки: , ,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Поиск по сайту

Блок

Вход

Блок

Календарь

Октябрь 2024
Пн Вт Ср Чт Пт Сб Вс
 123456
78910111213
14151617181920
21222324252627
28293031  

Блок

теги

Новое

Комментарии

Рубрики

Архивы

RSS 1promtai.ru

Статистика

Блок