Blogisto: CSS Stilo por Kodo en Via Blogo
Amiko demandis min kiel mi faris la kodregionojn en Blogger-enskribo. Mi faris ĝin uzante stiletikedon por CSS en mia ŝablono Blogger. Jen kion mi aldonis:
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
: Ĉi tio estas CSS-regulo, kiu celas HTML-on<p>
elementoj kun la klasnomo "kodo". Ĝi signifas, ke ajna alineo kun ĉi tiu klaso estos stilita laŭ la sekvaj trajtoj.font-family: Courier New;
: Ĉi tiu posedaĵo agordas la tiparfamilion al "Courier New." Ĝi specifas la tiparon, kiu estos uzata por la teksto ene de la celitaj elementoj.font-size: 8pt;
: Ĉi tiu posedaĵo fiksas la tiparon al 8 poentoj. La teksto ene de la celitaj elementoj montriĝos laŭ ĉi tiu tiparo.border-style: inset;
: Ĉi tiu posedaĵo fiksas la randan stilon al "enmetita". Ĝi kreas alfundiĝintan aŭ premitan aspekton por la limo ĉirkaŭ la celitaj elementoj.border-width: 3px;
: Ĉi tiu posedaĵo fiksas la randan larĝon al 3 pikseloj. La limo ĉirkaŭ la elementoj estos 3 pikseloj dika.padding: 5px;
: Ĉi tiu posedaĵo aldonas 5-pikselojn da kompletigo ĉirkaŭ la enhavo ene de la celitaj elementoj. Ĝi provizas interspacon inter la teksto kaj la limo.background-color: #FFFFFF;
: Ĉi tiu posedaĵo metas la fonkoloron al blanka (#FFFFFF). La enhavo ene de la celitaj elementoj havos blankan fonon.line-height: 100%;
: Ĉi tiu posedaĵo fiksas la linialton al 100% de la tiparo. Ĝi certigas, ke la tekstaj linioj estas interspacigitaj laŭ la tiparo.margin: 10px;
: Ĉi tiu posedaĵo aldonas marĝenon de 10 pikseloj ĉirkaŭ la tuta elemento. Ĝi provizas interspacon inter ĉi tiu elemento kaj aliaj elementoj sur la paĝo.
La provizita CSS-kodo difinas stilon por HTML-alineoj kun la klaso "kodo". Ĝi fiksas la tiparon, tiparograndon, randan stilon, randan larĝon, kompletigon, fonkoloron, linion altecon kaj marĝenon por ĉi tiuj alineoj. Ĉi tiu stilo povas esti aplikata al kodaj fragmentoj aŭ antaŭformata teksto en Blogger-afiŝo por doni al ili specifan aspekton.
Jen kiel ĝi aspektos:
p.kodo {
tiparo-familio: Kuriero Nova;
tiparo-grandeco: 8pt;
border-stilo: inset;
rand-larĝo: 3px;
kompletigo: 5px;
fonkoloro: #FFFFFF;
linio-alteco: 100%;
rando: 10px;
}
Feliĉan Kodigon!