Предварительные теги стиля CSS

Мне нравится писать о предварительных тегах HTML. В этом посте я делюсь некоторыми базовыми CSS, которые помогут стилизовать ваши предварительные теги для экрана и печатных носителей.

HTML

Хорошо использовать теги <pre> сами по себе, но если вы включите теги <code> следующим образом (обратите внимание, что в следующем примере угловые скобки заменены на квадратные, чтобы справиться с подсветкой синтаксиса):

[pre][code]
	
	... include pre content here ...
	
[/pre][/code]

…это дает вам немного больше гибкости в плане стилизации с помощью CSS. Давайте рассмотрим несколько примеров.

CSS для отображения на экране

Стилевая особенность тегов <pre> заключается в том, что они сохраняют белое пространство (пробелы и переносы строк) для любого содержимого, которое в них включено, поэтому они идеально подходят для отображения фрагментов кода. Учитывая это, вот несколько основных стилей, которые помогут тегам <pre> отлично выглядеть при отображении на веб-странице:

pre {
	width: 100%;
	padding: 0;
	margin: 0;
	overflow: auto;
	overflow-y: hidden;
	font-size: 12px;
	line-height: 20px;
	background: #efefef;
	border: 1px solid #777;
	background: url(lines.png) repeat 0 0;
}
pre code {
	padding: 10px;
	color: #333;
}

Этот CSS стилизует все теги pre таким образом:

  • Содержимое pre имеет ширину 100%.
  • Горизонтальная полоса прокрутки отображается, если содержимое превышает ширину pre
  • Вертикальная полоса прокрутки не отображается (размер поля pre будет автоматически подгоняться под всю высоту вложенного в него содержимого)
  • Цвет фона будет отображаться как светло-серый
  • Предварительный блок будет иметь тонкую рамку
  • Код будет включать повторяющиеся/переменные полосы (см. примечание)
  • Вокруг содержимого пре-бокса будет 10px отступов.

Примечание: в написанном виде этот код использует свойство background для отображения повторяющегося изображения. Фоновое изображение должно быть несколько пикселей в ширину и 40px в высоту (равно 2x высоте строки). Верхние 20px должны быть более темного/твердого цвета, а нижние 20px — светлого/прозрачного цвета. Это создаст эффект чередующегося/линованного фона, который может улучшить читабельность вашего предварительного контента. Не стесняйтесь удалить свойство background, если вы предпочитаете просто использовать сплошной/одноцветный фон.

Также обратите внимание, что здесь мы применяем padding и цвет через тег <code>. Чтобы упростить ситуацию, мы можем добавить box-sizing: border-box; к селектору <pre>, а затем объединить все так:

pre {
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	margin: 0;
	overflow: auto;
	overflow-y: hidden;
	font-size: 12px;
	line-height: 20px;
	background: #efefef;
	border: 1px solid #777;
	background: url(lines.png) repeat 0 0;
	padding: 10px;
	color: #333;
}

Конечно, это основные стили, которые помогут вам двигаться в правильном направлении. Вы должны настроить CSS в соответствии с вашими предпочтениями и дизайном ваших веб-страниц.

CSS для вывода на печать

Итак, на данный момент ваши теги <pre> стилизованы для отображения на экране (веб-страницы), но как сделать так, чтобы они хорошо смотрелись на печатной странице? Вот некоторые CSS, которые вы можете включить, чтобы ваше <pre> содержимое выглядело чистым и читабельным, когда кто-то распечатывает одну из ваших веб-страниц.

@media print {
	pre {
		overflow-x: auto;
		white-space: pre-wrap;
		white-space: -moz-pre-wrap !important;
		white-space: -pre-wrap;
		white-space: -o-pre-wrap;
		word-wrap: break-word;
		background: #fff;
	}
}

Здесь мы используем запрос @media для применения стилей только к печатным носителям. Таким образом, когда кто-то распечатает вашу страницу, предварительное содержимое будет автоматически развернуто, чтобы поместиться на бумаге, и будет отображаться темным текстом на белом фоне для максимальной читабельности.

Помните, что это только основные стили, я призываю вас экспериментировать и настраивать CSS в соответствии с вашими потребностями. Будьте изобретательны и получайте удовольствие!

Похожие

  • Идеальные предварительные теги
  • Perfect Pre Tags (Redux)
  • Обертывание длинных URL и текстового содержимого с помощью CSS
  • Стили темных пре-тегов CSS
  • Фильтр предварительных тегов в bbPress
  • Стили CSS Предварительные теги

Оцените статью
devanswers.ru
Добавить комментарий