Стиль CSS для кода в вашем блоге

Мой друг спросил меня, как я сделал области кода в своей последней записи в блоге. Я фактически «подделал» область кода, используя стиль. В Blogger вы можете редактировать свой шаблон. Я добавил следующий стиль:

p.code {семейство шрифтов: Courier New; размер шрифта: 8pt; стиль границы: вставка; ширина границы: 3 пикселя; отступ: 5 пикселей; цвет фона: #FFFFFF; высота строки: 100%; margin: 10px}

Следующим шагом будет редактирование моего тега в режиме «Редактировать HTML». Я просто указываю на свой новый стиль, делая метку. Вуаля! Разбиваем стили:

• Установите шрифт Courier New… выглядит как обычный редактор кода
• Установите размер шрифта 8pt, чтобы он выглядел правильно
• Установите стиль границы абзаца «вставка». Это воспроизводит то, как выглядит текстовое поле на странице.
• Установите ширину границы 2 или 3 пикселя. Благодаря этому стиль границы вставки выглядит правильно.
• Padding устанавливает расстояние между границей и текстом внутри.
• Цвет фона… установите белый (#FFFFFF)
• Высота строки - я настроил это на 100%, потому что некоторые другие стили в моей теме blogger сделали мою высоту строки около 200%.
• Установите поле на 10 пикселей. Это перемещает абзац (тег p) на 10 пикселей от всего.

Вот и все, что есть! Одно примечание: редактор, поставляемый с Blogger, не может отображать, как он будет отображаться в вашем блоге. Но работает и отлично выглядит!

Еще одно примечание ... после того, как вы отредактируете тег, редактор Blogger любит случайным образом использовать его в другом месте вашего сообщения. Это немного раздражает! Я бы посоветовал написать свой пост полностью, а затем внести одно небольшое изменение.

И последнее замечание ... не забудьте использовать HTML-объекты для отображения ваших символов! Пара примеров:

• Цитаты (")"
• > есть>
• > есть>

Удачного кодирования!