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