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-width: 3px;
подложка: 5px;
цвят на фона: #FFFFFF;
височина на реда: 100%;
марж: 10px;
}
Честито кодиране!