Стиль CSS для коду у вашому блозі

CSS

Мій друг запитав мене, як я створив регіони коду у своєму останньому записі в блозі. Я насправді "підробив" область коду, використовуючи стиль. У Blogger ви можете редагувати шаблон. Я додав такий стиль:

p.code {сімейство шрифтів: Courier New; розмір шрифту: 8pt; прикордонний: вставка; ширина межі: 3 пікселі; заповнення: 5 пікселів; фон-колір: #FFFFFF; висота лінії: 100%; поле: 10 пікселів}

Наступним кроком є ​​редагування мого тегу в режимі 'Редагувати HTML'. Я просто вказую на свій новий стиль, роблячи тег. Вуаля! Розбиття стилів:

  • Встановіть шрифт на Courier New ... схоже на редактор загального коду
  • Встановіть розмір шрифту 8pt, щоб виглядати правильно
  • Встановіть для стилю межі абзацу значення "вставка". Це повторює вигляд текстової області на сторінці.
  • Встановіть ширину межі 2 або 3 пікселі. Завдяки цьому вставний стиль кордону виглядає правильно.
  • Відступ встановлює відстань між межею та текстом усередині.
  • Колір тла ... встановіть його на білий (#FFFFFF)
  • Висота рядка - я відрегулював це до 100%, оскільки деякі інші стилі в моїй темі блогера зробили висоту моєї лінії приблизно 200%
  • Встановіть поле 10 пікселів. Це зміщує абзац (тег p) на 10 пікселів від усього.

Це все, це теж це! Одне зауваження: Редактор, який постачається з Blogger, не може відображати те, як воно відображатиметься у вашому блозі. Але це працює і виглядає чудово!

Ще одне примітка ... після редагування тегу редактор Blogger любить випадково використовувати його в іншому місці у вашому дописі. Це трохи дратує! Моя порада полягала б у тому, щоб написати всю вашу публікацію, а потім зробити одну невеличку редакцію згодом.

Останнє примітка ... обов’язково використовуйте HTML-сутності для відображення ваших символів! Кілька прикладів:

  • Цитати (")"
  • > є>
  • > є>

Щасливе кодування!

3 Коментарі

  1. 1
  2. 2
  3. 3

Що ви думаєте?

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.