Вміст Маркетинг

Blogger: стиль CSS для коду вашого блогу

Друг запитав мене, як я зробив області коду в записі Blogger. Я зробив це, використовуючи тег стилю для CSS у своєму шаблоні Blogger. Ось що я додав:

p.code {
    font-family: Courier New;
    font-size: 8pt;
    border-style: inset;
    border-width: 3px;
    padding: 5px;
    background-color: #FFFFFF;
    line-height: 100%;
    margin: 10px;
}
  1. p.code: це правило CSS, націлене на HTML <p> елементи з назвою класу «код». Це означає, що будь-який абзац із цим класом буде стилізовано відповідно до наступних властивостей.
  2. font-family: Courier New;: ця властивість встановлює сімейство шрифтів на «Courier New». Він визначає шрифт, який використовуватиметься для тексту в цільових елементах.
  3. font-size: 8pt;: ця властивість встановлює розмір шрифту на 8 пунктів. Текст у цільових елементах відображатиметься з цим розміром шрифту.
  4. border-style: inset;: ця властивість встановлює стиль рамки на «вставку». Це створює втоплений або притиснутий вигляд рамки навколо цільових елементів.
  5. border-width: 3px;: ця властивість встановлює ширину рамки на 3 пікселі. Рамка навколо елементів матиме товщину 3 пікселі.
  6. padding: 5px;: ця властивість додає 5 пікселів відступу навколо вмісту всередині цільових елементів. Він забезпечує відстань між текстом і рамкою.
  7. background-color: #FFFFFF;: ця властивість встановлює білий колір фону (#FFFFFF). Вміст цільових елементів матиме білий фон.
  8. line-height: 100%;: ця властивість встановлює висоту рядка на 100% від розміру шрифту. Це гарантує, що рядки тексту розташовані відповідно до розміру шрифту.
  9. margin: 10px;: ця властивість додає поле в 10 пікселів навколо всього елемента. Він забезпечує відстань між цим елементом та іншими елементами на сторінці.

Наданий код CSS визначає стиль абзаців HTML із класом «код». Він установлює шрифт, розмір шрифту, стиль рамки, ширину рамки, відступ, колір фону, висоту рядка та поле для цих абзаців. Цей стиль можна застосувати до фрагментів коду або попередньо відформатованого тексту в публікації Blogger, щоб надати їм специфічного вигляду.

Ось як це виглядатиме:

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

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

Douglas Karr

Douglas Karr є CMO компанії OpenINSIGHTS і засновник Martech Zone. Дуглас допоміг десяткам успішних стартапів MarTech, допоміг у належній перевірці понад 5 мільярдів доларів у придбання та інвестиції Martech, і продовжує допомагати компаніям у впровадженні та автоматизації їхніх продажів і маркетингових стратегій. Дуглас — міжнародно визнаний експерт і спікер з цифрової трансформації та MarTech. Дуглас також є опублікованим автором посібника для чайників і книги про лідерство в бізнесі.

Статті по темі

Догори кнопки
близько

Виявлено блокування реклами

Martech Zone може надати вам цей вміст безкоштовно, оскільки ми монетизуємо наш сайт за рахунок доходів від реклами, партнерських посилань і спонсорства. Ми будемо вдячні, якщо ви видалите блокувальник реклами під час перегляду нашого сайту.