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

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-объекты для отображения ваших символов! Пара примеров:

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

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

3 комментариев

  1. 1
  2. 2
  3. 3

Как вы думаете?

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