Blogger: Styl CSS pro kód na vašem blogu
Přítel se mě zeptal, jak jsem vytvořil oblasti kódu v záznamu Blogger. Udělal jsem to pomocí značky stylu pro CSS v mé šabloně Blogger. Zde je to, co jsem přidal:
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
: Toto je pravidlo CSS, které cílí na HTML<p>
prvky s názvem třídy „code“. Znamená to, že každý odstavec s touto třídou bude stylizován podle následujících vlastností.font-family: Courier New;
: Tato vlastnost nastaví rodinu písem na „Courier New“. Určuje písmo, které bude použito pro text v rámci cílových prvků.font-size: 8pt;
: Tato vlastnost nastavuje velikost písma na 8 bodů. Text v cílových prvcích se zobrazí s touto velikostí písma.border-style: inset;
: Tato vlastnost nastaví styl ohraničení na „vložit“. Vytváří propadlý nebo lisovaný vzhled okraje kolem cílených prvků.border-width: 3px;
: Tato vlastnost nastavuje šířku okraje na 3 pixely. Ohraničení kolem prvků bude mít tloušťku 3 pixely.padding: 5px;
: Tato vlastnost přidá 5 pixelů výplně kolem obsahu uvnitř cílených prvků. Poskytuje mezery mezi textem a okrajem.background-color: #FFFFFF;
: Tato vlastnost nastaví barvu pozadí na bílou (#FFFFFF). Obsah v rámci cílených prvků bude mít bílé pozadí.line-height: 100%;
: Tato vlastnost nastavuje výšku řádku na 100 % velikosti písma. Zajišťuje, že řádky textu jsou rozmístěny podle velikosti písma.margin: 10px;
: Tato vlastnost přidá kolem celého prvku okraj 10 pixelů. Poskytuje mezery mezi tímto prvkem a ostatními prvky na stránce.
Poskytnutý kód CSS definuje styl pro odstavce HTML s třídou „code“. Nastavuje písmo, velikost písma, styl ohraničení, šířku ohraničení, odsazení, barvu pozadí, výšku řádku a okraj pro tyto odstavce. Tento styl lze použít na úryvky kódu nebo předem naformátovaný text v příspěvku na Bloggeru, aby jim dodal specifický vzhled.
Takto to bude vypadat:
p.code {
font-family: Courier New;
velikost písma: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
barva pozadí: #FFFFFF;
výška řádku: 100 %;
marže: 10px;
}
Šťastné kódování!