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, чтобы придать им особый вид.
Вот как это будет выглядеть:
п.код {
семейство шрифтов: Courier New;
размер шрифта: 8pt;
стиль границы: вставка;
ширина границы: 3px;
обивка: 5px;
background-color: #FFFFFF;
высота строки: 100%;
поле: 10px;
}
Удачного кодирования!